GM - Calendar

(gmpkg:CalendarComponent)

Documentation

GM - 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

Property	Type	Description
Custom Label	String	Set the label of the calendar.
Custom Icon	String	Customize the calendar icon. All lightning icons are supported. You can get the icon name from https://lightningdesignsystem.com/icons/
Calendar Height	Integer	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. 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.
Calendar Style	String	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: cell-min-width:10rem;col-header-width:10rem;
# Of Visible Activities	Integer	Set the number of visibles activities (3 by default). Extra activities will be displayed in the extra wrapper when the user click on link. By setting the number if visible activities, we can control the height of the rows.
Default View	String	Calendar default view : daily | weekly | monthly. The user can still change the view using the view switcher when the calendar is rendered.
Week Start Day	Integer	Week start day from 0 to 6. 0 is Monday.
Day Start Hour	Integer	Day start hour from 0 to 11.
Skip Night Hours	Boolean	Check this options to skip the night hours (12 hours) when the user clicks Next/Prev.
Show Actions as Buttons	Boolean	Check this option if you wish to display actions as buttons instead of icons.
Assignee
Assignee Object*	String	The name of the assignee object to display. Don’t forget __c for custom objects.
Assignee ListView*	String	The ListView API Name of the assignee object to display. The component will use the ListView filter to fetch the relevant records.
Available Assignee ListView(s)	String	',' Separated list of assignee ListView(s). The user will be able to switch between different ListView(s) to streamline the assignment process.
Assignee Filter*	String	JSON string to define filter criteria. Don’t forget __c for custom fields. See GM - RelatedList Grid filter property for more details.
Assignee Sort	String	The field list to sort assignee. This field is used only for the initial load. See GM - RelatedList Grid sort property for more details.
Assignee Order	String	Ascending or descending order for sorting. For ascending enter the value asc. For descending enter the value desc.
Assignee Row Limit	Integer	The maximum number of assignee to fetch. The component will never go beyond this number of records. The default value is 100.
Assignee Title Field*	String	Set the assignee title field to display on the row header. Use __c for custom fields.
Assignee SubTitle Field	String	Set the assignee sub title field to display on the row header. Use __c for custom fields.
Assignee Popover Fields	String	',' separated list of fields to display. These fields are used when the user hover on a specific assignee.
Assignee Popover Columns #	Number	The number of columns to display the assignee detail when the user hover on a specific assignee.
Assignee Icon	String	The icon to use for the assignee object.
Assignee Label	String	Override the assignee label instead of using the object label.
Activity
Activity Object*	String	The name of the activity object to display. Don’t forget __c for custom objects.
Activity ListView*	String	The ListView API Name of the activity object to display. The component will use the ListView filter to fetch the relevant records.
Activity Title Field*	String	Set the title field to display for an activity. Use __c for custom fields.
Activity SubTitle Field	String	Set the sub title field to display for an activity. Use __c for custom fields.
Activity Date Field Name	String	Set the activity date field for an activity. Use __c for custom fields.
Activity From Date Field Name	String	Set the activity from date field for an activity. This field is required when dealing with datetimes. Use __c for custom fields.
Activity End Date Field Name	String	Set the activity end date field for an activity. This field is required when dealing with datetimes. Use __c for custom fields.
Activity User Id Field Name	String	Set the used Id field for an activity. Use __c for custom fields.
Activity Default Values	String	JSON string to initialize a new record created from the calendar. Use __c for custom fields. See GM - RelatedList Grid default values property for more details.
Hidden Fields	String	',' 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). See GM - RelatedList Grid hidden fields property for more details.
Activity Popover Fields	String	',' separated list fields to display. These fields are used when the user hover on a specific activity.
Activity Popover Columns #	Number	The number of columns to display the activity detail when the user hover on a specific record.
Activity Coloring	String	JSON conditions for cells coloring. You can define a list of colorings and the corresponding conditions. [ { "color": "#60ace6", "exp": { "Subject": { "operator": "=", "value": "Email" } } }, { "color": "#8cedbb", "exp": { "Subject": { "operator": "=", "value": "Meeting" } } } ] See GM - RelatedList Grid cell coloring fields property for more details.
Activity Actions	String	Json string to initialize the list of available actions for an activity . See the actions configuration example
Activity Icon	String	The icon to use for the activity object.
Activity Label	String	Override the activity label instead of using the object label.
Extra Activities	String	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. As an example we can build a calendar to display Events and Tasks assigned to a list of contacts. See configuration example.
Permissions
Enable Update Activity	Boolean	Check this option to allow the end-user to edit activities.
Enable Delete Activity	Boolean	Check this option to allow the end-user to delete activities.
Enable Create Activity	Boolean	Check this option to allow the end-user to create activities.
Enable Export Activity	Boolean	Check this option to allow the end-user to export activities.

API Reference

CalendarComponent.design

<design:component label="GM - 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)"/> 
    <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="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"/>                          

    <!-- 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="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>