Der Kalender besteht aus:

1. Ansichtswechsel (Tabelle/Kalender)
2. Neuanlage-Button
3. Suche
4. Filter
5. Kalenderkopf (Ansichtswechsel und Schnellnavigation)
6. Inhaltsbereich: Dieser ist je nach gewählter Ansicht mit einem entsprechenden Raster strukturiert und enthält die Kalendereinträge (Aufbau und Verhalten siehe Kalender Inhaltsbereich).
7. 1. Kopfzeile Raster
   2. Kopfspalte Raster
7. Kalenderfußzeile: Die Fußzeile enthält eine Legende, die die Bedeutung der verschiedenen Terminstatus angibt.

Der Kalenderkopf besteht aus:

• Auswahlschalter für Ansichtswechsel
• Kalendertitel
• Icon-Buttons “Zurück” und “Weiter”
• Button “Heute”

Die Elemente des Kalenderkopfs werden hier in der Reihenfolge aufgezählt, wie sie auch fokussiert (sofern interaktiv) und vom Screenreader ausgegeben werden sollen.

Die Kalenderfußzeile ist eine Legende, die die Bedeutung der verschiedenen Terminstatus angibt. Die Status werden durch eine Liste von Legendenelementen dargestellt. Die Elemente beinhalten keine Interaktionen.

Legendenelemente enthalten eine Grafik und einen Text. Die Bezeichnung des Elements beschreibt dabei, welcher Status durch die Grafik wiedergegeben wird. Die Grafik muss als Layoutgrafik ausgezeichnet werden.

Die Legende bekommt eine visuell nicht sichtbare Beschriftung “Legende:”.

Der Kalender kann auf folgenden Seitentypen eingesetzt werden und folgt ihrem Aufbau:

1. Seitentyp: Einstiegsseite eines Moduls – Inhaltstyp Tabelle/Liste/Baumstruktur/Kalender
2. Seitentyp: Unterseite eines Moduls – Formular mit Schnellnavigations-Sidebar

Der Header, Raster und Footer werden insgesamt als eine Komponente gruppiert und enthalten eine visuell nicht sichtbare programmatische Beschriftung. Diese sollte identisch sein mit der visuell sichtbaren Beschriftung, welche den Kalender inhaltlich im Kontext (z. B. Seitentitel) beschreibt. Die nicht sichtbare Beschriftung kann sein:

1. “Kalender” + Seitentitel (bei Kalendern auf Modul-Startseiten bzw. Modul-Unterseiten, wenn unter dem Seitentitel keine Tabs vorkommen) + Kalendertitel
2. “Kalender” + Beschriftung des aktiven Tabs (bei Kalendern auf Modul-Startseiten bzw. Modul-Unterseiten mit Tabs unter dem Seitentitel) + Kalendertitel

• Such- und Filterkriterien werden beim Wechsel zwischen Tabelle und Kalender übernommen. Termine die durch die Such- und Filterkriterien aussortiert wurden, werden nicht angezeigt.
• Wird erstmalig von der Tabelle zur Kalenderansicht gewechselt, wird die aktuelle Woche angezeigt
• • Ist der Zeitraum gefiltert, wird die Woche mit dem ersten Tag des gefilterten Zeitraums angezeigt
• Wird zwischen Tabelle und Kalender gewechselt (in beide Richtungen), wird bei einem anschließenden Wechsel zurück, die Ansicht angezeigt, die zuletzt verlassen wurde. Die Ansichtseinstellung bleibt bestehen, bis das Modul verlassen oder das Fenster geschlossen wird.
• • Durch Änderung der Such- und Filterkriterien (außer Zeitraum-Filter) in der Tabellenansicht wird der angezeigte Zeitraum im Kalender nicht geändert.
    Nur wenn der Zeitraum-Filter angepasst wird, wird beim Wechsel zurück zum Kalender der Zeitabschnitt angezeigt, der den ersten Tag des gefilterten Zeitraums beinhaltet.
• Durch Änderung der Such- und Filterkriterien im Kalender wird die Tabelle bei einem anschließenden Wechsel neu geladen und es wird die erste Seite angezeigt.

Auf Hauptseiten mit grauem Hintergrund
Wird der Kalender auf grauem Hintergrund platziert, so erhält der Kalender 4px abgerundete Ecken und einen Schlagschatten.

In Formularen mit weissem Hintergrund
Wird der Kalender auf weißem Hintergrund platziert, so erhält der Kalender 4px abgerundete Ecken und einen grauen Rahmen.

Mit dem Schalter kann zwischen der Tages-, Wochen- und Monatsansicht gewechselt werden. Die Elementbeschriftung lautet “Kalenderansicht”. Die Optionen lauten von links nach rechts:

