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.

GM -Single Calendar

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

[
    {
        "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.<FieldApiName>. The field is fetched automatically and its value must be a valid CSS colour. Rules are evaluated top-down, first match wins.

[
    {
        "color": "#FFFACD",
        "exp": {
            "Status__c": {
                "operator": "=",
                "value": "Done"
            }
        }
    },
    {
        "color": "$record.Color__c",
        "exp": true
    }
]

Mass/Record action can be configured based on requirement. We support quick action and calling a flow.

You can add Extra Activities to the component using a JSON string format. This allows the component to render and display multiple activities.

[
    {
        "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.

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.