The icon for elements of type Selection.
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. |
Reading the value via JavaScript
The value of an appointment finder element named app1 can be read as a timestamp in JavaScript using the following jQuery statement:
$('[xn=app1] .XAppointmentSlotId').val();To get a Date object from the obtained timestamp, the value must be parsed accordingly. For example, to store the value as Date in a variable named appointment, the following code can be used:
var appointment = new Date( parseInt($('[xn=app1] .XAppointmentSlotId').val(),10) );Pre-assignment to a specific month via JavaScript
The standard month can be displayed in the appointment finder using the JavaScript API. The month and year can be specified using the setMonthYear function. For example, the month of May in the year 2025:
$('[data-name="app1"]').appointmentPicker("setMonthYear", { month: 5, year: 2025 });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