• Tag
• Woche
• Monat

(visuell Schrifttyp H2, Überschriftenebene im Code kann abweichen: siehe Seitentypen):

Benennt den im Inhaltsbereich sichtbaren Zeitraum. Je nach gewählter Ansicht lautet der Titel z.B.:

• Tagesansicht: “9. Januar 2023”
• Wochenansicht: “9. Januar – 15. Januar 2023” (Wochenansicht mit Jahreswechsel: “26. Dezember 2022 – 1. Januar 2023”)
• Monatsansicht: “Januar 2023”

Falls der Kalendertitel in der Wochenansicht mehrzeilig wird, sollen die Sinneinheiten visuell bestehen bleiben. Das bedeutet, dass bei einem Zeilenumbruch nicht nur das letzte Wort in die neue Zeile umbricht sondern der Umbruch nach dem Bis-Strich gesetzt wird
(z.B. Zeile 1: “9. Januar –”;
Zeile 2: “15. Januar 2023”).

Mit den Buttons kann – abhängig von der gewählten Ansicht – um einen Tag, eine Woche oder einen Monat vor- oder zurückgesprungen werden. Der Fokus verbleibt nach Ausführen der Aktion auf dem Button. Die Buttons tragen die programmatische Beschriftung “Zurück” und “Weiter”. Die zusätzliche Beschreibung der beiden Buttons lautet je nach aktiver Ansicht und Funktion:

• “– Vorheriger Tag”
• “– Nächster Tag”
• “– Vorherige Woche,”
• “– Nächste Woche”
• “– Vorheriger Monat”
• “– Nächster Monat”

Durch Ausführen des Buttons wechselt die Kalenderansicht zum aktuellen Tag bzw. der aktuellen Woche oder dem aktuellen Monat. Der Fokus verbleibt nach Ausführen der Aktion auf dem Button.

• Wird von einem kleineren zu einem größeren Zeitraum gewechselt, wird der Zeitraum angezeigt, der den vorherigen Zeitraum ebenfalls beinhaltet (wird z.B. von der Tagesansicht 28.09.2023 zur Monatsansicht gewechselt, wird September 2023 angezeigt)
• Wird von der Wochenansicht zur Monatsansicht gewechselt und erstreckt sich die zuvor angezeigte Woche über zwei Monate, dann wird der Monat angezeigt in dem der erste Tag der zuvor angezeigten Woche liegt.
• Wird von einem größeren zu einem kleinen Zeitraum gewechselt und befindet sich der aktuelle Tag in dem zuvor angezeigten Zeitraum, wird der Zeitraum angezeigt, der den aktuellen Tag beinhaltet (wird z.B. von der Monatsansicht September 2023 zur Wochenansicht gewechselt und heute ist der 28. September, dann wird die Woche des 28. Septembers angezeigt)
• Wird von einem größeren zu einem kleinen Zeitraum gewechselt und befindet sich der aktuelle Tag NICHT in dem zuvor angezeigten Zeitraum, wird der Zeitraum angezeigt, der zu Beginn des vorherigen Zeitraums lag (wird z.B. von der Monatsansicht September 2029 zur Wochenansicht gewechselt, dann wird die Woche des 1. Septembers 2029 angezeigt)

Wenn das Laden der Termine länger dauert, so wird über dem Grid ein Platzhalter mit Ladesymbol angezeigt. Dieser ist fokussierbar. Such- und Filtermöglichkeiten über dem Kalender werden noch nicht angezeigt, solange die Termine noch nicht vollständig geladen sind.
Der Ladezustand ist im Code als Überschrift eine Stufe unter der Hierarchiestufe des Kalendertitels gekennzeichnet.

Screenreaderausgabe: Der Alternativtext des Ladesymbols lautet “Termine werden geladen”. Dieser wird auch als Tooltip angezeigt, wenn mit der Maus exakt über dem Lade-Icon gehovert wird.
Der Alternativtext wird automatisch vom Screenreader ausgegeben, auch wenn sich der Fokus nicht auf dem Icon befindet. Allerdings wird er, um Audionoise zu vermeiden, erst dann ausgegeben, wenn 2 Sekunden nach Öffnen der Seite die Termine noch nicht vollständig geladen sind.
Falls das Laden noch länger dauert, wird alle 10 Sekunden erneut der Alternativtext des Ladesymbols Termine werden geladen” ausgelesen, unabhängig davon, wo sich der Fokus auf der Seite zu der Zeit befindet.

Nach vollständigem Laden der Termine wird der Text “Suche, Filter und Termine geladen” vom Screenreader ausgegeben. Dies wird nur ausgegeben, wenn das Laden davor länger als 2 Sekunden gedauert hat und die Ergebnisse nicht vorher sichtbar wurden.

