# 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.

{% embed url="<https://youtu.be/30H2ETk9HVM>" %}
Multi Calendar - General Configuration&#x20;
{% endembed %}

{% hint style="success" %}
Set the height to 9999 to have a responsive height.
{% endhint %}

{% hint style="info" %}
If **Skip Night Hours** is checked, the user will be redirected to the next/previous day when clicking on Next/Previous button.
{% endhint %}

{% hint style="info" %}
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.&#x20;
{% endhint %}

## 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.

{% embed url="<https://youtu.be/51OeBzmh7ao>" %}
Multi Calendar - Assignee Configuration
{% endembed %}

{% hint style="info" %}
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.
{% endhint %}

{% hint style="info" %}
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.
{% endhint %}

## 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.

{% embed url="<https://youtu.be/7cYuUf3wovY>" %}
General Configuration - Activity Configuration
{% endembed %}

{% hint style="warning" %}
The **Activity From** and **To Date** fields must be DateTime.
{% endhint %}

{% hint style="info" %}
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.&#x20;
{% endhint %}

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

{% hint style="info" %}
Multi Calendar supports cell coloring by providing the coloring configuration same as smart grids. Below is an example of coloring.
{% endhint %}

```coffeescript
[
    {
        "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"
            }
        }
    }
]
```

{% hint style="success" %}
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.
{% endhint %}

{% hint style="info" %}
[Mass/Record action](/advanced-guides/actions-library.md) can be configured based on requirement. We support quick actions or call a flow actions.
{% endhint %}

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

{% embed url="<https://youtu.be/HK7JYM1Bs_g>" %}
General Configuration - demo
{% endembed %}

## 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.

<figure><img src="/files/WdtNYx1iJ11JcOHN7l6r" alt=""><figcaption></figcaption></figure>

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

{% embed url="<https://youtu.be/NKI1MKvYrBo>" %}

## 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.

{% embed url="<https://youtu.be/ztGAVxC4-A0>" %}

## 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.

```coffeescript
{
    "Time_Spent__c": "sum"
}
```

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

{% embed url="<https://youtu.be/EuoQirCKgEM>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gridmate.io/product-tour/multi-calendar-in-action.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.