10

Please, could someone recommend a Scheduler Javascript Library / Component which will works in Salesforce Lightning with LockerService?

Something like this:

enter image description here

13

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:

enter image description here

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:

enter image description here

  • 1
    @Robs nice work. Thanks for sharing this with the community. Can you also please include the version information for the libraries you used? – Ravi Jayaramappa Apr 9 '18 at 17:45
0

Although the question has an accepted answer I would like to give an alternative recommendation that is not a calendar but a scheduler based on resources and events/tasks. Depending on your needs it might or might not be a better fit.

It is a newly released, paid for component that ships with an integration demo for Salesforce Lightning, read more here:

Disclaimer: I am one of the authors Screenshot

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.