Datenschutzhinweis

 

Beim Laden dieses Inhalts werden Nutzungsinformationen an Vimeo übertragen und dort ggf. verarbeitet.

 

             

Formularfeld: Terminfinder

Geändert am Do, 8 Feb um 9:31 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.

NameBeschreibung
Als TextfeldWenn 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ätzeWenn 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.
TerminendeWenn aktiviert, wird an jedem verfügbaren Termin die Endzeit des Termin angezeigt. Ansonsten wird nur die Startzeit angezeigt.
DatumsformatHier 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.
GesperrtGibt an, ob der Termin geändert werden kann.
VerstecktGibt an, ob der Terminplaner sichtbar ist.


Optionen

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

NameBeschreibung
TerminplanHier 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

Der Wert eines Terminfinderelements mit dem Namen app1 kann im JavaScript mithilfe der folgenden jQuery-Anweisung ausgelesen werden:

$('[xn=app1] .XAppointmentSlotId').val();


Um aus dem auf diese Weise ausgelesenen Zeitstempel in ein Date-Objekt konvertieren zu können, muss der Wert als Integer geparsed an den Konstruktor für neue Date-Objekte übergeben werden. Um den Wert als Date in eine Variable mit dem Namen appointment zu speichern, kann dementsprechend der folgende Code verwendet werden:

var appointment = new Date( parseInt($('[xn=app1] .XAppointmentSlotId').val(),10) );


Vorbelegung auf bestimmten Monat per JavaScript

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

$('[data-name="app1"]').appointmentPicker("setMonthYear", { month: 5, year: 2025 });

War dieser Artikel hilfreich?

Das ist großartig!

Vielen Dank für das Feedback

Leider konnten wir nicht helfen

Vielen Dank für das Feedback

Wie können wir diesen Artikel verbessern?

Wählen Sie wenigstens einen der Gründe aus
CAPTCHA-Verifikation ist erforderlich.

Feedback gesendet

Wir wissen Ihre Bemühungen zu schätzen und werden versuchen, den Artikel zu korrigieren