+ Start a Discussion

Create Event Code in Calendar Is Not Working


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>



        //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.


                header: {

                    left: 'prev,next today',

                    center: 'title',

                    right: 'month,agendaWeek,agendaDay'

              editable: true, 
                eventRender: function(event, element) {
            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






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


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



    <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 id="cal-legend">


                    <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>


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


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

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



Bhawani SharmaBhawani Sharma
Are you creating events using controller code ?
I'm new to coding, I read somewhere need to put event hook, could you tell me what I should do with it? Thank you.
Bhawani SharmaBhawani Sharma
I am not really sure how this page is being displayed on th euser interface, but what you can do is, create a method in your controller class. Insert a new event record in this method. Like 
public .....{ insert event;}
Call this method from your VF page .