I am looking at setting up a custom calendar using Full Calendar (https://fullcalendar.io/ ) and am following the guide here: https://salesforceprojects.quora.com/Implement-full-calendar-drag-and-drop-in-Visualforce-page
I have updated to the Below Visualforce Page and Controller Reference, but do not see any events on the rendered calendar even though my query is returning results? Also would it be better to write this with Remote Actions?
Visualforce Page:
<apex:page id="pg" standardStylesheets="false" Controller="CalendarController" action="{!pageLoad}">
<link href="{!$Resource.fullCalendarCSS}" rel="stylesheet" />
<link href="{!$Resource.fullCalendarPrintCSS}" rel="stylesheet" media="print" />
<script src="{!$Resource.JqueryMinJs}"></script>
<script src="{!$Resource.JqueryUiMinJs}"></script>
<script src="{!$Resource.MomentMinJs}"></script>
<script src="{!$Resource.fullCalendarMinJS}"></script>
<script>
//Everything is wrapped in a doc.ready function so that the code fires after the DOM is loaded
$(document).ready(function() {
var st = null;
//Call the fullCallendar method. You can replace the '#calendar' with the ID of the dom element where you want the calendar to go.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'},
editable: true,
droppable: true,
events:[
<apex:repeat value="{!events}" var="e">{
id:"{!e.eventId}",
title: "{!e.eventTitle}",
start: '{!e.eventStart}',
end: '{!e.eventEnd}',
url: '{!e.url}',
allDay: {!e.allDay} },
</apex:repeat>
],
eventDrop: function(event, delta, revertFunc) {
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
setEvnt(event.id, event.start.format(), event.end.format());
},
eventAfterRender: function (event, element, view) {
var dt = new Date();
if (event.start < dt && event.end > dt) {
element.css('background-color', '#00CDCD');
} else if (event.start < dt && event.end < dt) {
element.css('background-color', '#77DD77');
} else if (event.start > dt && event.end > dt) {
element.css('background-color', '#86C67C');
}
}
});
});
</script>
<!-- <apex:sectionHeader title="Event Calendar"/> -->
<apex:outputPanel id="calPanel">
<apex:form id="theForm">
<apex:actionFunction name="setEvnt" action="{!setEvent}" reRender="pg" >
<apex:param value="" name="item" assignTo="{!eventIdTemp}"/>
<apex:param value="" name="test" assignTo="{!st}"/>
<apex:param value="" name="test1" assignTo="{!ed}"/>
</apex:actionFunction>
<div id="calendar"></div>
</apex:form>
</apex:outputPanel>
</apex:page>
Controller:
public class CalendarController {
public list <CalendarEvent> events {get;set;}
//This allows a toggle to show personal events
public Boolean includeMyEvents {get;set;}
//The calendar plugin is expecting dates is a certain format. This string is used to format the dates correctly
String dtFormat = 'EEE, d MMM yyyy HH:mm:ss z';
// As Events can be dynamically dragged around the calender variables are used for these selections
public String eventIdTemp {get;set;} //Selected event Id coming from vf page
public String st {get;set;} //Selected event start date
public String ed {get;set;} //Selected event end date
public List <Event> eventList = new List <Event> ();
public CalendarController() {
eventList = [Select Id, Subject, isAllDayEvent, StartDateTime, EndDateTime, CreatedDate, LastModifiedDate
From Event
Where OwnerId = '005j000000C1f0AAAR' ];
}
//Method to query requested event records and place in calendar
public PageReference pageLoad() {
// eventList = [SELECT CreatedDate,EndDateTime,IsAllDayEvent,LastModifiedDate,StartDateTime,Subject FROM Event WHERE OwnerId = '005j000000C1f0AAAR'];
List <CalendarEvent> events = new list <CalendarEvent> ();
for(Event e : eventList){
DateTime startDt = e.StartDateTime;
DateTime endDt = e.EndDateTime;
DateTime createdOn = e.CreatedDate;
DateTime modifiedOn = e.LastModifiedDate;
CalendarEvent newEvent = new CalendarEvent();
newEvent.eventId = e.Id;
newEvent.eventTitle = e.Subject;
newEvent.allDay = e.isAllDayEvent;
newEvent.eventStart = startDt.format(dtFormat);
newEvent.eventEnd = endDt.format(dtFormat);
newEvent.url = '/' + e.Id;
newEvent.className = 'event-personal';
events.add(newEvent);
}
return null;
}
// Parse the date format and set values
public void setEvent() {
List <String> stringParts = ed.split('T');
List <String> dateParts = stringParts[0].split('-');
List <String> timeParts = stringParts[1].split(':');
DateTime dt1 = DateTime.newInstance(Integer.valueOf(dateParts[0]), Integer.valueOf(dateParts[1]), Integer.valueOf(dateParts[2]), Integer.valueOf(timeParts[0]), Integer.valueOf(timeParts[1]), Integer.valueOf(timeParts[2]));
stringParts = st.split('T');
dateParts = stringParts[0].split('-');
timeParts = stringParts[1].split(':');
DateTime dt2 = DateTime.newInstance(Integer.valueOf(dateParts[0]), Integer.valueOf(dateParts[1]), Integer.valueOf(dateParts[2]), Integer.valueOf(timeParts[0]), Integer.valueOf(timeParts[1]), Integer.valueOf(timeParts[2]));
for(Event e : eventList) {
if(e.Id == eventIdTemp) {
e.EndDateTime = dt1;
e.StartDateTime = dt2;
update e;
}
}
}
}
CalendarEvent Class:
//Class to hold the Calendar Events that are used fullcalendar http://fullcallendar.io
public class CalendarEvent {
//Variables are set from the CalendarController Class
public String eventId {get;set;}
public String eventTitle {get;set;}
public String eventEnd {get;set;}
public String eventStart {get;set;}
public String eventColor {get;set;}
public String url {get;set;}
public Boolean allDay {get;set;}
public String className {get;set;}
}
