Calendar plugin

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 entry field is created with the control type Date, Time or Date and Time, a calendar for date selection can be created in the Final settings dialog.

This can also be done subsequently via the context menu of an existing edit field.

A symbol image for the date selection is then displayed on the workspace next to the edit field. Technically, it is a button with the action type "Calendar".

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.

If you enter an "x" or a point in an empty edit field with the control type Date, Time or Date and time and then leave it again, the current date will be entered automatically.

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.