The icon for elements of type Appointment.
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 for more info. To change the text that indicates the currently selected date, edit the i18n variable "appointementText".
The appointment finder is not supported in the offline app.
Overview
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 menu of the backend.
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.
Properties
Overview of the standard properties
This section describes only those properties that are different from the standard.
Style
|
In this section you can decide how the appointment finder and the available dates are displayed.
| Name | Description |
|---|---|
| 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. |
| 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 in the backend. |
| Appointment end | When activated, the end time is shown for each available time. Otherwise, only the start time is shown. |
| 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. |
| 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. |
| Hidden | Whether the appointment finder is shown or hidden. |
Options
|
| Name | Description |
|---|---|
| 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. 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. |
Read the value via JavaScript
Available since 8.1.0.
To access the currently selected slot of an appointment element with the name app1, you can use the JavaScript function slot:
$.xutil.appointmentPicker.get.slot(".app1")This functions returns an object with the date (year, month, day), as well as the start and end time (hour, minute):
{
"date": { "day": 2, "month": 8, "year": 2024 },
"endTime": { "hour": 14, "minute": 30 },
"startTime": { "hour": 14, "minute": 0 },
"timestamp": 1722600000000
}If necessary, you can also access the start time as a JavaScript date object:
let appointment = $.xutil.appointmentPicker.get.slotStartDate(".app1")Careful!
Soweit möglich, sollte die Funktion slot verwendet werden. Ein Date-Objekt verwendet immer die lokale Zeitzone des Browsers. Diese kann sich von der Zeitzone unterscheiden, die für den Terminplan hinterlegt ist.
Beispiel: Der Terminplan verwendet die Zeitzone "Zentraleuropäische Zeit (Berlin)". Eine Person aus Irland öffnet nun das Formular und wählt den Termin 05. Mai 2024, 08:00 Uhr aus. Der Zugriff auf den Slot funktioniert wie erwartet, als Stunde und Minute erhält man 8 und 0. Das Date-Objekt aber verwendet nun die irländische Zeitzone, in der es eine Stunde eher ist. Die Stunde des Date-Objekts (appointment.getHour()) ist damit im Browser dieser Person 7 (und nicht 8, obwohl im Terminplan 8 Uhr ausgewählt ist).
Note: The function slotStartDate is available starting with version 8.2.1 of formcycle. In previous versions, you can use:
let appointment = new Date($.xutil.appointmentPicker.get.slot(".app1").timestamp);Change the displayed year and month via JavaScript
Available since 8.1.0.
You can change the currently displayed year and month via the JavaScript API. Use the function changeMonthYear to change to a particular year and month. For example, to change to May 2025:
$.xutil.appointmentPicker.do.changeMonthYear(".app1", { month: 5, year: 2025 })Disable dates via JavaScript
Available since 8.1.0.
The JavaScript API also lets you disable single dates or date ranges, so that users cannot select any slots at these dates anymore.
Disable the 22nd of August, 2024 and the 24th of August, 2024 via the function disableDates:
$.xutil.appointmentPicker.do.disableDates(".app1",
{year: 2024, month: 8, day: 22},
{year: 2024, month: 8, day: 24},
)Disable all dates between the 12th of August, 2024 and the 19th of August, 2024 via the function disableDateRanges:
$.xutil.appointmentPicker.do.disableDateRanges(".app1",
[{year: 2024, month: 8, day: 12}, {year: 2024, month: 8, day: 19}]
)Disable all dates equal to or before the 12th of August, 2024:
$.xutil.appointmentPicker.do.disableDateRanges(".app1",
[undefined, {year: 2024, month: 8, day: 12}]
)Similarly, you can also re-enabled manually disabled dates via the function $.xutil.appointmentPicker.do.enableDates and $.xutil.appointmentPicker.do.enableDateRanges.
To enable all manually disabled dates, use the function clearDisabledDates verwendet werden:
$.xutil.appointmentPicker.do.clearDisabledDates(".app1")Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article
