Multi Calendar

GridMate provides a component to calendar any object. It displays horizontal time-axis and resources to assign as rows. Activities can be created, edited or deleted. It supports also drag & drop like any calendar app.

In this tutorial, we will setup a Multi Calendar to visualize events and tasks assigned to a list of contacts.

General Configuration

Let's configure the general settings of our calendar.

General Configuration

Set the height to 9999 to have a responsive height.

If Skip Night Hours is checked, the user will be redirected to the next/previous day when clicking on Next/Previous button.

Set the style to define the width of the assignee column and the activity cell as below:

cell-min-width:${cell_width};col-header-width:${heade_rwidth};

Example

cell-min-width:10rem;col-header-width:10rem;

The cell with is interesting when the calendar is displayed in a small area especially with the monthly view.

Assignee Configuration

Let's configure the assignee settings. Note that the assignee could be any object (Standard or custom). It will be Contact in our case.

Assignee Configuration

By default the list of assignee will be fetched using the list view configured on Assignee ListView property. If you want to switch between a specific set of teams, you can set a subset of listViews in the Assignee Listview(s) property like: AllContacts,EMEA_Contacts

The property should be populated using ',' separated list of API ListView names. If the property is empty, the user will see all available list views.

The popover fields is ',' separated list of field API name. Those fields are used to display the popover when the user hover an assignee. If the property is empty, the compact layout will be used instead.

Activity Configuration

Let's configure the activity settings. Note that the activity object could be any object (Standard or custom). It will be Event in our case.

Activity Configuration

JSON string can be used to initialize brand new records. We support defaulting the activity dates and the assignee based on the selected cell. Below is an example to default our event.

{
   "WhoId": "$userId",
   "StartDateTime": "$fromTime",
   "ActivityDate": "$fromDate"
}

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

[
   {
      "color": "#60ace6",
      "exp": {
         "Subject": {
            "operator": "=",
            "value": "Call"
         }
      }
   },
   {
      "color": "#8cedbb",
      "exp": {
         "Subject": {
            "operator": "=",
            "value": "Meeting"
         }
      }
   }
]

Activities are filtered based on the list of displayed assignee. The calendar supports also extra filtering by providing a list view or a JSON filter.

Below is a quick demo of the final version of our Multi Calendar.

Multi Calendar Demo