Overview

The Calendar widget for Bizagi is available for download from Bizagi Widget Xchange.

This widget allows you to display a calendar that shows events registered within your processes.

Calendar01

You can add new events, edit the calendar to delete existing events, and even download it in iCalendar (.ics) format.

Before You Start

To test and use this widget, ensure you have:

1.Bizagi Studio installed on your system.

2.This widget installed, either by following the steps in the Bizagi Widget Xchange article or the Widget Management article.

Data Model Considerations

To use this widget, your data model must include a Collection-type attribute that stores multiple records containing event details.

This collection should have the following attributes:

•Two date-type attributes: one for the start date and one for the end date.

oIf no end date is provided, the event is assumed to last one day.

oIdeally, dates should include time information (using a date-time setting in Bizagi).

•One string-type attribute: to store the event name.

The example below illustrates a Task Scheduled collection, using the attributes Task, Start date, and End Due Date.

Calendar_datamodel

Properties Configuration

To configure this widget after installation, add it to any Form and set its properties in the Forms Designer, just as you would with any other Bizagi control.

note_pin

This widget relies on the data displayed in the collection associated to its mapping configuration. Therefore, you MUST include this collection in the task’s Form and ensure it is set to visible.

Calendar_forms

note_pin

For the widget to function correctly and be as user-friendly as possible, you must include the native table control that uses the same collection as the widget within the same Form.

This collection must be set as the first control within the Form.

Consider the following properties:

PROPERTY / SUB-PROPERTY	POSSIBLE VALUES	DEFAULT VALUE / SUGGESTED
Data binding	A collection type attribute which holds the multiple records displayed as events.	Not applicable. This property is mandatory.
Event (sub-property of data binding)	The name identifying a recorded event.	Not applicable. This property is mandatory.
Start date (sub-property of data binding)	The date on which the event starts.	Not applicable. This property is mandatory.
End date (sub-property of data binding)	The date on which the event ends.	Not applicable. This property is mandatory.
Size	A setting that defines the overall size (height and width) of the calendar. Available options: •Small – width: 70% •Medium – width: 85% •Large – width: 100% •Fit – width: 100% This property applies only to desktop view. On mobile devices, the widget is always displayed at 100% width.	Large
Allow calendar download	A Boolean that indicates whether a download button is enabled, allowing users to export events in iCalendar format.	True
Calendar file name	The name given to the downloaded .ics file (iCalendar).	Calendar
Label for calendar file button	A name that visually identifies the button that allows the calendar to be downloaded.	Download calendar

note_pin

•All Bizagi controls and widgets include a Visible property, which lets you define whether the control should appear in a given Form (for example, by applying a Business rule).

•This widget is designed to be read-only.

For more details on this widget’s capabilities—such as customization and extension—refer to the documentation for the implemented jQuery plugin at https://fullcalendar.io/.

Watch it in Action

The Contract Management process available in Bizagi Process Xchange already includes the calendar widget.

Calendar Views

The Calendar has different views that you can use:

•Monthly view

Calendar11

•Weekly view

Calendar12

•Daily view

Calendar13

•List view

Calendar14

Calendar Features

When the widget loads in the Work Portal, you can see the following options:

Calendar08

1.Calendar navigation options: Use the arrows to move between dates. The Today button takes you to the current day.

2.Events visualization options: These buttons let you choose how events are displayed: Month, Week, Day, or List (chronological order)."

3."Download calendar" button: Click this button to download your calendar.

4.Calendar: If you are in Month or Week view and click a specific date (the number), you will be redirected to the Day view.

The Calendar widget allows you to perform the following actions:

Add Event

From the Monthly view, you can add an event to a single date or multiple dates. When you add an event from this view, it is scheduled for the entire day. To add it to multiple dates, click and drag across the desired days using your mouse.

Calendar04

In the Weekly and Daily views, you can schedule events at specific times. Events can be added in 15-minute intervals, such as 15, 30, 45, or 60 minutes.

Calendar09