You need to sign in to do that
Don't have an account?
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)); } } }
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
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
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.
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 attached