Formularfeld: Terminfinder

Geändert am Fr, 2 Aug um 11:48 VORMITTAGS

Das Symbol für Elemente vom Typ Terminfinder.

Standardmäßig unterstützt der Terminfinder die Sprachen Deutsch und Englisch. Weitere Sprachen können hinzugefügt werden, indem die entsprechend Sprachdateien für den JQuery-UI-Datepicker hinzugefügt werden. Siehe hierzu den Hilfeeintrag zum Datepicker. Der Text, der das aktuell ausgewählte Datum anzeigt, kann über die i18n-Variable "appointementText" angepasst werden.

 Der Terminfinder wird nicht in der Offline-App unterstützt.

Funktionsweise

Das Formularelement Terminfinder fügt einen Kalender in das Formular ein. Hier kann der Nutzer einen Termin für eine Veranstaltung über das Formular buchen. Voraussetzung ist, dass in der Terminverwaltung die verfügbaren Termine konfiguriert wurden. Weiterhin ist es auch möglich, Termine zu stornieren oder umzubuchen. Hierzu muss nur ein abgesendetes Formular erneut aufgerufen werden.

Eigenschaften

Übersicht der Standardeigenschaften

In diesem Abschnitt werden nur die Eigenschaften beschrieben, die von den Standards abweichen.

Darstellung

Es gibt verschiedene Optionen, um die Darstellung des Terminfinders und der Termine zu beeinflussen.

Hier kann festgelegt werden, wie der Terminfinder und die Termine im Formular dargestellt werden sollen.

Name	Beschreibung
Als Textfeld	Wenn deaktiviert, wird immer ein Kalender mit dem gewählten Monat und den verfügbaren Terminen angezeigt. Wenn aktiviert, wird initial nur der ausgewählte Termin in einem Textfeld angezeigt. Erst durch Betätigen einer Schaltfläche rechts neben dem Textfeld wird der Kalender für die Auswahl eines anderen Termins geöffnet.
Freie Plätze	Wenn aktiviert, wird an jedem verfügbaren Termin die Anzahl freier Plätze angezeigt. Die Anzahl der freien Plätze hängt von der Kapazität ab, die in der Terminverwaltung eingestellt wurde.
Terminende	Wenn aktiviert, wird an jedem verfügbaren Termin die Endzeit des Termin angezeigt. Ansonsten wird nur die Startzeit angezeigt.
Datumsformat	Hier kann das Datumsformat ausgewählt werden, in dem die Termine angezeigt werden. Es stehen einige vordefinierte Formate zur Verfügung, es kann aber auch ein selbstdefiniertes Format festgelegt werden. In dem Fall muss das Format der Syntax des JQuery UI datepickers entsprechen.
Gesperrt	Gibt an, ob der Termin geändert werden kann.
Versteckt	Gibt an, ob der Terminplaner sichtbar ist.

Optionen

Die verfügbaren Termine werden durch einen Terminplan festgelegt, der in der Terminverwaltung im Backend konfiguriert wird.

Name	Beschreibung
Terminplan	Hier kann der Terminplan ausgewählt werden, der die verfügbaren Termine festlegt. Terminpläne können in der Terminverwaltung erstellt und bearbeitet werden. Zudem kann durch Betätigen der Schaltfläche mit dem Stiftsymbol rechts neben dem Auswahlfeld auch direkt ein Terminplan erstellt oder bearbeitet werden. Wurde in der Terminverwaltung eine Änderungen vorgenommen, kann die Liste der verfügbaren Terminpläne durch Betätigen der Aktualisieren-Symbols rechts oben neu geladen werden.

Name

Beschreibung

Terminplan

Hier kann der Terminplan ausgewählt werden, der die verfügbaren Termine festlegt. Terminpläne können in der Terminverwaltung erstellt und bearbeitet werden. Zudem kann durch Betätigen der Schaltfläche mit dem Stiftsymbol rechts neben dem Auswahlfeld auch direkt ein Terminplan erstellt oder bearbeitet werden. Wurde in der Terminverwaltung eine Änderungen vorgenommen, kann die Liste der verfügbaren Terminpläne durch Betätigen der Aktualisieren-Symbols rechts oben neu geladen werden.

