Skip to Content

Wiki source code of Terminfinder

Show last authors
1 {{panel float="right"}}
2 (% class="block text-align-center%){{ficon name="date" size="4em"/}}
3
4 (% class="block%)The icon for form elements of type //appointment finder//.
5 {{/panel}}
6
7 {{info}}
8 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.Designer.Form.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".
9 {{/info}}
10
11 {{info}}
12 The appointment finder is not supported in the [[offline app>>doc:Formcycle.PluginDocumentation.OfflineClientPlugin]].
13 {{/info}}
14
15 == Overview ==
16
17 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.
18
19 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.
20
21 {{internBaseOptionsElement page="base"/}}
22
23 === Style
24
25 {{figure image="designer_element_appointment_finder_properties_layout_en.png"}}
26 There are various options for changing how the appointment finder and the available dates are presented to the user.
27 {{/figure}}
28
29 In this section you can decide how the appointment finder and the available dates are displayed.
30
31 {{table dataTypeAlpha="0" colWidth="-500"}}
32 |=Name|=Description
33 |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.
34 |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.
35 |Appointment end|When activated, the end time is shown for each available time. Otherwise, only the start time is shown.
36 |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"]].
37 |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.
38 |Hidden|Whether the appointment finder is shown or hidden.
39 {{/table}}
40
41 {{internBaseOptionsElement page="label"/}}
42
43 === Options
44
45 {{figure image="designer_element_appointment_finder_properties_options_en.png"}}
46 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.
47 {{/figure}}
48
49 {{table dataTypeAlpha="0" colWidth="-500"}}
50 |=Name|=Description
51 |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.
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 === Reading the value via JavaScript ===
70
71 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:
72
73 {{code language="javascript"}}
74 $('[xn=app1] .XAppointmentSlotId').val();
75 {{/code}}
76
77 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:
78
79 {{code language="javascript"}}
80 var appointment = new Date( parseInt($('[xn=app1] .XAppointmentSlotId').val(),10) );
81 {{/code}}