In applications there are different types of calendars for displaying and defining appointments.
Date picker calendar in connection with edit fields
Create a date picker calendar
If an input field with the control type "Date", "Time”, or "Date & Time" is created, a calendar for date selection can be generated in Final Settings. This means that when you click in the input field, a calendar is displayed in the browser, in which the date you want can be conveniently selected. The selected date is then automatically transferred to the input field in the correct format.
When editing the application in the "Applications" module, the calendar for date selection can also be created subsequently at the input field already created via the context menu of the input field or, if the input field is selected in the workspace, via the main menu item "Edit / Create calendar for date selection". On mobile devices, a corresponding date picker, which is shown when the user touches the edit field, will be generated automatically.
The workspace will then display a date selection icon next to the input field. From a technical perspective, this is a button with the action type "Calendar".
"Calendar" action button
You can learn how to set an action type for a button here.
With the "Calendar" action type, a button can show a small calendar for date selection when clicked in the browser. The date is automatically entered in the input field selected here for "Insert data". If the setting “Activate calendar picker” is not yet activated in the options of the connected edit field, the corresponding properties are shown here with the action type of the button and can therefore also be edited from here. More information about these settings can be found here.
Date picker calendar in the browser
In the browser, clicking in the edit field now displays a calendar from which a date can be selected. The current date is highlighted in the calendar. The selected date is automatically entered in the edit field. Depending on the selected control type, the time can also be selected at the bottom of the calendar. The calendar will be closed again when you leave the edit field.
At the top of the calendar, the month can be selected from a list. The list appears when you click on the month. The year can also be increased or decreased one at a time. To do this, click on the small arrow buttons that appear when the mouse hovers over the year. The arrow buttons at the top right and left can be used to scroll forward or backward by month.
Calendar settings
The settings of the small calendar for date selection can be edited in the properties dialog of the connected edit field on the "Options" tab.
Activate calendar picker
This setting is only available if the "Write-protected" setting has not been activated on the "General" tab.
Open calendar when the edit field is selected
This setting is available if the element is linked to a "Date" data field. If the edit field is in focus in the browser, then a small calendar will be shown. The date selected here is then transferred to the edit field. If the page has been transformed for mobile devices, a corresponding date picker will be shown on the end device.
Calendar is always open (inline)
The calendar is always shown beneath the corresponding edit control. The elements beneath the edit control will be moved down as a result.
Activate shortcut buttons
Shows three buttons:
Today
Clear
OK
"Today" selects today's date, "Clear" deletes any entry from the date field, "OK" closes the calendar for date selection.
Allow keyboard input in the edit field
The date can also be entered via the keyboard with this option.
Show week numbers
Only available for edit controls for date or date & time data types.
Close calendar on selection
When the user selects a date, the calendar will close. This setting is only available for edit fields with the "Date" control type.
Increment for the hour input
Defines how many hours the arrows should add to the current time when clicked on. Only available for edit controls for time or date & time data types.
Increment for the minute input
Defines how many minutes the arrows should add to the current time when clicked on. Only available for edit controls for time or date & time data types.
Layout
When the current layout of the portal is open in the "Design" module, the appearance of the small navigation calendar can be changed in the Layout area. There, click on "Controls" and search for "date picker" or "flatpickr". Here you can find the styles that you can change as you wish for the individual elements of the navigation calendar.
Calendar element
The calendar element consists of a navigation calendar and a diagram. The navigation calendar is structured somewhat differently here than in connection with an edit field. Clicking on "Today" always automatically selects the current date, which is also highlighted here. Above the navigation calendar and diagram in the calendar element, you will find several buttons that can be used to change the view of the calendar and diagram. By dragging the mouse while holding down the left mouse button, any period of time can be marked, such as a single day or several days. The chart is always automatically updated according to the view and appointment selection in the navigation calendar.
A plugin must be defined and assigned to the calendar element so that appointments can be recorded and managed.
Day view
At the top of the calendar you can scroll from month to month. In the left column, the whole calendar week is selectable with one click and is selected in the navigation calendar and in the diagram. The days of the week are displayed in the top line of the navigation calendar.
Next 4 days
The next 4 days - including the current date - are selected in the navigation calendar and in the chart.
Week
The current week is selected here in the navigation calendar and in the chart.
Working week
The days of the current working week are automatically selected in the navigation calendar. The diagram is filtered and presented accordingly.
Month
A month or a whole quarter can be selected here in the navigation calendar.
Appointment overview
Instead of the diagram, outputs an appointment list showing all appointments of the selected period.
Year view / Month view
You can switch between the month and year view via the context menu of the navigation calendar header.
You can select entire months or quarters in the year view. Click on "Today" to select the current month.
Calendar weeks can be selected in the month view.
Chart - Functions
Appointment details
If you move the mouse over the title of an appointment in the diagram, the appointment details will be shown.
Appointment origin
The color of the plugin, which is the appointment's source is shown to the left of the appointment.
Extend appointment
When you move the mouse over an appointment, bars will appear to the right and left of the appointment. You can extend the appointment on the time line accordingly via drag & drop.
Move appointment
An appointment can be moved by drag & drop in the diagram.
Edit appointment
Click on an appointment to open the edit page where the appointment can be edited.
Export appointment
When hovering the mouse over an appointment, an arrow icon will appear in the lower right corner, which can be used to start the export of the appointment. This can used to export the appointment as a *.ics file which can opened or imported in Outlook.
Categories
The categories are displayed under the navigation calendar.
Plugins
In the Applications module, plugins can be defined in the Calendar or Resource element properties; these display appointments from the same or other calendar/resource applications in the current calendar. How that is done is described in this Tips & Tricks article.
Integrated plugins are shown on the left-hand side underneath the categories. If you uncheck the checkbox to the left of a calendar plugin, the corresponding dates will be hidden in the chart.
Add appointment
New appointments can be created by clicking on the cell with the required date in the diagram. You can also mark the entire appointment in the diagram with the mouse. You can also create longer appointments by holding down the left mouse button and highlighting the corresponding length. The appointment length is shown in a different color and the edit page is shown automatically. The beginning and end of the appointment is entered automatically based on your selection.
Heading
Enter the title of the appointment here.
From / to
Enter the start and end date of the appointment here.
Description
You can provide the appointment with an optional description here.
Category
Select the required category.
Add category
Opens a page where a category can be created.
Appointment series
Click here for more information.
Image
An image can be selected which should be shown for the appointment. The image is automatically reduced to the right size in the diagram.
Appointment series
When you create or edit an appointment, you will see the "Appointment series" link towards the bottom of the edit page. Click on this link to open a dialog where you can create a recurring appointment based on the current appointment.
Start / End
The start and end are taken from the appointment, provided they have been entered on the Edit appointment page.
Series template
Here, specify whether the appointment recurs on a daily, weekly, monthly or yearly basis.
All ... Day(s)
If you select the "Daily" option, you can also define how often the appointment should recur in days.
Series duration
Defines when the series should end. Here, you can either decide how many times the appointment should recur or specify an end date.
Delete series
This button can be found on existing appointment series. This changes the series back into a single appointment.
Resource
The resource element is suitable for bookings such as the reservation of meeting rooms or company vehicles. Schedules can also be created with it. It consists of a navigation calendar and a diagram. The navigation calendar has the same functions as the navigation calendar of the calendar element. Above the navigation calendar and diagram in the calendar element, you will find several buttons that can be used to change the view of the calendar and diagram. By dragging the mouse while holding down the left mouse button, any period of time can be marked, such as a single day or several days. The chart is always automatically updated according to the view and appointment selection in the navigation calendar.
A plugin must be defined and assigned to the resource element so that appointments can be recorded and managed.
Book
The edit page for booking resources can be opened by clicking on the desired date in the resource diagram.
Resource
You can select a different resource for the reservation here. Every resource is listed here that has been created in the administration.
New resource
Opens a page where a resource can be created.
When you click on the field "Color", a color palette will be shown where you can select the color. You can also upload an image to label the resource. The resource is created when you click on "Save".
Category
The booking can be assigned to a category here.
New category
Opens a page where a category can be created.
Here you can set a title, font and background color for the category. The category is created when you click on "OK".
Heading
Enter the title of the booking here.
From / to
Define the beginning and end date/time of the reservation here.
Description
Enter a description for the booking here.
Appointment series
The reservation can be created as a reoccurring reservation by clicking on the Appointment series link.
Image
An image can be selected here that is shown in the resource calendar for this appointment.
Click "OK" to complete the booking. The system automatically checks whether the resource is already booked in this period. If this is the case, a message is displayed.
The reservation is now shown in the diagram. The color of the assigned category is used as the background color. On the left-hand side of the entry, a bar will be shown with the background color of the resource. You will find the defined categories and resources below the navigation calendar. In the diagram, each resource is displayed in the left column. Click in the corresponding cell with the desired date to the right of it to create bookings. Click here for more information about these settings and functions.
Resources can be shown and hidden by clicking on 
"Select resource" in the diagram. Remove the resources you no longer want to be displayed in the diagram by unchecking the box to the right of the resource.
Previous / Next
These two action buttons are used in combination with the elements “Calendar” and “Resource”. With these, the user can navigate forwards and backwards through the calendar or resource element, respectively.
Options
Calendar plugin
Select the calendar or the resource element here that is to be controlled with the action "Before" or "Back”.
Email us