Showing Events in Full Calendar Using Scheduler Plugin in lightning components

 

Hi ,

I have Two custom objects in my salesforce (Property and Reservation). Property is Parent Object and Reservation is Child Object. Each property can have multiple Reservations. Property will have all the properties and Reservation will have all the bookings that made to properties.

I want to show all the properties and reservations on a calendar. I have gone through many app exchange products and 3rd party paid plugins. After some research , i decided to implement using Full Calendar Scheduler Plugin.

This Plugin also paid one, but non-commercial purpose it is free. Check out more

https://fullcalendar.io/scheduler/purchase

First we need to download libraries and put it into a Zip file and upload in to static Resource.

List of Files need to download ,

Create a Component “FullCalendarSchedular”

 

	<!–
	/**
	* Full Calendar using Schedular Plugin
	* @category Lightning component
	* @author Veeranjaneyulu k
	**/
	–>
	<aura:component controller="FullCalendarSchCntr" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction">
	<!– LIBRARIES –>
	<ltng:require styles="{!join(',',
	$Resource.FullCalendarSch + '/FullCalendarSch/fullcalendar.min.css',
	$Resource.FullCalendarSch + '/FullCalendarSch/scheduler.min.css')}"
	scripts="{!join(',',
	$Resource.FullCalendarSch + '/FullCalendarSch/moment.js',
	$Resource.FullCalendarSch + '/FullCalendarSch/jquery.min.js',
	$Resource.FullCalendarSch + '/FullCalendarSch/fullcalendar.min.js',
	$Resource.FullCalendarSch + '/FullCalendarSch/scheduler.min.js')}"
	afterScriptsLoaded="{!c.jsLoaded}"/>
	<!– ATTRIBUTES –>
	<aura:attribute type="Object[]" name="Resources"/>
	<!–Calendor Events Start –>
	<div class="EventSection" >
	<span>
	<ul >
	<li><span class="event-Inquired"></span>Inquired</li>
	<li><span class="event-Hold"></span>Hold</li>
	<li><span class="event-Confirmed"></span>Confirmed</li>
	<li><span class="event-Cancelled"></span>Cancelled</li>
	</ul>
	</span>
	</div>
	<!–Calendor Events End –>
	<!– Calendar Section Start –>
	<div id="container" style="width: 90% !important;overflow:hidden;margin:10px;">
	<div id="calendar"></div>
	</div>
	<!– Calendar Section End –>
	</aura:component>

view raw

gistfile1.txt

hosted with ❤ by GitHub

Controller “FullCalendarSchedularController”

	({
	jsLoaded : function(component, event, helper) {
	var prpList=component.get("v.Resources");
	if(!prpList.length)
	{
	helper.getReasource(component, event);
	}
	},
	})

view raw

FullCalendarSchedularController

hosted with ❤ by GitHub

Helper “FullCalendarSchedularHelper”

	({
	getReasource: function(component,event){
	var action = component.get("c.getReasource");
	var self = this;
	action.setCallback(this, function(response) {
	var state = response.getState();
	if (component.isValid() && state === "SUCCESS") {
	var eventArr = response.getReturnValue();
	self.jsLoaded(component,eventArr);
	component.set("v.Resources", response.getReturnValue());
	}
	});
	$A.enqueueAction(action);
	},
	jsLoaded : function(component,events){
	$(document).ready(function(){
	(function($) {
	var tempR = events;
	var jsnResourcesArray = [];
	var jsnEventsArray = [];
	for(var i = 0;i < tempR.length;i++){
	jsnResourcesArray.push({
	'title':tempR[i].Name,
	'id':i
	});
	for(var k=0;k < tempR[i].Reservations__r.length ; k++){
	jsnEventsArray.push({
	'resourceId': i,
	'id': tempR[i].id,
	'start': tempR[i].Reservations__r[k].Check_in__c,
	'end': tempR[i].Reservations__r[k].Check_out__c,
	'color' : myEventColor(tempR[i].Reservations__r[k].Status__c)
	});
	}
	}
	$('#calendar').fullCalendar({
	schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
	defaultView: 'timelineMonth',
	locale: 'en',
	resourceAreaWidth: '12%',
	resourceLabelText: 'My Hotel Rooms',
	views: {
	},
	resources:jsnResourcesArray,
	events: jsnEventsArray
	});
	})(jQuery);
	});
	function myEventColor(status) {
	if(status === 'Inquired'){
	return 'BlueViolet';
	}
	else if (status === 'Hold') {
	return 'YellowGreen';
	} else if (status === 'Confirmed') {
	return '#54ff9f';
	} else { //Cancelled
	return '#ff0000';
	}
	}
	},
	})

view raw

FullCalendarSchedularHelper

hosted with ❤ by GitHub

CSS “FullCalendarScheduleCss”

	.THIS .event-no {
	background:#FFFFFF;
	border-color:#FFFFFF;
	}
	.THIS .event-Inquired {
	background:#8a2be2;
	border-color:#8a2be2;
	}
	.THIS .event-Hold {
	background:#9acd32;
	border-color:#9acd32;
	}
	.THIS .event-Confirmed {
	background:#54ff9f;
	border-color:#54ff9f;
	}
	.THIS .event-Cancelled {
	background:#ff0000;
	border-color:#ff0000;
	}
	.THIS.EventSection {
	float:left;
	}
	.THIS.EventSection ul {
	margin:0;padding:0;list-style:none;
	}
	.THIS.EventSection ul li {
	margin:0;padding:5px;float:left;
	}
	.THIS.EventSection ul li span {
	display:block; height:14px; width:14px; margin-right:4px; float:left; border-radius:4px;
	}
	/* This is Events End */

view raw

FullCalendarScheduleCss

hosted with ❤ by GitHub

Apex Controller : “FullCalendarSchCntr”

	/** Class Name : FullCalendarSchCntr
	* Description : Convenience class that can be used in Full calendar (getting Properties and Reservations)
	* Created By : Veeranjaneyulu k
	* Created On : 22nd March 2018
	*
	* Modification Log:
	* ————————————————————————————————————————————–
	* Developer Date Modification ID Description
	* —————————————————————————————————————————————
	**/
	public class FullCalendarSchCntr {
	/**
	* @description : To get the properties with reservations
	* @param :
	* @return : List<Property__c>
	**/
	@AuraEnabled
	public static List<Property__c> getReasource(){
	//List<sObject> recordList = Database.query('select id,name from property__C where status=\'Active\'');
	List<Property__c> proList =[select id,name ,(SELECT Name, Check_in__c, Check_out__c,Status__c,Property__r.Name,Property__c FROM Reservations__r where CALENDAR_YEAR(Check_in__c)= 2018) from Property__c where id in (select Property__c from Reservation__c where CALENDAR_YEAR(Check_in__c)= 2018) ];
	return proList;
	}
	}

view raw

FullCalendarSchCntr

hosted with ❤ by GitHub

Application : “FullCalendarScheduleApp”

	<aura:application >
	<c:FullCalendarSchedule/>
	</aura:application>

view raw

FullCalendarScheduleApp

hosted with ❤ by GitHub

 

Finally preview the Application , to see the output. Before that create some records on Property and Reservation.

Stay tune for more updates !!!!