Wiki source code of Terminfinder

Show last authors
1 {{version major="6" minor="5" patch="0"/}} The appointment finder is available since version 6.5.0 of {{formcycle /}}.
2
3 {{panel float="right"}}
4 (% class="block text-align-center%){{ficon name="date" size="4em"/}}
5
6 (% class="block%)The icon for form elements of type //appointment finder//.
7 {{/panel}}
8
9 {{info}}
10 By default, the appointment finder supports the languages German and Englisch. You can add support for further languages by adding the appropriate language files for the jQuery UI datepicker. See the [[datepicker help page>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.AdjustDateFormat||anchor="HExistinglanguage"]] for more info. To change the text that indicates the currently selected date, edit the [[i18n variable>>doc:Formcycle.UserInterface.FilesAndTemplates.I18nVariables]] "appointementText".
11 {{/info}}
12
13 {{info}}
14 The appointment finder is not supported in the [[offline app>>doc:Formcycle.PluginDocumentation.OfflineClientPlugin]].
15 {{/info}}
16
17 == Overview ==
18
19 The form element //appointment finder// adds a calendar to the form. Here the user can select a date and time for an event and book an appointment. This feature requires that you have configured the available appointments in the the [[appointment management>>doc:Formcycle.UserInterface.Appointments.WebHome]] menu of the backend.
20
21 Furthermore, the user can also move or cancel existing appointments. To do so, they just need to reopen a submitted form, change or delete the selected date, and submit the form again.
22
23 {{internBaseOptionsElement page="base"/}}
24
25 === Style
26
27 {{figure image="designer_element_appointment_finder_properties_layout_en.png"}}
28 There are various options for changing how the appointment finder and the available dates are presented to the user.
29 {{/figure}}
30
31 In this section you can decide how the appointment finder and the available dates are displayed.
32
33 {{table dataTypeAlpha="0" colWidth="-500"}}
34 |=Name|=Description
35 |Closeable|When activated, the full calendar with the available currently selected month and the available dates is always shown. When deactivated, only a text field with the selected date is shown initially. The callendar is shown only once the user clicks on the button to the right of the text field.
36 |Available slots|When activated, the number of free slots is shown for each available time. The number of available slots depends on the capacity that was set on the schedule in the [[appointment management menu>>doc:Formcycle.UserInterface.Appointments.WebHome]] in the backend.
37 |Appointment end|When activated, the end time is shown for each available time. Otherwise, only the start time is shown.
38 |Date format|Here you can select the format that is used for displaying dates and times. You can either select one of the pre-defined formats, or enter your own format. If the latter, the syntax of the format string must conform to the rules set out by the [[JQuery UI datepicker>>url:https://api.jqueryui.com/datepicker/#utility-formatDate||target="_blank"]].
39 |Disabled|Whether the user can the the date and time of the selected appointment, or select an appointment at all if not appointment is selected yet.
40 |Hidden|Whether the appointment finder is shown or hidden.
41 {{/table}}
42
43 {{internBaseOptionsElement page="label"/}}
44
45 === Options
46
47 {{figure image="designer_element_appointment_finder_properties_options_en.png"}}
48 The available dates and times where the user can book an appointment are defined by a schedule that can be created or edited in the appointment management backend menu.
49 {{/figure}}
50
51 {{table dataTypeAlpha="0" colWidth="-500"}}
52 |=Name|=Description
53 |Schedule|Here you can select the schedule that defines the available dates and times for the appointments. You can create or edit schedules in the [[appointment management backend menu>>doc:Formcycle.UserInterface.Appointments.WebHome]]. Also, you can click on the pencil icon to the right of the select field to open a dialog where you can edit the schedules as well. In case you have made a change in the appointment mangagement backend menu, you can click on the update icon to the top right to refresh the list of available schedules.
54 {{/table}}
55
56 {{internBaseOptionsElement page="cond" /}}
57
58 {{internBaseOptionsElement page="css"/}}
59
60 {{internBaseOptionsElement page="attr"/}}
61
62 {{internBaseOptionsElement page="avail"/}}
63
64 {{internBaseOptionsElement page="ronly"/}}
65
66 {{internBaseOptionsElement page="misc"/}}
67
68 {{content moveToTop="true"/}}
69
70
71 === Reading the value via JavaScript ===
72
73 The value of an appointment finder element named {{code language="none"}}app1{{/code}} can be read as a timestamp in JavaScript using the following jQuery statement:
74
75 {{code language="javascript"}}
76 $('[xn=app1] .XAppointmentSlotId').val();
77 {{/code}}
78
79 To get a {{code language="none"}}Date{{/code}} object from the obtained timestamp, the value must be parsed accordingly. For example, to store the value as {{code language="none"}}Date{{/code}} in a variable named {{code language="none"}}appointment{{/code}}, the following code can be used:
80
81 {{code language="javascript"}}
82 var appointment = new Date( parseInt($('[xn=app1] .XAppointmentSlotId').val(),10) );
83 {{/code}}

Navigation

Copyright 2000-2025