Wiki-Quellcode von Terminfinder

Zeige letzte Bearbeiter
1 {{panel float="right"}}
2 (% class="block text-align-center%){{ficon name="date" size="4em"/}}
3
4 (% class="block%)Das Symbol für Elemente vom Typ //Terminfinder//.
5 {{/panel}}
6
7 {{info}}
8 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>>doc:Formcycle.Designer.Form.CodingPanel.ScriptTab.AdjustDateFormat||anchor="HDatumsformatehinzufFCgen"]]. Der Text, der das aktuell ausgewählte Datum anzeigt, kann über die [[i18n-Variable>>doc:Formcycle.UserInterface.FilesAndTemplates.I18nVariables]] "appointementText" angepasst werden.
9 {{/info}}
10
11 {{info}}
12 Der Terminfinder wird nicht in der [[Offline-App>>doc:Formcycle.PluginDocumentation.OfflineClientPlugin]] unterstützt.
13 {{/info}}
14
15 == Funktionsweise ==
16
17 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>>doc:Formcycle.UserInterface.Appointments.WebHome]] die verfügbaren Termine konfiguriert wurden.
18
19 Weiterhin ist es auch möglich, Termine zu stornieren oder umzubuchen. Hierzu muss nur ein abgesendetes Formular erneut aufgerufen werden.
20
21 {{internBaseOptionsElement page="base"/}}
22
23 == Darstellung
24
25 {{figure image="designer_element_appointment_finder_properties_layout_de.png"}}
26 Es gibt verschiedene Optionen, um die Darstellung des Terminfinders und der Termine zu beeinflussen.
27 {{/figure}}
28
29 Hier kann festgelegt werden, wie der Terminfinder und die Termine im Formular dargestellt werden sollen.
30
31 {{table dataTypeAlpha="0" colWidth="-500"}}
32 |=Name|=Beschreibung
33 |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.
34 |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>>doc:Formcycle.UserInterface.Appointments.WebHome]] eingestellt wurde.
35 |Terminende|Wenn aktiviert, wird an jedem verfügbaren Termin die Endzeit des Termin angezeigt. Ansonsten wird nur die Startzeit angezeigt.
36 |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>>url:https://api.jqueryui.com/datepicker/#utility-formatDate||target="_blank"]] entsprechen.
37 |Gesperrt|Gibt an, ob der Termin geändert werden kann.
38 |Versteckt|Gibt an, ob der Terminplaner sichtbar ist.
39 {{/table}}
40
41 {{internBaseOptionsElement page="label"/}}
42
43 == Optionen
44
45 {{figure image="designer_element_appointment_finder_properties_options_de.png"}}
46 Die verfügbaren Termine werden durch einen Terminplan festgelegt, der in der Terminverwaltung im Backend konfiguriert wird.
47 {{/figure}}
48
49 {{table dataTypeAlpha="0" colWidth="-500"}}
50 |=Name|=Beschreibung
51 |Terminplan|Hier kann der Terminplan ausgewählt werden, der die verfügbaren Termine festlegt. Terminpläne können in der [[Terminverwaltung>>doc:Formcycle.UserInterface.Appointments.WebHome]] 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.
52 {{/table}}
53
54 {{internBaseOptionsElement page="cond" /}}
55
56 {{internBaseOptionsElement page="css"/}}
57
58 {{internBaseOptionsElement page="attr"/}}
59
60 {{internBaseOptionsElement page="avail"/}}
61
62 {{internBaseOptionsElement page="ronly"/}}
63
64 {{internBaseOptionsElement page="misc"/}}
65
66 {{content moveToTop="true"/}}
67
68
69 == Auslesen des Wertes per JavaScript ==
70
71 Der Wert eines Terminfinderelements mit dem Namen {{code language="none"}}app1{{/code}} kann im JavaScript mithilfe der folgenden jQuery-Anweisung ausgelesen werden:
72
73 {{code language="javascript"}}
74 $('[xn=app1] .XAppointmentSlotId').val();
75 {{/code}}
76
77 Um aus dem auf diese Weise ausgelesenen Zeitstempel in ein {{code language="none"}}Date{{/code}}-Objekt konvertieren zu können, muss der Wert als Integer geparsed an den Konstruktor für neue {{code language="none"}}Date{{/code}}-Objekte übergeben werden. Um den Wert als {{code language="none"}}Date{{/code}} in eine Variable mit dem Namen {{code language="none"}}appointment{{/code}} zu speichern, kann dementsprechend der folgende Code verwendet werden:
78
79 {{code language="javascript"}}
80 var appointment = new Date( parseInt($('[xn=app1] .XAppointmentSlotId').val(),10) );
81 {{/code}}