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 12.
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.
User
User Object*	String	The name of the user object to display. Don’t forget __c for custom objects.
User ListView*	String	The ListView API Name of the user object to display. The component will use the ListView filter to fetch the relevant records.
Available User ListView(s)	String	',' Separated list of user ListView(s). The user will be able to switch between different ListView(s) to streamline the assignment process.
User Filter*	String	JSON string to define filter criteria. Don’t forget __c for custom fields. See GM - RelatedList Grid filter property for more details.
User Sort	String	The field list to sort users. This field is used only for the initial load. See GM - RelatedList Grid sort property for more details.
User Order	String	Ascending or descending order for sorting. For ascending enter the value asc. For descending enter the value desc
User Row Limit	Integer	The maximum number of users to fetch. The component will never go beyond this number of records. The default value is 100.
User Title Field*	String	Set the user title field to display on the row header. Use __c for custom fields.
User SubTitle Field	String	Set the user sub title field to display on the row header. Use __c for custom fields.
User Popover Fields	String	',' separated list of fields to display. These fields are used when the user hover on a specific user.
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 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.
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 #"/>                                                
    
    <!-- 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="activityIcon" label="Activity Icon" 
                      description="Activity Icon"/>                      

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