dogfather-universe/workspace/kalender.html

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Kalender · Creator Workspace</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/kalender.css?v=202609052040" />
</head>

<body class="start">

<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
     Ecken, siehe start.css). Ein eigenes Element statt eines dritten
     Pseudo-Elements -- body hat nur ::before und ::after. -->
<div class="schleier" aria-hidden="true"></div>

<header class="kopfleiste">
  <button type="button" class="zurueck-knopf" id="zurueck" hidden>
    <svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M14.5 5.5 8 12l6.5 6.5" />
    </svg>
    <span class="zurueck-knopf__text">Zurück</span>
  </button>
  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Kalender</span></p>
  <div class="kopfleiste__rechts">
    <span class="wer" id="wer">…</span>
    <button type="button" class="abmelden" id="abmelden">Abmelden</button>
  </div>
</header>

<main class="inhalt inhalt--breit">

  <!-- Der Zeitraum ist die Überschrift, nicht eine Beschriftung neben
       Knöpfen: Man liest zuerst, WO man ist, und bewegt sich dann. -->
  <section class="k-kopf">
    <div class="k-kopf__titel">
      <h1 class="k-zeitraum" id="zeitraum">…</h1>
      <p class="k-kopf__unter" id="zeitraum-unter"></p>
    </div>
    <div class="k-nav">
      <button type="button" class="knopf-still k-pfeil" id="zurueck-zeit" aria-label="Vorheriger Zeitraum">‹</button>
      <button type="button" class="knopf-still" id="heute-knopf">Heute</button>
      <button type="button" class="knopf-still k-pfeil" id="vor-zeit" aria-label="Nächster Zeitraum">›</button>
      <button type="button" class="knopf knopf--klein" id="neu-oeffnen">Neuer Termin</button>
    </div>
  </section>

  <!-- Zwei Reihen, die zwei VERSCHIEDENE Fragen beantworten – und deshalb
       beschriftet sind:
         "Als Nächstes"  blickt ab heute nach vorn und ändert sich NICHT
                         beim Blättern
         "Im September"  beschreibt den Monat, den man gerade ansieht
       Ohne Überschriften wären zwei gleich aussehende Reihen verwirrend. -->
  <section class="k-leiste" id="saison-block" hidden>
    <p class="feldschild">Als Nächstes</p>
    <div class="k-anlassreihe" id="saison"></div>
  </section>

  <section class="k-leiste" id="monat-block" hidden>
    <p class="feldschild" id="monat-titel">Im Monat</p>
    <div class="k-anlassreihe" id="monatsanlaesse"></div>
  </section>

  <form class="neu" id="neu" hidden>
    <div class="neu__zeile">
      <label class="feld-schild" for="f-titel">Worum geht es?</label>
      <input id="f-titel" maxlength="160" placeholder="z. B. Wochen-Call mit Luna" required />
    </div>
    <div class="neu__raster">
      <div>
        <label class="feld-schild" for="f-art">Art</label>
        <select id="f-art">
          <option value="call" selected>Call</option>
          <option value="termin">Termin</option>
          <option value="review">Review</option>
        </select>
      </div>
      <div>
        <label class="feld-schild" for="f-beginn">Beginn</label>
        <input id="f-beginn" type="datetime-local" required />
      </div>
      <div>
        <label class="feld-schild" for="f-dauer">Dauer <span class="feld-schild__still">Minuten</span></label>
        <input id="f-dauer" type="number" min="5" max="1440" step="5" value="30" />
      </div>
      <!-- Wiederholen. Die Auswahl wird erst beim Öffnen gefüllt, weil
           ihre Beschriftungen vom gewählten Datum abhängen: "jeden
           Dienstag", "jeden Monat am 2." – so muss niemand raten, was
           ein Rhythmus im eigenen Fall bedeutet. -->
      <div>
        <label class="feld-schild" for="f-takt">Wiederholen</label>
        <select id="f-takt">
          <option value="">Einmalig</option>
        </select>
      </div>
      <div id="feld-teilnehmer" hidden>
        <label class="feld-schild" for="f-teilnehmer">Mit wem</label>
        <select id="f-teilnehmer"><option value="">—</option></select>
      </div>
    </div>

    <!-- WER SONST NOCH DABEI IST (05.09.2026).
         Wunsch: "ich will auch 2 leute markieren können mit denen der
         call ist."

         Einzelne Schalter statt eines <select multiple>: Das verliert
         bei einem Fehlklick die ganze Auswahl und ist am Handy kaum zu
         bedienen.

         FÜR JEDE ROLLE, nicht nur für die Leitung (05.09.2026:
         *"das soll für jeden verfügbar sein"*). Das ist ohne Risiko,
         weil nicht die Oberfläche entscheidet, wen man auswählen darf,
         sondern der Server: /api/personen liefert jeder Rolle nur die
         zugeteilten Namen, und teilnehmerSetzen() lässt alles andere
         still weg. Ein Creator sieht hier also seine Betreuer, keine
         fremden Creator.

         Die Klassen heißen k-dabei__* und stehen in kalender.css.
         Vorher waren es die .wahl__*-Klassen aus dateien.css -- die
         diese Seite gar nicht einbindet, weshalb die Namen ohne jeden
         Abstand aneinanderklebten. -->
    <div id="feld-dabei" hidden>
      <p class="feld-schild">Wer ist noch dabei?</p>
      <div class="k-dabei" id="dabei-wahl"></div>
      <p class="leise" id="dabei-hinweis"></p>
    </div>

    <!-- Erscheint nur, wenn ein Rhythmus gewählt ist. Der Satz darunter
         sagt in Worten, was gleich passiert – eine Regel, die man nicht
         vorlesen kann, stellt man später nicht mehr richtig ab. -->
    <div class="neu__zeile k-wdh" id="feld-wdh" hidden>
      <div class="k-wdh__ende">
        <label class="feld-schild" for="f-ende">Läuft bis
          <span class="leise">(leer = bis du sie abstellst)</span></label>
        <input id="f-ende" type="date" />
      </div>
      <p class="k-wdh__satz" id="wdh-satz" aria-live="polite"></p>
    </div>
    <div class="neu__zeile">
      <label class="feld-schild" for="f-ort">Ort oder Link <span class="leise">(optional)</span></label>
      <input id="f-ort" maxlength="400" placeholder="Discord, Meet-Link, Adresse …" />
    </div>
    <div class="neu__zeile">
      <label class="feld-schild" for="f-text">Notiz <span class="leise">(optional)</span></label>
      <textarea id="f-text" rows="2" maxlength="4000"></textarea>
    </div>
    <p class="fehler" id="neu-fehler" role="alert" aria-live="polite"></p>
    <div class="neu__knoepfe">
      <button type="submit" class="knopf knopf--klein" id="neu-speichern">Eintragen</button>
      <button type="button" class="abmelden" id="neu-abbrechen">Abbrechen</button>
    </div>
  </form>

  <!-- Die laufenden Wiederholungen. Steht bewusst über dem Kalender und
       nicht in einem Menü versteckt: Was von allein weiterläuft, muss
       man sehen können, sonst weiß nach drei Monaten niemand mehr,
       warum jeden Dienstag ein Call im Kalender steht. -->
  <section class="k-leiste k-serien" id="serien-block" hidden>
    <p class="feldschild">Läuft von allein</p>
    <div class="k-serienliste" id="serien"></div>
  </section>

  <p class="fehler" id="fehler" role="alert" aria-live="polite"></p>

  <!-- Vier Ansichten auf DENSELBEN Daten. Der Server liefert einen
       Zeitraum, hier wird er nur unterschiedlich dargestellt – so kann
       keine Ansicht etwas anderes zeigen als die andere. -->
  <div class="k-werkzeuge">
    <div class="k-ansichten" role="group" aria-label="Ansicht">
      <button type="button" class="k-ansicht" data-ansicht="monat" aria-pressed="true">Monat</button>
      <button type="button" class="k-ansicht" data-ansicht="woche" aria-pressed="false">Woche</button>
      <button type="button" class="k-ansicht" data-ansicht="liste" aria-pressed="false">Liste</button>
      <button type="button" class="k-ansicht" data-ansicht="zeitstrahl" aria-pressed="false">Zeitstrahl</button>
    </div>
    <div class="k-filter" id="filter"></div>
  </div>

  <div id="kalender" aria-busy="true"><p class="leise">Kalender wird geladen …</p></div>

  <!-- Der Tagesdialog. Als echtes <dialog>: Esc schließt, der Tastaturfokus
       bleibt drin, und der Rest der Seite ist für Vorleseprogramme still –
       das alles bringt das Element mit, ohne dass es nachgebaut wird. -->
  <dialog id="tagdialog" class="k-dialog" aria-labelledby="tagdialog-titel">
    <div class="k-dialog__kopf">
      <div>
        <strong id="tagdialog-titel" class="k-dialog__titel">…</strong>
        <span id="tagdialog-unter" class="k-dialog__unter"></span>
      </div>
      <button type="button" class="knopf-still" id="tagdialog-zu" aria-label="Schließen">✕</button>
    </div>
    <div id="tagdialog-anlaesse" class="k-dialog__anlaesse"></div>
    <div id="tagdialog-liste" class="k-dialog__liste"></div>
    <div class="k-dialog__fuss">
      <button type="button" class="knopf knopf--klein" id="tagdialog-neu">Hier eintragen</button>
      <span class="k-dialog__tipp">Esc schließt</span>
    </div>
  </dialog>

</main>

<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/kalender.js?v=202609052040" defer></script>
</body>
</html>