Calendar

What is it?

The Calendar widget allows you to view the data from a form in the form of an event calendar. You can configure the Initial Date of the calendar according to your preference. Each distinct submission of the form will be displayed as an event on the calendar. You also have the option to filter the form records to display only specific forms on the calendar. The Event Header and Event Color can be assigned to individual widgets within the form.

How and When to use it? 

To add a new Calendar to your page, simply drag and drop the “Calendar” widget from the left hand side of the page screen to the design area of your page.

To change the name of the calendar, tap on the placed calendar widget to reveal the blue Quick Settings panel. By default, the name is displayed on the widget’s left side.

How to configure it?

The Widget Property Settings is shown, which contains two tabs, General and Visibility. We will demonstrate how each tab and property is used. 

Introduction of General Tab Properties

Basic

Name 

Users can change the name of the Google Drive with the Name property.

For example, we create a Calendar, look through the Name  property under Basic in the Widget Property Settings. 

Description

It provides a space for app designer’s remark purpose. 

It is an internal use for App designers and it does not affect the display in design time and the run time.

Configurations

Record Open In

The field Record Open In lets the user choose how the related Form Record will open after the user clicks on the event in the Calendar.

Position, Size and Layout

The options for Sizing Mode are Absolute Size and Relative Size. In Position, various parameters of the widget can be adjusted. These parameters change depending on what is selected in Sizing Mode. In Absolute Size, the dimensions of the widget are the same in the Page Builder and Production. 

In Relative Size, the right and bottom sides of the widget expand to completely fill the screen/window in Production. 

The options of “Display in” are “Web & Mobile” (the default setting) and “Mobile Only”. It controls whether this label would be displayed on both platforms. 

Introduction of Calendar Configurations

Data Source Settings

You can select the desired Form from a dropdown menu under Data Source Settings, which will serve as the Data Source for the Calendar. Afterwards, you have the option to add conditions or groups of conditions in the grey section.

Calendar Configurations

1. After choosing a data source, click the Label and then click  the calendar configurations button to open Calendar Configurations. 

2. The Calendar Configurations is shown, which contains five properties. We will demonstrate how each property is used. 

Event Start Time, Event End Time and Initial Date

The Event Start Time, Event End Time, and Initial Date can be selected from dropdown menus offering preset options such as "Last Start Time," "Earliest Start Time," "Creation Time," and "Last Edit Time." If applicable, the Date & Time widget input option will also be included among these choices.

Event Header and Event Color

The Event Header and Event Color options can be assigned to widgets, which can be either strings or numbers. These two options can be assigned to three system objects: Form Owner, Workflow State, and Email status. Additionally, Event Color can also be assigned to "Same Color," which ensures that all events are displayed in the same color.

When you assign a widget or system object in the Event Color, each unique record in the Event Color widget will have its own distinctive color. This means that each Event will display the color associated with the specific record it carries. 

To view a legend of the Event Colors, simply click the blue tag icon located at the top right of this widget in the Preview/Production mode. A popup window will appear, providing you with a clear reference to the different colors used.