Multi Calendar

GridMate provides a component to calendar any object. It displays horizontal time-axis and resources to assign as rows. Activities can be created, edited or deleted. It supports also drag & drop like any calendar app.

In this tutorial, we will setup a Multi Calendar to visualize building inspections assigned to a list of technicians (contacts).

General Configuration

Let's configure the general settings of our calendar.

Multi Calendar - General Configuration

Set the height to 9999 to have a responsive height.

If Skip Night Hours is checked, the user will be redirected to the next/previous day when clicking on Next/Previous button.

Set the style to define the width of the assignee column and the activity cell as below:

cell-min-width:${cell_width};col-header-width:${header_width};

Example

cell-min-width:10rem;col-header-width:10rem;

The cell width is interesting when the calendar is displayed in a small area especially with the monthly view.

Assignee Configuration

Let's configure the assignee settings. Note that the assignee could be any object (Standard or custom). It will be Contact in our case.

Multi Calendar - Assignee Configuration

By default the list of assignee will be fetched using the list view configured on Assignee ListView property. If you want to switch between a specific set of teams, you can set a subset of listViews in the Assignee Listview(s) property like: All_Technicians,Plumbing

The property should be populated using ',' separated list of API ListView names. If the property is empty, the user will see all available list views.

The popover fields is ',' separated list of field API name. Those fields are used to display the popover when the user hover an assignee. If the property is empty, the compact layout will be used instead.

Activity Configuration

Let's configure the activity settings. Note that the activity object could be any object (Standard or custom). It will be Inspection__c in our case.

General Configuration - Activity Configuration

The Activity From and To Date fields must be DateTime.

JSON string can be used to initialize brand new records. We support defaulting the activity dates and the assignee based on the selected cell. Below is an example to default our event.

{
   "WhoId": "$userId",
   "StartDateTime": "$fromTime",
   "ActivityDate": "$fromDate"
}

Multi Calendar supports cell coloring by providing the coloring configuration same as smart grids. Below is an example of coloring.

[
    {
        "color": "#f4fe7abf",
        "exp": {
            "Status__c": {
                "operator": "=",
                "value": "Planned"
            }
        }
    },
    {
        "color": "#CFEBFE",
        "exp": {
            "Status__c": {
                "operator": "=",
                "value": "In Progress"
            }
        }
    },
    {
        "color": "#8cedbb",
        "exp": {
            "Status__c": {
                "operator": "=",
                "value": "Completed"
            }
        }
    }
]

Activities are filtered based on the list of displayed assignee. The calendar supports also extra filtering by providing a list view or a JSON filter.

Mass/Record action can be configured based on requirement. We support quick actions or call a flow actions.

Below is a quick demo of the final version of our Multi Calendar.

General Configuration - demo

Toggle Full Screen

This feature allows users to expand the calendar view to fill the entire screen. This enhances visibility and focus on scheduled events by removing surrounding interface elements and minimizing distractions.

Enabling the Toggle Full Screen feature allows you to switch your Calendar to fullscreen mode for a more focused view.

Below is a quick demo on how to set up the toggle for fullscreen on our Multi-Calendar.

Quarterly View

The newly introduced Quarterly View in GridMate's Multi-Calendar provides a three-month timeline to enhance visibility across calendars.

Here is a quick demo on using the Quarterly View in our Multi-Calendar.

2 Weeks View

The 2 Weeks View displays a rolling 14-day period starting on the configured Week Start Day. Previous and Next move the calendar a full two-week period, which makes it a natural fit for bi-weekly planning such as pay periods.

Enable it by checking Enable 2 Weeks View in the Lightning App Builder: 2 Weeks is then added to the view switcher between Weekly and Monthly. Set Default View to biweekly to open the calendar on this view.

Aggregation

Aggregation simplifies complex datasets by applying functions like sum, average, count, and group-by to consolidate raw data into meaningful summaries.

Below is an example of how aggregation is used.

{
    "Time_Spent__c": "sum"
}

Below is a quick demo on how to set up the Aggregation in our Multi Calendar.

GridMate provides a component to calendar any object. It displays horizontal time-axis and resources to assign as rows. Activities can be created, edited or deleted. It supports also drag & drop like any calendar app.

