> 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/compact-calendar.md).

# Compact Calendar

GridMate provides a lightning component **GM - Compact calendar**  to display the **Event**, **Task**, or any **Objects** on the calendar as activities.

In this tutorial, we will configure the **GM - Compact calendar** component to display **Task** and **Events** object on the Calendar.

* Select an **Opportunity** and edit the page in the Lightning App Builder.
* From components list, drag and drop the component **GM - Compact calendar**.
* The **GM - Calendar component** is now ready for configuration in the Lightning App Builder.
* The property values can be configured to tailor the component to the needs of the end-user.
* To perform a quick configuration, populate the properties below: 
  * Title : **Opportunity Calendar.**
  * Custom Icon : **standard:task.**
  * Json config : See [Json config](#below-is-the-json-config-configured-for-the-demo).

#### Below is the JSON Config configured for the demo

{% code fullWidth="false" %}

```coffeescript
[
    {
        "objectApiName": "Task",
        "dateField": "ActivityDate",       
        "iconName": "standard:task",
        "backgroundColor": "",
        "filter": "{\"WhatId\": {\"operator\" : \"=\", \"value\" : \"$recordId\"}}",
        "titleField": "Subject",
        "detailFields": [
            "Description"
        ]
    },
    {
        "objectApiName": "Event",
        "dateField": "ActivityDate",
        "fromDateField": "StartDateTime",
        "toDateField": "EndDateTime",
        "iconName": "standard:event",
        "backgroundColor": "#94baf7",
        "filter": "{\"WhatId\": {\"operator\" : \"=\", \"value\" : \"$recordId\"}}",
        "titleField": "Subject",
        "detailFields": [
            "Description"
        ]
    }
]
```

{% endcode %}

Below is a step by step tutorial to configure the **GM - Compact Calendar** 👇.

{% embed url="<https://youtu.be/ze0-eqS5GBI>" %}
GridMate - Compact Calendar
{% endembed %}