Scheduler Javascript Library / Component that works in Salesforce Lightning with LockerService
Standard Agenda View
Using FullCalendar javascript component.
You need to add these static resources:
- jQuery 3.3.1
- Moment JS 2.22.0
- FullCalendar 3.9.0
- FullCalendar Scheduler 1.9.4
Lightning Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
<ltng:require scripts="{!join(',',
$Resource.FullCalenderJs + '/jquery.min.js',
$Resource.FullCalenderJs + '/moment.min.js',
$Resource.FullCalenderJs + '/fullcalendar.min.js',
$Resource.FullCalenderJs + '/scheduler.min.js'
)}"
afterScriptsLoaded="{!c.afterScriptsLoaded}" />
<link href="{!$Resource.fullcalendar_min_css}" rel="stylesheet" />
<link href="{!$Resource.fullcalendar_scheduler_min_css}" rel="stylesheet" />
<link href="{!$Resource.fullcalendar_print_min_css}" rel="stylesheet" media="print" />
<div class="slds-card slds-p-around_medium">
<div aura:id="calendar"></div>
</div>
</aura:component>
Controller JS:
({
afterScriptsLoaded : function(component, event, helper) {
helper.loadCalendar(component);
}
})
Helper JS:
The key here is to set the defaultView to agendaWeek this will give you a scheduler/agenda layout
({
loadCalendar : function(component) {
// get data
var data;
var ele = component.find('calendar').getElement();
$(ele).fullCalendar({
header: {
left: 'prev,next today',
right: 'agendaWeek,listWeek'
},
defaultView: 'agendaWeek',
editable: true,
eventLimit: true,
selectable: true,
selectHelper: true,
nowIndicator: true,
minTime: '06:00:00',
maxTime: '22:00:00',
height: "auto",
events: data,
businessHours: [
{
dow: [ 1, 2, 3, 4, 5 ], // Monday - Fri
start: '09:00',
end: '17:00',
},
{
dow: [ 6, 0 ], // Sat & Sun
start: '10:00',
end: '15:00',
}
]
});
}
})
It should look something like this:
If you want a timeline view, add the paid for Scheduler addon
Use the same Lightning Component and Controller JS code, but use this Javascript to load the calendar:
Scheduler Helper JS:
Notice the defaultView is set to timelineDay and resourceGroupField is true and resources is defined.
({
loadCalendar : function(component) {
// get some data here
var data;
var ele = component.find('calendar').getElement();
$(ele).fullCalendar({
header: {
left: 'prev,next today',
right: 'timelineDay,timelineWeek'
},
defaultView: 'timelineDay',
editable: true,
eventLimit: true,
selectable: true,
selectHelper: true,
nowIndicator: true,
minTime: '06:00:00',
maxTime: '22:00:00',
height: "auto",
resourceGroupField: 'venue',
resources: [
{ id: 'a', venue: 'Bristol', title: 'Person A' },
{ id: 'b', venue: 'Bristol', title: 'Person B' },
{ id: 'c', venue: 'London', title: 'Person C' },
{ id: 'd', venue: 'London', title: 'Person D' }
],
events: data,
businessHours: [
{
dow: [ 1, 2, 3, 4, 5 ], // Monday - Fri
start: '09:00',
end: '18:00',
},
{
dow: [ 6, 0 ], // Sat & Sun
start: '10:00',
end: '15:00',
}
]
});
}
})
And the timeline view should look like this: