Calendar

In applications, there are various types of calendars for recording and displaying appointments. In the Intrexx application templates, you'll also find the "Calendar" template and the "Resource" template. This allows you to create the appropriate applications, which are already preconfigured so that you can start using them right away.

You can learn how to create applications based on templates here.

You can find all the information about the Calendar app template here.

You can find all the information about the resource application template here.

You can find information about configuration in the "Applications" module here.

Calendar for date selection in conjunction with input fields

Create a calendar for selecting dates

If an input field is created with the control type "Date," "Time," or "Date & Time," a calendar for selecting a date can be generated in the Final Settings. This causes a calendar to appear in the browser when you click in the corresponding input field, allowing you to easily select the desired date. The selected date is automatically entered into the input field in the correct format.

The date selection calendar can also be created later for an existing input field using the input field's context menu or, if the input field is selected on the workspace, via the main menu under "Edit / Create Date Selection Calendar. " On mobile devices, a corresponding date picker is automatically generated and appears when the user taps the input field.

An icon for selecting the date will then appear on the desktop next to the input field. Technically speaking, this is a button with the "Calendar" action type.

"Calendar" Button Action

Click here to learn how to set an action type for a button.

With the "Calendar" action type, clicking a button in the browser displays a small calendar for selecting a date. The date is automatically entered into the input field selected here under "Insert Data." If the "Enable calendar picker" setting is not yet enabled in the options for the associated input field, the corresponding properties will be displayed here under the button's action type and can therefore be edited from this location. You can find more information about these settings here.

Calendar for Selecting Dates in the Browser

In the browser, clicking in the input field displays a calendar from which you can select a date. The current date is highlighted in color on the calendar. The selected date is automatically entered in the input field. Depending on the type of check you select, you can also choose the time at the bottom of the calendar. The calendar closes again when you leave the input field.

At the top of the calendar, you can select the month from a list. The list appears when you click on the month. The year can also be gradually increased or decreased. To do this, click the small arrow buttons that appear when you hover over the year. Use the arrow buttons in the upper right and left corners to scroll forward or backward month by month.

If you enter an "x" or a period in an empty input field with the control type "Date," "Time," or "Date & Time" and then exit the field, today's date is automatically entered.

Calendar Settings

The date selection settings for the small calendar can be edited on the "Options" tab of the properties dialog for the associated input field.

Enable the calendar picker

This setting is only available if the "Read-only" option is not selected on the "General" tab.

Open the calendar when you click in the input field

This setting is available when the element is linked to a data field with the "Date" data type. If the input field in the browser has focus, a small calendar appears. The selected date is entered into the input field. If the page has been optimized for mobile devices, a corresponding date picker will be displayed on the mobile device.

Always display the calendar (inline)

The calendar is always displayed and appears below the corresponding input control. The elements below it are moved down.

Enable shortcut buttons

Displays three buttons:

  • Today

  • Empty

  • OK

"Today" selects today's date, "Clear" deletes any entry from the date field, and "OK" closes the calendar used to select the date.

Allow keyboard input in the input field

You can enter the date in the input field using the keyboard.

Show Week Numbers

Available only for input validation for date or date and time.

Close the calendar when a selection is made

Once a date has been selected, the calendar closes. This setting is available only for input fields with the "Date" control type.

Step for Entering Hours

Specifies how many hours to scroll forward or backward using the arrows. Available only for input fields with the "Time" or "Date & Time" validation type.

Step for entering minutes

Specifies how many minutes to scroll forward or backward using the arrows. Available only for input fields with the "Time" or "Date & Time" control type.

Layout

If the current portal layout is open in the "Design" module, you can change the appearance of the small navigation calendar in the "Layout" section. Click on "Controls" there and search for "Date Picker" or "flatpickr." Here you'll find the styles that you can customize as you like for each element of the navigation calendar.

Calendar item

The calendar element is an application element and, like any other element, can be created and configured in any application. You can find more information here.

In the browser, the calendar element consists of a navigation calendar and a chart. The navigation calendar is structured slightly differently here than when used in conjunction with an input field. Clicking "Today" always automatically selects the current date, which is also highlighted in color here. Above the navigation calendar and the chart, you'll find several buttons in the calendar element that allow you to change the view of the calendar and chart. By dragging with the mouse while holding down the left mouse button, you can select any time period, such as a single day or several days. The chart is automatically updated based on the view and the date selection in the navigation calendar.

View by Day

At the top of the calendar, you can scroll through the months one by one. In the left column, you can select the entire calendar week with a single click, and it will be selected in both the navigation calendar and the chart. The days of the week are displayed in the top row of the navigation calendar.

The next 4 days

The next 4 days—including today's date—are selected in the navigation calendar and in the chart.

Week

This is where you select the current week in the navigation calendar and in the chart.

Workweek

The workdays of the current workweek are selected here in the navigation calendar. The chart has been filtered and displayed accordingly.

Month

Here, you can select a month or an entire quarter in the navigation calendar.

Schedule Overview

Instead of the chart, it displays a list of appointments showing all appointments for the selected time period.

Annual View / Monthly View

Using the context menu—which you can access by clicking the month or year at the top of the navigation calendar—you can switch the calendar to the annual or monthly view.

In the annual view, you can select entire months or, in the left column, entire quarters. Clicking "Today" selects the current month.

In the monthly view, you can select calendar weeks.

Resource

The resource element is suitable for bookings such as the reservation of meeting rooms or company vehicles. It can also be used to create work schedules. It consists of a navigation calendar and a chart. The navigation calendar has the same functions as the navigation calendar in the calendar element. Above the navigation calendar and the chart, you'll find several buttons that allow you to change the view of the calendar and chart. By dragging with the mouse while holding down the left mouse button, you can select any time period, such as a single day or several days. The chart is automatically updated based on the view and the date selection in the navigation calendar.

The resource element is an application element and can be created in any application, just like any other element. You can find more information here. This element is also included in the preconfigured "Resources" application template. You can find all the information here.

Plugins

In the "Applications" module, you can define plugins in the calendar or resource properties that display events from the same or other calendar or resource applications in the current calendar. You can find instructions on how to do this in this Tips & Tricks post.

Print Dates

Here are instructions for printing individual appointments.

If you open the Properties dialog for a calendar chart and switch to the "Actions" tab, you can view the current setting for the jump target—in this example, for the "Action on Click"—by clicking "Edit" . The default link is "Go to the plugin page." This page can be specified in the plugin.

You can access plugins that are configured in an application by double-clicking the application node in the application's Properties.

There, go to the "Plugins" tab, select "Calendar" on the left, and then select the plugin whose events you want to print. Click "Edit selected calendar plugin" under " ."

Go to the "Jump Target" tab. There you'll find the relevant promotions. In this example, clicking on an event in the calendar chart should load the "Calendar" page—a view that displays the event details. Click "OK" to close the open dialog boxes.

A "Print" button is now being configured on the "Calendar" landing page.

Create a new button by dragging it from the "Elements" pane onto the workspace. Select the "Calendar" page as your destination.

In the landing page options, select the "Open as print preview" option. Close the dialog box by clicking "OK" and save the application.

When you click the "Print" button, the desired page will now load in the browser.

Click "Print" here to print the page.

More Information

Configuring the Calendar and Resources

Additional Checks for Calendars