In this tutorial, we will setup a Multi Calendar to visualize building inspections assigned to a list of technicians (contacts).

General Configuration

Let's configure the general settings of our calendar.

Multi Calendar - General Configuration

Set the height to 9999 to have a responsive height.

If Skip Night Hours is checked, the user will be redirected to the next/previous day when clicking on Next/Previous button.

Set the style to define the width of the assignee column and the activity cell as below:

cell-min-width:${cell_width};col-header-width:${header_width};

Example

cell-min-width:10rem;col-header-width:10rem;

The cell width is interesting when the calendar is displayed in a small area especially with the monthly view.

Assignee Configuration

Let's configure the assignee settings. Note that the assignee could be any object (Standard or custom). It will be Contact in our case.

Multi Calendar - Assignee Configuration

By default the list of assignee will be fetched using the list view configured on Assignee ListView property. If you want to switch between a specific set of teams, you can set a subset of listViews in the Assignee Listview(s) property like: All_Technicians,Plumbing

The property should be populated using ',' separated list of API ListView names. If the property is empty, the user will see all available list views.

The popover fields is ',' separated list of field API name. Those fields are used to display the popover when the user hover an assignee. If the property is empty, the compact layout will be used instead.

Activity Configuration

Let's configure the activity settings. Note that the activity object could be any object (Standard or custom). It will be Inspection__c in our case.

General Configuration - Activity Configuration

The Activity From and To Date fields must be DateTime.

JSON string can be used to initialize brand new records. We support defaulting the activity dates and the assignee based on the selected cell. Below is an example to default our event.

{
   "WhoId": "$userId",
   "StartDateTime": "$fromTime",
   "ActivityDate": "$fromDate"
}

Multi Calendar supports cell coloring by providing the coloring configuration same as smart grids. Below is an example of coloring.

[
    {
        "color": "#f4fe7abf",
        "exp": {
            "Status__c": {
                "operator": "=",
                "value": "Planned"
            }
        }
    },
    {
        "color": "#CFEBFE",
        "exp": {
            "Status__c": {
                "operator": "=",
                "value": "In Progress"
            }
        }
    },
    {
        "color": "#8cedbb",
        "exp": {
            "Status__c": {
                "operator": "=",
                "value": "Completed"
            }
        }
    }
]

A rule can also take its colour from the record: set color to $record.<FieldApiName>. The field is fetched automatically and its value must be a valid CSS colour. Rules are evaluated top-down, first match wins.

[
    {
        "color": "#8cedbb",
        "exp": {
            "Status__c": {
                "operator": "=",
                "value": "Completed"
            }
        }
    },
    {
        "color": "$record.Color__c",
        "exp": true
    }
]

Activities are filtered based on the list of displayed assignee. The calendar supports also extra filtering by providing a list view or a JSON filter.

Mass/Record action can be configured based on requirement. We support quick actions or call a flow actions.

Below is a quick demo of the final version of our Multi Calendar.

General Configuration - demo

Toggle Full Screen

This feature allows users to expand the calendar view to fill the entire screen. This enhances visibility and focus on scheduled events by removing surrounding interface elements and minimizing distractions.

Enabling the Toggle Full Screen feature allows you to switch your Calendar to fullscreen mode for a more focused view.

Below is a quick demo on how to set up the toggle for fullscreen on our Multi-Calendar.

Quarterly View

The newly introduced Quarterly View in GridMate's Multi-Calendar provides a three-month timeline to enhance visibility across calendars.

Here is a quick demo on using the Quarterly View in our Multi-Calendar.

2 Weeks View

The 2 Weeks View displays a rolling 14-day period starting on the configured Week Start Day. Previous and Next move the calendar a full two-week period, which makes it a natural fit for bi-weekly planning such as pay periods.

Enable it by checking Enable 2 Weeks View in the Lightning App Builder: 2 Weeks is then added to the view switcher between Weekly and Monthly. Set Default View to biweekly to open the calendar on this view.

Aggregation

Aggregation simplifies complex datasets by applying functions like sum, average, count, and group-by to consolidate raw data into meaningful summaries.

Below is an example of how aggregation is used.

{
    "Time_Spent__c": "sum"
}

Below is a quick demo on how to set up the Aggregation in our Multi Calendar.