Auslesen des Wertes per JavaScript

Verfügbar seit 8.1.0.

Der Wert eines Terminfinderelements mit dem Namen app1 kann im JavaScript mithilfe der Methode slot ausgelesen werden:

$.xutil.appointmentPicker.get.slot(".app1")

Diese Funktion liefert ein Objekt mit dem Datum (Jahr, Monat, Tag) sowie der Start- und Endzeit (Stunde, Minute) zurück, in folgender Form:

{
  "date": { "day": 2, "month": 8, "year": 2024 },
  "endTime": { "hour": 14, "minute": 30 },
  "startTime": { "hour": 14, "minute": 0 },
  "timestamp": 1722600000000
}

Bei Bedarf ist es auch mögich, den Wert als JavaScript-Date-Objekt auszulesen:

let appointment = $.xutil.appointmentPicker.get.slotStartDate(".app1")

Achtung!

Soweit möglich, sollte die Funktion slot verwendet werden. Ein Date-Objekt verwendet immer die lokale Zeitzone des Browsers. Diese kann sich von der Zeitzone unterscheiden, die für den Terminplan hinterlegt ist.

Beispiel: Der Terminplan verwendet die Zeitzone "Zentraleuropäische Zeit (Berlin)". Eine Person aus Irland öffnet nun das Formular und wählt den Termin 05. Mai 2024, 08:00 Uhr aus. Der Zugriff auf den Slot funktioniert wie erwartet, als Stunde und Minute erhält man 8 und 0. Das Date-Objekt aber verwendet nun die irländische Zeitzone, in der es eine Stunde eher ist. Die Stunde des Date-Objekts (appointment.getHour()) ist damit im Browser dieser Person 7 (und nicht 8, obwohl im Terminplan 8 Uhr ausgewählt ist).

Hinweis: Die Funktion slotStartDate steht erst ab Version 8.2.1 von formcycle zur Verfügung. In früheren Versionen kann wie folgt auf das Date-Objekt zugegriffen werden:

let appointment = new Date($.xutil.appointmentPicker.get.slot(".app1").timestamp);

Vorbelegung auf bestimmten Monat per JavaScript

Verfügbar seit 8.1.0.

Die Anzeige des Standard-Monats im Terminfinder ist mittels der JavaScript-API möglich. Über die changeMonthYear-Funktion kann der Monat und das Jahr festgelegt werden. Zum Beispiel der Monat Mai im Jahr 2025:

$.xutil.appointmentPicker.do.changeMonthYear(".app1", { month: 5, year: 2025 })

Deaktivieren bestimmter Zeiträume per JavaScript

Verfügbar seit 8.1.0.

Mittels der JavaScript-API ist es möglich, einzelne Tage oder Zeiträume zu deaktivieren, sodass diese nicht mehr ausgewählt werden können.

Den 22. August 2024 und 24. August 2024 deaktivieren per Funktion disableDates:

$.xutil.appointmentPicker.do.disableDates(".app1", 
  {year: 2024, month: 8, day: 22},
  {year: 2024, month: 8, day: 24},
)

Alle Tage zwischen dem 12. August 2024 und 19. August 2024 deaktivieren per Funktion disableDateRanges:

$.xutil.appointmentPicker.do.disableDateRanges(".app1", 
  [{year: 2024, month: 8, day: 12}, {year: 2024, month: 8, day: 19}]
)

Alle Tage vor dem 12. August 2024 deaktivieren:

$.xutil.appointmentPicker.do.disableDateRanges(".app1", 
  [undefined, {year: 2024, month: 8, day: 12}]
)

Analog ist es per $.xutil.appointmentPicker.do.enableDates und $.xutil.appointmentPicker.do.enableDateRanges möglich, manuell deaktivierte Tage wieder zu aktivieren.

Um alle manuell deaktivierten Tage wieder zu aktivieren, kann clearDisabledDates verwendet werden:

$.xutil.appointmentPicker.do.clearDisabledDates(".app1")