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: