> 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="" %} 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" } } } ] ``` A rule can also take its colour from the record: set `color` to `$record.`. The field is fetched automatically and its value must be a valid CSS colour. Rules are evaluated top-down, first match wins. ```json [ { "color": "#FFFACD", "exp": { "Status__c": { "operator": "=", "value": "Done" } } }, { "color": "$record.Color__c", "exp": true } ] ``` {% 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 %} 
[
    {
        "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"
    }
]
## 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.
Below is a quick demo on how to set up the toggle full-screen feature in our Single Calendar. {% embed url="" %} ## Business Hours Limit the daily and weekly views to working hours with two component properties: | Property | Default | Description | | -------------- | ------- | ------------------------ | | Day Start Hour | 0 | First hour shown (0–23). | | Day End Hour | 24 | Last hour shown (1–24). | Set **Day Start Hour** to `8` and **Day End Hour** to `18` to show 8:00 AM–6:00 PM. Leave the defaults for a full day; an out-of-range value falls back to the full day. The monthly view is not affected. ## Create Activity with a Flow By default, a double-click on the calendar opens the standard **New** record form. You can open your own **Flow** instead: ask only for the fields you need, set default values, and link the new activity to the current record. To launch a flow on create, check **Enable Create Activity** and add an action named **gmpkg\_\_createActivity** to the **Activity Actions** property. Below is the action configured for the demo. ```json [ { "label": "New Event", "name": "gmpkg__createActivity", "modalSize": "medium", "component": "gmpkg/dataGridCallFlowLWC", "attributes": { "flowName": "GM_Calendar_Create_Event" } } ] ``` The calendar passes the following input variables to the flow. Declare all of them as **Text** variables, **Available for input**, even the ones your flow doesn't use. | Variable | Description | | ------------ | ------------------------------------------------------ | | fromDate | Date of the clicked cell (YYYY-MM-DD). | | fromTime | Date and time of the clicked cell, in GMT (ISO 8601). | | objectName | API name of the activity object. | | recordTypeId | Record type picked by the user. Empty if none. | | recordId | Id of the current record. Empty on App and Home pages. | {% hint style="info" %} To default a **Date/Time** screen field to the clicked slot, use a formula resource like the one below. Map **recordId** to **Related To ID** in **Create Records** to link the activity to the current record. {% endhint %} ```coffeescript IF(ISBLANK({!fromTime}), NOW(), DATETIMEVALUE(SUBSTITUTE(LEFT({!fromTime}, 19), "T", " "))) ``` {% hint style="info" %} Add `"autolaunched": true` to the action **attributes** to run an autolaunched flow, without a screen. With **Extra Activities**, add the **gmpkg\_\_createActivity** action to the **actions** of the matching entry: the user picks the activity type first, then the flow opens. {% endhint %} {% hint style="warning" %} On **App** and **Home** pages, GridMate **12.41** or later is required to launch the flow. {% endhint %} Below is a quick demo on how to create an activity with a flow in our Single Calendar. {% embed url="" %} Single Calendar - Create Activity with a Flow {% endembed %}