Wiki source code of Terminfinder
Hide last authors
author | version | line-number | content |
---|---|---|---|
1.1 | 1 | {{panel float="right"}} | |
2 | (% class="block text-align-center%){{ficon name="date" size="4em"/}} | ||
3 | |||
9.1 | 4 | (% class="block%)The icon for form elements of type //appointment finder//. | |
1.1 | 5 | {{/panel}} | |
6 | |||
7 | {{info}} | ||
9.1 | 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". | |
1.1 | 9 | {{/info}} | |
10 | |||
11 | {{info}} | ||
9.1 | 12 | The appointment finder is not supported in the [[offline app>>doc:Formcycle.PluginDocumentation.OfflineClientPlugin]]. | |
1.1 | 13 | {{/info}} | |
14 | |||
9.1 | 15 | == Overview == | |
1.1 | 16 | ||
9.1 | 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. | |
1.1 | 18 | ||
9.1 | 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. | |
1.1 | 20 | ||
21 | {{internBaseOptionsElement page="base"/}} | ||
22 | |||
9.1 | 23 | === Style | |
1.1 | 24 | ||
9.1 | 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. | ||
1.1 | 27 | {{/figure}} | |
28 | |||
9.1 | 29 | In this section you can decide how the appointment finder and the available dates are displayed. | |
1.1 | 30 | ||
31 | {{table dataTypeAlpha="0" colWidth="-500"}} | ||
9.1 | 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. | ||
1.1 | 39 | {{/table}} | |
40 | |||
41 | {{internBaseOptionsElement page="label"/}} | ||
42 | |||
9.1 | 43 | === Options | |
1.1 | 44 | ||
9.1 | 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. | ||
1.1 | 47 | {{/figure}} | |
48 | |||
49 | {{table dataTypeAlpha="0" colWidth="-500"}} | ||
9.1 | 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. | ||
1.1 | 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"/}} | ||
2.1 | 67 | ||
68 | |||
9.1 | 69 | === Reading the value via JavaScript === | |
2.1 | 70 | ||
9.1 | 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: | |
2.1 | 72 | ||
73 | {{code language="javascript"}} | ||
74 | $('[xn=app1] .XAppointmentSlotId').val(); | ||
75 | {{/code}} | ||
76 | |||
9.1 | 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: | |
2.1 | 78 | ||
79 | {{code language="javascript"}} | ||
80 | var appointment = new Date( parseInt($('[xn=app1] .XAppointmentSlotId').val(),10) ); | ||
81 | {{/code}} |