# GM - Multi Calendar

## **Documentation**

**GM - Multi Calendar** component is used to display a calendar view to easily handle task/event assignment for multiple resources. The component display horizontal time-axis and resources to assign as rows. Activities will be created, edited or deleted from the calendar cells. The component supports activities drag & drop like any calendar app.

With this component, we can display multiple objects on the same view to have 360 view of team's activity. 

**Use case:** Display a calendar view for a specific team to manage event and tasks for a specific project.

## **Specification**

<table data-full-width="true"><thead><tr><th width="211.33333333333331">Property</th><th width="144">Type</th><th>Description</th></tr></thead><tbody><tr><td>Custom Label</td><td>String</td><td>Set the label of the calendar.</td></tr><tr><td>Custom Icon</td><td>String</td><td>Customize the calendar icon. All lightning icons are supported. You can get the icon name from <a href="https://lightningdesignsystem.com/icons/">https://lightningdesignsystem.com/icons<strong>/</strong></a></td></tr><tr><td>Calendar Height</td><td>Integer</td><td><p>Set the grid height. Set this property if you want to control the height and show up components after the grid. The user has to scroll vertically to see more records.</p><p></p><p> If the value is set 9999, The calendar will use the remaining space on the page even if the user resizes the window. This behavior is relevant to build a responsive app page.</p></td></tr><tr><td>Calendar Style</td><td>String</td><td><p>CSS hooks to override the style of the calendar. The properties are available: the minimum activity cell width and the assignee width. See example below:</p><p></p><p><code>cell-min-width:10rem;col-header-width:10rem;</code></p></td></tr><tr><td># Of Visible Activities</td><td>Integer</td><td><p>Set the number of visibles activities (3 by default).</p><p></p><p>Extra activities will be displayed in the extra wrapper when the user click on link. </p><p></p><p>By setting the number if visible activities, we can control the height of the rows.</p></td></tr><tr><td>Default View</td><td>String</td><td><p>Calendar default view : <strong>daily</strong> | <strong>weekly | monthly | quarterly</strong>. </p><p></p><p>The user can still change the view using the <strong>view switcher</strong> when the calendar is rendered.</p></td></tr><tr><td>Week Start Day</td><td>Integer</td><td>Week start day from 0 to 6. 0 is Monday.</td></tr><tr><td>Day Start Hour</td><td>Integer</td><td>Day start hour from 0 to 11.</td></tr><tr><td>Skip Night Hours</td><td>Boolean</td><td>Check this options to skip the night hours (12 hours) when the user clicks Next/Prev.</td></tr><tr><td>Year Start</td><td>String</td><td>Set the start of the year (month). Used only for quarterly view</td></tr><tr><td>Show Actions as Buttons</td><td>Boolean</td><td>Check this option if you wish to display actions as buttons instead of icons.</td></tr><tr><td><strong>Assignee</strong></td><td></td><td></td></tr><tr><td>Assignee Object*</td><td>String</td><td>The name of the assignee object to display. Don’t forget __c for custom objects.</td></tr><tr><td>Assignee ListView*</td><td>String</td><td>The ListView API Name of the assignee object to display. The component will use the ListView filter to fetch the relevant records.</td></tr><tr><td>Available Assignee ListView(s)</td><td>String</td><td>',' Separated list of assignee ListView(s). The user will be able to switch between different ListView(s) to streamline the assignment process.</td></tr><tr><td>Assignee Filter*</td><td>String</td><td><p>JSON string to define filter criteria. Don’t forget __c for custom fields.</p><p>See <a href="/pages/-MEstkhme84gnGFcsCxP">GM - RelatedList Grid</a> <strong>filter</strong> property for more details.  </p></td></tr><tr><td>Assignee Sort</td><td>String</td><td><p>The field list to sort assignee. This field is used only for the initial load.  </p><p>See <a href="/pages/-MEstkhme84gnGFcsCxP">GM - RelatedList Grid</a> <strong>sort</strong> property for more details.  </p></td></tr><tr><td>Assignee Order</td><td>String</td><td>Ascending or descending order for sorting. For ascending enter the value <strong>asc</strong>. For descending enter the value <strong>desc.</strong></td></tr><tr><td>Assignee Row Limit</td><td>Integer</td><td>The maximum number of assignee to fetch. The component will never go beyond this number of records. The default value is 100.</td></tr><tr><td>Assignee Title Field*</td><td>String</td><td>Set the assignee title field to display on the row header. Use __c for custom fields. </td></tr><tr><td>Assignee SubTitle Field</td><td>String</td><td>Set the assignee sub title field to display on the row header. Use __c for custom fields. </td></tr><tr><td>Assignee Popover Fields</td><td>String</td><td>',' separated list of fields to display. These fields are used when the user hover on a specific assignee.</td></tr><tr><td>Assignee Popover Columns #</td><td>Number</td><td>The number of columns to display the assignee detail when the user hover on a specific assignee.</td></tr><tr><td>Assignee Icon</td><td>String</td><td>The icon to use for the assignee object. </td></tr><tr><td>Assignee Label</td><td>String</td><td>Override the assignee label instead of using the object label.</td></tr><tr><td><strong>Activity</strong></td><td></td><td></td></tr><tr><td>Activity Object*</td><td>String</td><td>The name of the activity object to display. Don’t forget __c for custom objects.</td></tr><tr><td>Activity ListView*</td><td>String</td><td>The ListView API Name of the activity object to display. The component will use the ListView filter to fetch the relevant records.</td></tr><tr><td>Activity Title Field*</td><td>String</td><td>Set the title field to display for an activity. Use __c for custom fields. </td></tr><tr><td>Activity SubTitle Field</td><td>String</td><td>Set the sub title field to display for an activity. Use __c for custom fields. </td></tr><tr><td>Activity Date Field Name</td><td>String</td><td>Set the activity date field for an activity. Use __c for custom fields. </td></tr><tr><td>Activity From Date Field Name</td><td>String</td><td>Set the activity from date field for an activity. This field is required when dealing with datetimes. Use __c for custom fields. </td></tr><tr><td>Activity End Date Field Name</td><td>String</td><td>Set the activity end date field for an activity. This field is required when dealing with datetimes. Use __c for custom fields. </td></tr><tr><td>Activity User Id Field Name</td><td>String</td><td>Set the used Id field for an activity. Use __c for custom fields. </td></tr><tr><td>Activity Aggregations</td><td>String</td><td>Json string to define the aggregated activity fields</td></tr><tr><td>Activity Default Values</td><td>String</td><td><p>JSON string to initialize a new record created from the calendar. Use __c for custom fields. </p><p></p><p>See <a href="/pages/-MEstkhme84gnGFcsCxP">GM - RelatedList Grid</a> <strong>default values</strong> property for more details.  </p></td></tr><tr><td>Hidden Fields</td><td>String</td><td><p>',' separated list of hidden fields for modal creation. When a user creates a new record, hidden fields will be defaulted but not displayed to the end-user (RecordTypeId for instance). </p><p></p><p>See <a href="/pages/-MEstkhme84gnGFcsCxP">GM - RelatedList Grid</a> <strong>hidden fields</strong> property for more details.  </p></td></tr><tr><td>Activity Popover Fields</td><td>String</td><td>',' separated list fields to display. These fields are used when the user hover on a specific activity.</td></tr><tr><td>Activity Popover Columns #</td><td>Number</td><td>The number of columns to display the activity detail when the user hover on a specific record.</td></tr><tr><td>Activity Coloring</td><td>String</td><td><p>JSON conditions for cells coloring. You can define a list of colorings and the corresponding conditions.  </p><pre class="language-json"><code class="lang-json">[
    {
        "color": "#60ace6",
        "exp": {
            "Subject": {
                "operator": "=",
                "value": "Email"
            }
        }
    },
    {
        "color": "#8cedbb",
        "exp": {
            "Subject": {
                "operator": "=",
                "value": "Meeting"
            }
        }
    }
]
</code></pre><p></p><p>See <a href="/pages/-MEstkhme84gnGFcsCxP">GM - RelatedList Grid</a> <strong>cell coloring fields</strong> property for more details.  </p></td></tr><tr><td>Activity Actions</td><td>String</td><td>Json string to initialize the list of available actions for an activity . See the <a href="/pages/-MEsx1b73Rl2AvQQkI4R#custom-actions">actions configuration example</a> </td></tr><tr><td>Activity Icon</td><td>String</td><td>The icon to use for the activity object. </td></tr><tr><td>Activity Label</td><td>String</td><td>Override the activity label instead of using the object label.</td></tr><tr><td>Extra Activities</td><td>String</td><td><p>JSON string to add extra activities. The component is able to display multiple activity types on the same calendar as long as they belong to the same object. </p><p></p><p>As an <a href="/pages/-MgWMHBj0_GwiJaN9SCi#activity-configuration">example</a> we can build a calendar to display Events and Tasks assigned to a list of contacts. See <a href="/pages/pD5HVSKOzm9HDxCvtyGj">configuration example</a>.</p></td></tr><tr><td><strong>Permissions</strong></td><td></td><td></td></tr><tr><td>Enable Update Activity</td><td>Boolean</td><td>Check this option to allow the end-user to edit activities.</td></tr><tr><td>Enable Delete Activity</td><td>Boolean</td><td>Check this option to allow the end-user to delete activities.</td></tr><tr><td>Enable Create Activity</td><td>Boolean</td><td>Check this option to allow the end-user to create activities.</td></tr><tr><td>Enable Export Activity</td><td>Boolean</td><td>Check this option to allow the end-user to export activities.</td></tr><tr><td>Enable Toggle Fullscreen</td><td>Boolean</td><td>Check this option if you want to enable toggle fullscreen</td></tr></tbody></table>

