+ Start a Discussion
MayTheForceBeWithYouMayTheForceBeWithYou 

JSON Feed for FullCalendar Event Not Displaying

Been beating my head against a wall all day over this-I am using the jquery plug-in fullCalendar within my Salesforce VFPage and have been unable to call Apex variables from within the javascript that constructs the calendar.

 

When I use the typical notation of {!someVariable} then the calendar just flat-out doesn't render. After some searching I came across the strategy to utilize a separate VFpage and controller extension to create a JSON feed that passes the event data.

 

I tried this method, but still nothing-the calendar does render, but no event pops up within it. Even after I hardcoded a bunch of values for testing purposes I still had no luck. Below you will find the VFPage of my calendar page along with the VFPage and controller extension of the JSON feed pages-any help would be GREATLY appreciated, thanks guys.

 

Calendar VFPage: 

 

<apex:page standardController="Event" title="Appointments">
<link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.fullcalendar, 'cupertino/theme.css')}" />
<link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.fullcalendar, 'fullcalendar/fullcalendar.css')}" />
<link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.fullcalendar, 'fullcalendar/fullcalendar.print.css')}" media="print" />
<script type="text/javascript" src="{!URLFOR($Resource.fullcalendar, 'jquery/jquery-1.5.2.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.fullcalendar, 'jquery/jquery-ui-1.8.11.custom.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.fullcalendar, 'fullcalendar/fullcalendar.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.fullcalendar, 'fullcalendar/gcal.js')}"></script>
<script src="/soap/ajax/23.0/connection.js" type="text/javascript"></script> 
<script src="/soap/ajax/23.0/apex.js" type="text/javascript"></script>
<script type="text/javascript">         
    $(document).ready( function(){
  
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();        
        
        var calendar = $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultView: 'agendaWeek',
            selectable: true,
            selectHelper: true,
            allDaySlot: true,
            aspectRatio: 1.75,
            minTime: 7,
            maxTime: 20,
            //weekMode: 'variable',
            editable: false,
            eventClick: function(event) {
                // opens events in a popup window
                window.open(event.url, 'gcalevent', 'width=700,height=600');
                return false;
            },  
            eventSources: [
                    {
                    // U.S. holidays
                    url: 'https://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
                    color: '#6B6B6B'
                    }
                ],  
            events: '/apex/queryToJSON?evId=a58U0000008MhIzIBL'
        });
    });
</script>
<apex:form >

<apex:pageBlock >
<div id="calendar" style="width: 820px; float: left;"></div>
<br style="clear: both;" />
<br />
<apex:commandButton action="{!Save}" value="Done" />
<apex:commandButton action="{!Cancel}" value="Cancel" />
<br />
<br />
</apex:pageBlock>
</apex:outputPanel>
</apex:form>
</apex:page>

 

JSON Feed VFPage: 

 

<apex:page controller="queryToJSON" 
contentType="application/x-JavaScript; charset=utf-8" showHeader="false" standardStylesheets="false" sidebar="false">[<apex:repeat value="{!allEvents}" var="ev" >{
"title":{!ev.name},
"start": {!ev.start},
"end": {!ev.stop},
"allDay": false,
"color": "#36C",
"url":{!ev.url}
}
</apex:repeat>]
</apex:page>

 

JSON Feed Controller:

 

public class queryToJSON {

        public custEvent__c thisEvent;
        public fullCalendarEvent allEvents{get;set;}

         public queryToJSON() { 
        if (ApexPages.currentPage().getParameters().get('evId')!=null){
                String evId = ApexPages.currentPage().getParameters().get('evId');
                thisEvent = [SELECT Id, Customer_Name__r.Name from custEvent__c where Id = :evId LIMIT 1];
                allEvents = new fullCalendarEvent(thisEvent);
        }
                
     }
     
     public class fullCalendarEvent {
        
        public String name{get;set;}
        public String url{get;set;}
        public String start{get;set;}
        public String stop{get;set;}
        
        public fullCalendarEvent(custEvent__c thisEvent) {
                name = JSON.serialize(thisEvent.Customer_Name__r.Name);
                url = JSON.serialize('/'+thisEvent.Id);
                start = JSON.serialize(datetime.now());
                stop = JSON.serialize(datetime.now().addDays(2));
        }
        
     }
    
}

 

Best Answer chosen by Admin (Salesforce Developers) 
MayTheForceBeWithYouMayTheForceBeWithYou

In case anyone else runs into this same issue I thought I'd post the solution. At the time I was working on this page I was editing my code using "Developer Mode" from within the page itself as opposed to using the Force.com plugin for Eclipse. Unfortunately I had forgotten that I once discovered long ago that Salesforce's developer mode does not always play nicely with Visualforce pages that utilize javascript-most likely because the developer bar itself also utilizes javascript and conflicts arise. In the end, I turned off developer mode and the page worked perfectly.

All Answers

MayTheForceBeWithYouMayTheForceBeWithYou

Not sure if this helps, but the Javascript Console within Chrome displays the following errors:

 

Refused to set unsafe header "User-Agent"

Uncaugh TypeError: Cannot call method 'getChildren' of null

 

To make things even more confusing, the second error does not always appear. Thanks again!
MayTheForceBeWithYouMayTheForceBeWithYou

In case anyone else runs into this same issue I thought I'd post the solution. At the time I was working on this page I was editing my code using "Developer Mode" from within the page itself as opposed to using the Force.com plugin for Eclipse. Unfortunately I had forgotten that I once discovered long ago that Salesforce's developer mode does not always play nicely with Visualforce pages that utilize javascript-most likely because the developer bar itself also utilizes javascript and conflicts arise. In the end, I turned off developer mode and the page worked perfectly.

This was selected as the best answer
GriffindorGriffindor
Hi,

I am working with Full Calendar in Salesforce and I am using something very similar to your JSON. Please see my events just below. However, the issue I am facing is when I drag an external draggable element and put it in the Cell, I am able to do DML inserts for the activity but nothing is displayed i.e. the event does not rerender. Please see my events method as below:-

events:
                [
                    <apex:repeat value="{!lstEvents}" var="e">
                        {
                            title: "{!e.title}",
                            start: '{!e.startString}',
                            end: '{!e.endString}',
                            url: '{!e.url}',
                            allDay: {!e.allDay},
                            className: '{!e.className}'
                        },
                    </apex:repeat>
               ]

I have tried to refetch and rerender the events but it does not work oncomplete of my DML.

$('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEventSource', events);      
              $('#calendar').fullCalendar('rerenderEvents' );

I have tried implementing your JSON code and my JSON page displays all the event records but only the first event gets rendered in the Calendar which is also attachedUser-added imageUser-added image