function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
salesforcerrrsalesforcerrr 

FullCalendar in Salesforce

Hi, 

trying to set up the fullcalendar set up in Salesforce according to: https://gist.github.com/sjurgis/3c9ad1294b1466d7b910

Have imported everyting into my Salesforce org that was needed from the latest version of https://fullcalendar.io/ and named resources (import in visualforce page) 

Visualforce Page:  
<apex:page showHeader="false" standardStylesheets="false" controller="fullCalendar" standardstylesheets="false">
    
    <apex:stylesheet value="{!$Resource.fullCalendarCSS}"/>
    <apex:stylesheet value="{!$Resource.fullCalendarPrintCSS}"/>
    <apex:includeScript value="{!$Resource.fullCalendarMinJS}"/>
	<apex:includeScript value="{!$Resource.jQuery3}"/>
    <apex:includeScript value="{!$Resource.momentJS}"/>

   <body>             
   <script type="text/javascript"> 
      function getEventData() {                         // records are retrieved from soql database
        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.fullCalendar.eventdata}',  // controller and method names
            function(result, event){
                if (event.status) {
                    evt =  JSON.parse(result);
                    $('#calendar').fullCalendar({       // html element and library name
                        events: evt                     
                    }) 
                } else if (event.type === 'exception') { 
                    console.log(event.message);
                } else {
                    console.log(event.message);
                }
            }, 
            {escape: false}
        );
    }
    $(document).ready(function() {
        getEventData();
    });
    </script>
    <div id="calendar"></div>
    </body>
</apex:page>

APEX Class: 
public class fullCalendar {
    public string eventsJSON {get;set;}
    
    //The calendar plugin is expecting dates is a certain format. We can use this string to get it formated correctly
    static String dtFormat = 'EEE, d MMM yyyy HH:mm:ss z';

    @RemoteAction
    public static string eventdata(){
        calEvent[] events = new calEvent[]{};
        for(Event evnt: [select Id, Subject, isAllDayEvent, StartDateTime, EndDateTime from Event]){
            DateTime startDT = evnt.StartDateTime;
            DateTime endDT = evnt.EndDateTime;
            
            calEvent myEvent = new calEvent();
            myEvent.title = evnt.Subject;
            myEvent.allDay = evnt.isAllDayEvent;
            myEvent.startString = startDT.format(dtFormat);
            myEvent.endString = endDT.format(dtFormat);
            myEvent.url = '/' + evnt.Id;
            myEvent.className = 'event-personal';
            events.add(myEvent);
        }
        
        string jsonEvents = JSON.serialize(events);
        jsonEvents = jsonEvents.replace('startString','start');
        jsonEvents = jsonEvents.replace('endString','end');
        
        return jsonEvents;
    }

    // Class to hold calendar event data
    public class calEvent {
        public String title {get;set;}
        public Boolean allDay {get;set;}
        public String startString {get;set;}
        public String endString {get;set;}
        public String url {get;set;}
        public String className {get;set;}
    }
}

Apex Test: 
@isTest
class FullCalendarTest {
	
    static testMethod void testfullCalendar (){
    event[] bulklist= new event[]{};
	for (integer i = 0; i < 200; i++)
    {
        string srnd = string.valueOf(math.random());
        blob rnd = Blob.valueOf(srnd);
        bulklist.add(new event (
            subject=encodingUtil.base64Encode(rnd),
            startDateTime=system.now().addDays(-10+ (math.random() * 10 ).intValue()),
            isAllDayEvent=true     
        ) );
    }
    insert bulklist;
}
}

I get absolutely no error and test is passing as well. But have the following problems:

1. When i actually try to preview the page nothing happens / completely blank page
2. Test is passing but I get 0 Code Coverage for my class 

All help very much appreciated to get this to work. 
 
venkat-Dvenkat-D
Check for below settings in Session Settings in security controls in setup. Disable these two and test if the calendar is displayed or not. 
1)Enable clickjack protection for customer Visualforce pages with standard headers
2) Enable clickjack protection for customer Visualforce pages with headers disabled
Subhash RSubhash R
Hi,
I hope you already got the answer because it is posted a while back. But posting this answer/resolution for others who want to know the answer.

Please try to put WHERE condition within the Events query. Sometimes, there might be a chance of the existence of events which are having StartDateTime and EndDateTime as null.

So, try to change the "for" loop query as below
for(Event evnt: [select Id, Subject, isAllDayEvent, StartDateTime, EndDateTime fromEvent where StartDateTime != null AND EndDateTime != null])

If the issue still exists, then try to know about the issue either through Javascript alert or Console logs. Add the below comments on the Visualforce page as below.
  
function getEventData() {                         // records are retrieved from soql database
        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.fullCalendar.eventdata}',  // controller and method names
            function(result, event){
                alert(event.status);//Or use console.log(event.status);
                alert(event.type);//Or use console.log(event.type);
                alert(event.message);//Or use console.log(event.message);
                if (event.status) {
                    evt =  JSON.parse(result);
                    $('#calendar').fullCalendar({       // html element and library name
                        events: evt                     
                    }) 
                } else if (event.type === 'exception') { 
                    console.log(event.message);
                } else {
                    console.log(event.message);
                }
            }, 
            {escape: false}
        );
    }

If everything works correctly,
1) event.status should be "true"
2) event.type should be "rpc" (i.e the event is having some response)
3) event.message should be undefined (It means there is no error to show the message)