Calendar Widget

The Calendar widget displays form responses as events in a calendar — in day, week, or month view. Use it when your form has date fields and you want users to see entries on a timeline instead of in a list.

When to use this

• Your form has a start and end date (or date/time) per response
• You want to show events, schedules, or deadlines visually
• Users need to switch between day, week, and month views
• You want different types of entries to be color-coded based on field values

How it works

The calendar fetches responses from a selected form and places each one as an event based on the date fields you map. Title and description control what shows in the event, and an optional user field ties the event to a person. You can also control the color per event with a fixed color or with color conditions evaluated against field values.

When a user clicks an event, a detail view opens. You decide which fields and field groups appear there under Field settings.

Add a calendar

1. Open the Design editor for your applet.
2. Add the Calendar widget to the page.
3. Open the widget settings.
4. Select the Form the calendar should use.
5. Map fields under Field mapping — at minimum, the Start date field is required.
6. Pick a Default view under Display settings.
7. Save your changes.

Widget settings

Form

Select the form events should be loaded from. The other settings — field mapping, field settings, and filters — are based on the form you choose here.

WARNING

If you change the form, the field mapping is reset. You need to re-map title, date, and user fields against the new form.

Field mapping

The field mapping connects fields in your form to the roles an event has in the calendar. Only fields of a compatible type appear in each picker.

Mapping	What it controls	Allowed field types
Title field	Text shown inside the event	Text, Single choice, Identification field
Description field	Subtitle / secondary text in the event and detail view	Text, Multi-line text, Email, URL, Numeric, Identification field
Start date field	When the event begins	Date, Date/time
End date field	When the event ends	Date, Date/time
User field	Which user the event belongs to	Created by, Modified by, User

TIP

Use Date/time instead of Date for start and end fields if you want events to appear at the right time of day in the day and week views.

Field settings

Open the Field settings accordion to control how the form's fields appear in the event detail view. The list mirrors the form's field groups.

For each field group you can:

• Toggle whether the group appears in the detail view (Show in view mode).

For each field you can:

• Toggle whether the field appears in the detail view (Show in view mode).
• For single choice and multiple choice — pick a Display mode: Default (inline) or Dialog box (opens in a dialog).
• For URL and Page link — choose whether the link opens in a new window (Open in new window).

Display settings

Default view

The view the calendar opens in. Users can still switch view from the calendar header.

View	Description
Day	One day at a time with a time axis — good for schedules with many events per day.
Week	Seven days as an agenda — compact overview of the week's events.
Month	The whole month in a grid — good for overview and planning.

Color theme

Sets the base color for events that don't match any color condition.

Option	Description
Primary color	Uses the applet's primary color.
Secondary color	Uses the applet's secondary color.
Own color	Shows a color picker so you can pick an exact color.

Filtering

Field filter

Open Field filter and select Add condition to limit which responses appear in the calendar. Add conditions by selecting a field and an operator. Available operators depend on the field type. All conditions must match for a response to appear in the calendar.

Color conditions

Color conditions set the color of an event based on values in the form. Open Color conditions and add rules — each rule maps a field value to a color. The first rule that matches a response decides the event's color. Responses that don't match any rule use the Color theme.

TIP

Use color conditions to distinguish, for example, Status: Done (green) from Status: Issue (red) in the same calendar.

Example

Scenario: You want to show an inspection schedule where each row in the Inspection form is an event, color-coded by status.

1. Add a Calendar widget to the page.
2. Select the Inspection form as the data source.
3. Map Title field to Location, Start date field to Start time (Date/time), End date field to End time (Date/time).
4. Map User field to Inspector so the event is tied to the right person.
5. Set Default view to Week.
6. Under Color conditions, add rules for the Status field: Done → green, In progress → orange, Issue → red.

The calendar now shows the week's inspections with the right color per status.

Tips

TIP

Map both Start date field and End date field. If you only map the start field, events appear as a single point with no duration — fine for deadlines, but it makes the day and week views hard to read for longer events.

TIP

Combine Field filter and Color conditions — the filter controls which responses appear, the color conditions control how they appear. You can filter some categories out completely, or leave them in greyed out.

Common mistakes

WARNING

If the calendar is empty, check that Start date field is mapped and that the field actually has a value in the form responses. Responses without a start date are not shown.

WARNING

You can't map the same date field as both Start date field and End date field — the field already chosen as start is filtered out of the end picker, and vice versa.

WARNING

If you switch a date field from Date/time to Date, events lose their time and appear as all-day events in every view.