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"
            }
        }
    }
]

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.