Hi,

I researched up and down to come up with below visualforce code for a calendar, the calendar shows but can not create events, what am I missing here?

<apex:page controller="CalendarExample_Controller" action="{!pageLoad}">

    <link href="{!$Resource.fullCalendarCSS}" rel="stylesheet" />

    <link href="{!$Resource.fullCalendarPrintCSS}" rel="stylesheet" media="print" />

    <apex:includeScript value="{!URLFOR($Resource.FullCalendar, '/fullcalendar-2.0.3/lib/moment.min.js')}"  />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <script src="{!$Resource.fullCalendarMinJS}"></script>

   

    <script>

        //We need to wrap everything in a doc.ready function so that the code fires after the DOM is loaded

        $(document).ready(function() {  

            //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, 
                   
                eventRender: function(event, element) {
        element.qtip({
            content: {
                title: {
                    text: event.title
                },
                text: '<span class="title">Date: </span>' + ($.fullCalendar.formatDate(event.start, 'MM/dd/yy')) + '<br><span class="title">Time: </span>' + ($.fullCalendar.formatDate(event.start, 'hh:mmtt')) + '<span class="title"> to </span>' + ($.fullCalendar.formatDate(event.end, 'hh:mmtt')) + '<br><span class="title">Event: </span>' + event.Name + '<br><span class="title">Driver: </span>' + event.driver + '<br><span class="title">Location: </span>' + event.location + '<br><span class="title">Commidity: </span>' + event.commidity + '<br><span class="title">Description: </span>' + event.description
            },
            show: {
                solo: true
            },
            //hide: { when: 'inactive', delay: 3000 },
            position: {
                corner: {
                    target: 'topLeft',
                    tooltip: 'bottomRight'
                }
            },
            style: {
                width: 200,
                padding: 5,
                color: 'black',
                textAlign: 'left',
                border: {
                    width: 1,
                    radius: 3
                },

                classes: {
                    tooltip: 'ui-widget',
                    tip: 'ui-widget',
                    title: 'ui-widget-header',
                    content: 'ui-widget-content'
                }
            }
        });

    },

    dayClick: function(date, allDay, jsEvent, view) {
        var $dialogContent = $("#event_edit_container");

        y = date.getFullYear();
        m = date.getMonth();
        d = date.getDate();

        h1 = date.getHours();
        m1 = date.getMinutes();

        h2 = h1 + 1;
        m2 = m1;

        calEvent = {
            title: 'New Calendar Event',
            editable: true,
            start: new Date(y, m, d, h1, m1),
            end: new Date(y, m, d, h2, m2),
            allDay: false
        }
            }
          
            });

           

        });

   

    </script>

   

    <!--some styling. Modify this to fit your needs-->

    <style>

        #cal-options {float:left;}

        #cal-legend { float:right;}

        #cal-legend ul {margin:0;padding:0;list-style:none;}

        #cal-legend ul li {margin:0;padding:5px;float:left;}

        #cal-legend ul li span {display:block; height:16px; width:16px; margin-right:4px; float:left; border-radius:4px;}

        #calendar {margin-top:20px;}

        #calendar a:hover {color:#fff !important;}

       

        .fc-event-inner {padding:3px;}

        .event-birthday {background:#56458c;border-color:#56458c;}

        .event-campaign {background:#cc9933;border-color:#cc9933;}

        .event-personal {background:#1797c0;border-color:#1797c0;}

    </style>

   

    <apex:sectionHeader title="My Calendar Example"/>

    <apex:outputPanel id="calPanel">

        <apex:form >

            <div id="cal-options">

                <apex:commandButton value="{!IF(includeMyEvents,'Hide My Events','Show My Events')}" action="{!toggleMyEvents}"/>

            </div>

            <div id="cal-legend">

                <ul>

                    <li><span class="event-birthday"></span>Contact's Birthdays</li>

                    <li><span class="event-campaign"></span>Campaigns</li>

                    <li style="{!IF(includeMyEvents,'','display:none')}"><span class="event-personal"></span>My Events</li>

                </ul>

                <div style="clear:both;"><!--fix floats--></div>

            </div>

            <div style="clear:both;"><!--fix floats--></div>

            <div id="calendar"></div>

        </apex:form>

    </apex:outputPanel>

</apex:page>