0

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;}
}

2 Answers 2

0

I realized in my pageLoad method I was re-declaring my events variable rather than declaring at the class level. It now works great.


//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'];
          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;
    }
0

is it still work? Because i tried your code but my event not rendered in VF. It just show blank calendar. enter image description here

1
  • change timezone to (GMT-07:00) Pacific Daylight Time (America/Los_Angeles)
    – Sfdcprgmr
    Aug 9, 2018 at 13:58

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.