## **API Reference**

{% tabs fullWidth="true" %}
{% tab title="CalendarComponent.design" %}

```xml
<design:component label="GM - Multi Calendar">
    <!-- UI props-->
    <design:attribute name="customLabel" label="Custom Label" 
                      description="Set the label of calendar"/> 
    <design:attribute name="customIcon" label="Custom Icon" 
                      description="Customize the calendar icon. All lightning icons are supported. You can get the icon name from https://lightningdesignsystem.com/icons/"/> 
    <design:attribute name="height" label="Calendar Height" 
                      description="Set the calendar height"/>   
    <design:attribute name="style" label="Calendar Style" 
                      description="Set the calendar style(header width, cell width...)"/>   
    <design:attribute name="visibleActivities" label="# Of Visible Activities" 
                      description="Max. # of visible activities"/>                            
    <design:attribute name="timelineView" label="Default View" 
                      description="Set the default view (daily|weekly|monthly|quarterly)"/> 
    <design:attribute name="startWeek" label="Week Start Day" 
                      description="Set the start day of the week. 0 is Sunday"/> 
    <design:attribute name="startTime" label="Day Start Hour" 
                      description="Set the start of  the day. 8 is the default value"/> 
    <design:attribute name="skipNightHours" label="Skip Night Hours" 
                      description="Skip Nigh Hours"/>                            
    <design:attribute name="startYear" label="Year Start" 
                      description="Set the start of the year (month). Used only for quarterly view"/>                                                                   
    <design:attribute name="buttonActions" label="Show Actions as Buttons" 
                      description="Use buttons for actions instead of icons"/>  
                      
    <!-- Permissions props-->
    <design:attribute name="canUpdate" label="Enable Update Activity" 
                      description="Check this option if you want to update activities"/>
    <design:attribute name="canDelete" label="Enable Delete Activity" 
                      description="Check this option if you want to delete activities"/>
    <design:attribute name="canCreate" label="Enable Create Activity" 
                      description="Check this option if you want to create activities"/>  
    <design:attribute name="canExport" label="Enable Export Activity" 
                      description="Check this option if you want to export activities"/>                          
    <design:attribute name="canToggleFullscreen" label="Enable Toggle Fullscreen" 
                      description="Check this option if you want to enable toggle fullscreen"/>   

    <!-- Assignee props-->
    <design:attribute name="userObjectName" label="Assignee Object" 
                      description="Assignee Object"/>        
    <design:attribute name="userListViewName" label="Assignee ListView" 
                      description="Assignee ListView"/>     
    <design:attribute name="userListViewNames" label="Assignee ListView(s)" 
                      description="Available Assignee ListView(s)"/>     
    <design:attribute name="userFilter" label="Assignee Filter" 
                      description="Assignee Filter"/>  
    <design:attribute name="userSort" label="Assignee Sort" 
                      description="Assignee Sort"/>  
    <design:attribute name="userOrder" label="Assignee Order" 
                      description="Assignee Order"/>  
    <design:attribute name="userRowLimit" label="Assignee Row Limit" 
                      description="Assignee Row Limit"/>                           
    <design:attribute name="userPageSize" label="Assignee Page Size" 
                      description="Assignee Page Size"/>                      
    <design:attribute name="userTitleFieldName" label="Assignee Title Field" 
                      description="Assignee Title Field"/>  
    <design:attribute name="userSubTitleFieldName" label="Assignee SubTitle Field" 
                      description="Assignee SubTitle Field"/>      
    <design:attribute name="userPopoverFields" label="Assignee Popover Fields" 
                      description="Assignee Popover Fields to display"/>
    <design:attribute name="userPopoverColums" label="Assignee Popover Columns #" 
                      description="Assignee Popover Columns #"/>     
    <design:attribute name="assigneeIcon" label="Assignee Icon" 
                      description="Assignee Icon"/>                                                                                            
    <design:attribute name="assigneeLabel" label="Assignee Label" 
                      description="Assignee Label"/>                                                                      
    
    <!-- Activity props-->
    <design:attribute name="activityObjectName" label="Activity Object" 
                      description="Activity Object"/>  
    <design:attribute name="activityListViewName" label="Activity ListView" 
                      description="Activity ListView"/>     
    <design:attribute name="activityFilter" label="Activity Filter" 
                      description="Activity Filter"/>        
    <design:attribute name="activityTitleFieldName" label="Activity Title Field" 
                      description="Activity Title Field Name"/>     
    <design:attribute name="activitySubTitleFieldName" label="Activity Sub Title Field" 
                      description="Activity Sub Title Field Name"/>     
    <design:attribute name="activityDateFieldName" label="Activity Date Field" 
                      description="Activity Date Field Name"/>                               
    <design:attribute name="activityFromDateFieldName" label="Activity From Date Field" 
                      description="Activity From Date Field Name"/>     
    <design:attribute name="activityToDateFieldName" label="Activity To Date Field" 
                      description="Activity To Date Field Name"/>     
    <design:attribute name="activityUserIdFieldName" label="Activity Assignee Field" 
                      description="Activity Assignee Field Name"/>     
    <design:attribute name="aggregate" label="Activity Aggregations"
                      description="Json string to define the aggregated activity fields"/>  
    <design:attribute name="defaultValues" label="Activity Default Values" 
                      description="Json string to initialize a new activity created from the calendar. Don’t forget __c for custom fields"/>
    <design:attribute name="hiddenFields" label="Hidden Fields"
                      description="',' separated list of hidden fields for activity creation. Reserved for future use"/>  
    <design:attribute name="activityPopoverFields" label="Activity Popover Fields" 
                      description="Activity Popover Fields to display"/>          
    <design:attribute name="activityPopoverColums" label="Activity Popover Columns #" 
                      description="Activity Popover Columns #"/>                                                                     
    <design:attribute name="activityColoring" label="Activity Coloring" 
                      description="Activity Coloring"/>
    <design:attribute name="activityActions" label="Activity Actions" 
                      description="Json string to initialize the list of available actions for an activity"/>
    <design:attribute name="activityIcon" label="Activity Icon" 
                      description="Activity Icon"/>
    <design:attribute name="activityLabel" label="Activity Label" 
                      description="Activity Label"/>

    <!-- Extra Activities -->
    <design:attribute name="extraActivities" label="Extra Activities" 
                      description="Extra Activities Configuration"/>
</design:component>
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gridmate.io/package-reference/components-library/gm-calendar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.