# Single Calendar

GridMate’s **Single Calendar** component helps users to manage and view schedules effortlessly in one place. It allows drag-and-drop, conditional coloring, and filtering based on criteria, making calendar management more efficient and visually appealing.

In this guide, we'll discuss setting up a calendar to visualize project tasks efficiently. Below is a brief demonstration on configuring the Single Calendar component for effective project management.

{% embed url="<https://youtu.be/QwEe0C6gKIY>" %}
GM -Single Calendar
{% endembed %}

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

```coffeescript
[
    {
        "color": "#FADADD",
        "exp": {
            "Status__c": {
                "operator": "=",
                "value": "Backlog"
            }
        }
    },
    {
        "color": "#D8BFD8",
        "exp": {
            "Status__c": {
                "operator": "=",
                "value": "In Progress"
            }
        }
    },
    {
        "color": "#B0E0E6",
        "exp": {
            "Status__c": {
                "operator": "=",
                "value": "in Review"
            }
        }
    },
    {
        "color": "#E0FFFF",
        "exp": {
            "Status__c": {
                "operator": "=",
                "value": "To Deploy"
            }
        }
    },
    {
        "color": "#FFFACD",
        "exp": {
            "Status__c": {
                "operator": "=",
                "value": "Done"
            }
        }
    }
]
```

{% hint style="info" %}
[Mass/Record action](https://docs.gridmate.io/advanced-guides/actions-library) can be configured based on requirement. We support quick action and calling a flow.
{% endhint %}

{% hint style="info" %}
You can add **Extra Activities** to the component using a JSON string format. This allows the component to render and display multiple activities.
{% endhint %}

<pre class="language-json"><code class="lang-json"><strong>[
</strong>    {
        "objectName": "Task",
        "filter": "{}",
        "titleFieldName": "Subject",
        "dateFieldName": "ActivityDate",
        "popoverFields": "CreatedDate,LastModifiedDate",
        "popoverColums": 2,
        "coloring": "[{\"color\":\"#8cedbb\",\"exp\":true}]",
        "actions": "[]",
        "defaultValues": "{\"StartDateTime\":\"$fromTime\"}",
        "icon": "standard:task",
        "label": "Tasks"
    }
]
</code></pre>

## Toggle Full Screen

Enabling this feature maximizes the calendar to full screen, providing a clearer and more focused view of scheduled events. By hiding surrounding UI elements, it reduces distractions and improves event navigation and planning.

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

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

Below is a quick demo on how to set up the toggle full-screen feature in our Single Calendar.

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


---

# 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/single-calendar.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.