Sobald die Daten im Kalender vollständig geladen sind, verschwindet das Ladesymbol und wird durch die Termine ersetzt. Such- und Filtermöglichkeiten über dem Kalender kommen in diesem Moment hinzu. Falls der Tastaturfokus in diesem Moment auf dem Ladezustand lag, wird er dann auf das erste neu hinzugekommene interaktive Element gelegt (Suchfeld falls vorhanden; falls kein Suchfeld vorhanden erstes Element in Filterreihe; falls keine Filterreihe vorhanden, auf den ersten Termin, falls keine Termine vorhanden auf den “Anlegen” Button). Falls der Tastaturfokus auf einem anderen Element auf der Seite lag, wird er durch das Fertigladen des Kalenders nicht versetzt.

Bestätigungsbanner informieren Nutzende nach Rückkehr in eine Datenübersicht mit Kalender über den erfolgreichen Abschluss einer Aktion mit einem Hauptobjekt.

Details zu Verhalten und Bedienung siehe “Erfolgsmeldungen > Bestätigungsbanner”

Die Größen beziehen sich auf die Breite des Kalenderkopfs:

• Unter 840 Pixel Breite (Größe M): Ansichts-Auswahlschalter wechselt zur responsiven Version.

• Unter 640 Pixel Breite (Größe S): Kalenderkopf wird zweizeilig. In der ersten Zeile befinden sich der Auswahlschalter (linksbündig) und die Buttons “Heute”, “Vor”, “Zurück”. In der zweiten Zeile befindet sich der Kalendertitel (linksbündig).

• Unter 420 Pixel Breite (Größe XS): Es wird automatisch auf die Tagesansicht gewechselt und der Schalter für den Ansichtswechsel ausgeblendet. Liegt der aktuelle Tag innerhalb des im Kalendertitel genannten Zeitraums, wird nach dem Wechsel der aktuelle Tag angezeigt. Liegt der aktuelle Tag nicht innerhalb des im Kalendertitel genannten Zeitraums, wird je nach dem welche Kalenderansicht vor dem Wechsel zur Tagesansicht ausgewählt war, der erste Tag der entsprechenden Woche oder des entsprechenden Monats angezeigt. Wird das Fenster anschließend wieder vergrößert bzw. die Zoomstufe verkleinert, so wird die Tagesansicht beibehalten, bis Nutzende aktiv eine andere Ansicht auswählen. Lag der Fokus vor dem Wechsel zur XS-Ansicht auf dem Auswahlschalter für den Ansichtswechsel, so wird anschließend der Button “Zurück” fokussiert.
• • Wechsel von Tabelle zum Kalender bei weniger als 420 Pixel Breite: Wird von der Tabellenansicht zum Kalender gewechselt, wird der erste Tag des gefilterten Zeitraums angezeigt. Wird der Zeitraum nicht gefiltert, wird das aktuelle Tagesdatum angezeigt.
  • Wird in der geöffneten Kalenderansicht mit der Tastatur gezoomt und liegt der Tastaturfokus innerhalb des Kalendergrids oder auf einem Termin, so wird beim Wechsel zur Tagesansicht, der fokussierte Tag angezeigt und der Fokus liegt wieder auf dem zuvor fokussierten Element. Die Mauszeigerposition wird ignoriert.
  • Wird in der geöffneten Kalenderansicht mit der Maus gezoomt und zeigt der Mauszeiger auf das Kalendergrid oder auf einen Termin, so wird beim Wechsel zur Tagesansicht, der Tag angezeigt auf dem sich der Mauszeiger befindet. Hat sich der Tastaturfokus bei dem Ansichtswechsel auf einem Element befunden, welches durch den Ansichtswechsel ausgeblendet wurde, dann sollte der Fokus auf das erste Element im Kalenderraster der Tagesansicht gesetzt werden.

Die Breite des Kalenderfußes wird an die Gesamtbreite des Kalenders angepasst.
Die Elemente der Kalenderfußzeile werden bei Bedarf vertikal gestapelt.

Kalenderkopf

• Tastaturbedienung siehe Elemente “Button” und “Auswahlschalter”

Kalenderfußzeile

• Die Kalenderfußzeile lässt keine Interaktion zu.

Bestätigungsbanner

• siehe “Erfolgsmeldungen > Bestätigungsbanner”

Kalenderkopf

• Mausbedienung siehe Elemente “Button” und “Auswahlschalter”

Kalenderfußzeile

• Die Kalenderfußzeile lässt keine Interaktion zu.

Bestätigungsbanner

• siehe “Erfolgsmeldungen > Bestätigungsbanner”