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