> For the complete documentation index, see [llms.txt](https://docs.gridmate.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridmate.io/product-tour/single-calendar.md).

# 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>" %}