Calendar view displays all of your Salesforce events. You can create, view, and edit events all in one place. In this example, we will use this custom calendar component to open and edit Salesforce events.
The constructed calendar view includes the following features:
The events are displayed in a grid format with months, weeks, and days. By clicking on a specific day, you may create a new event. Editing an event with a click or by dragging and dropping the event. View the events as a list.
Week numbers are displayed in a separate column.
- Go to and download the fullCalendar library.
- Add the library to your Salesforce organization as a static resource.
- Include a link to the library in your lightning component.
This lightning component would retrieve all events associated with a specific user and present them in the calendar view. To display the calendar in month, week, or day mode, the user can toggle between the buttons.
Aura component event schedule can be customized.
Lightning Calender.cmp
<aura:component controller="CalendarClass" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<aura:attribute name="events" type="Object[]" />
<ltng:require styles="{!$Resource.fullcalendar + '/fullcalendar/fullcalendar.min.css'}"
scripts="{!join(',',
$Resource.fullcalendar + '/fullcalendar/jquery.min.js',
$Resource.fullcalendar + '/fullcalendar/jquery-ui.min.js',
$Resource.fullcalendar + '/fullcalendar/moment.min.js',
$Resource.fullcalendar + '/fullcalendar/fullcalendar.min.js')}"
afterScriptsLoaded="{!c.afterScriptsLoaded}" />
<div id="calendar" class="calendarClass" style="width:90%; padding:10px; padding-top:20px;"></div>
<div id="listcalendar" class="slds-card"></div>
</aura:component>
Lightning Calender.Js
({
afterScriptsLoaded: function(component, event, helper) {
helper.fetchCalenderEvents(component); },fetchCalenderEvents: function(component) {
var action = component.get("c.pageLoad");action.setCallback(this, function(response) { var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
var events = response.getReturnValue();
component.set("v.events", events);
helper.loadDataToCalendar(component, events);
} else if (state === "ERROR") {
// Handle error
}
});$A.enqueueAction(action);
}
})
Lightning Calender.helper
({
loadDataToCalendar :function(component,data){
//Find Current date for default date
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var currentDate = d.getFullYear() + '/' +
(month<10 ? '0' : '') + month + '/' +
(day<10 ? '0' : '') + day;
var self = this;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,listWeek'
},
selectable : true,
defaultDate: currentDate,
editable: true,
eventLimit: true,
events:data,
dragScroll : true,
droppable: true,
weekNumbers : true,
});
},
formatFullCalendarData: function(component, events) {
var eventArr = [];
for(var i = 0;i < events.length;i++){
eventArr.push({
'id':events[i].eventId,
'start':events[i].eventStart,
'title':events[i].eventTitle
});
}
return eventArr;
},
fetchCalenderEvents: function(component) {
var action = component.get("c.pageLoad");
action.setCallback(this, function(response) {
var state = response.getState();
if(component.isValid() && state === "SUCCESS"){
var eventArr = this.formatFullCalendarData(component,response.getReturnValue());
this.loadDataToCalendar(component,eventArr);
component.set("v.events",eventArr);
} else if (state === "ERROR") {
// Handle error
}
});
$A.enqueueAction(action);
},
})
Lightning Calender.app
<aura:application extends="force:slds" >
<c:LightningCalender/>
</aura:application>
CalendarClass apex controller
public class CalendarClass {
@AuraEnabled
public static List<CalendarEvent> pageLoad() {
List<CalendarEvent> events = new List<CalendarEvent>();
// Retrieve and order records directly in the SOQL query
List<Event__c> eventRecords = [SELECT Id, Heading__c, StartDateTime__c
FROM Event__c
WHERE IsActive__c = true AND StartDateTime__c != null
ORDER BY StartDateTime__c DESC
LIMIT 500];
for (Event__c e : eventRecords) {
CalendarEvent newEvent = new CalendarEvent();
newEvent.eventId = e.Id;
newEvent.eventTitle = e.Heading__c;
newEvent.eventStart = e.StartDateTime__c.format('yyyy-MM-dd HH:mm:ss');
newEvent.className = 'event-personal';
events.add(newEvent);
}
return events;
}public class CalendarEvent {
@AuraEnabled
public String eventId { get; set; }
@AuraEnabled
public String eventTitle { get; set; }
@AuraEnabled
public String eventStart { get; set; }
@AuraEnabled
public String url { get; set; }
@AuraEnabled
public String className { get; set; }
}
}
Output:
.png)
0 Comments