jQuery Calendar : how to add clickable events on particular dates?

Question

I am using jquery full calendar http://arshaw.com/fullcalendar to display the meetings .

I just want to confirm it that it is possible to add an event(Let's a create a new meeting

using php ajax ) on a particular date using this .?

Answer 1

I've used fullcalendar extensively and yes, adding events on specific dates is a core feature of it. You'll need to understand the event object structure(see http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) specifically you set the start to the unix timestamp of the start date/time and either mark it as an all day event allDay = "true" or set end timestamp.

As you mentioned Ajax, one way to populate the calendar with events is to load them via JSON which you can do like this:

$('#calendar').fullCalendar({ events: '/myfeed.php' });

With myfeed.php returning a json structure full of the event objects.

---

Here's a full example of how to setup the calendar with various options

//Initialise the calendar
$('#calendar').fullCalendar({
    header: { left: 'title', center: '', right: 'today agendaDay,agendaWeek,month prev,next'},
    editable: true,
    showTime: true,
    allDayDefault: false,
    defaultView: 'agendaDay',
    firstHour: 8,
    eventColor: '#23478A',
    eventBorderColor:'#000000',
    eventTextColor:'#ffffff',
    //eventBackgroundColor:,
    theme: true, //enables jquery UI theme

    eventSources: [
        '/myfeed.php'
    ],

    //this is when the event is dragged and dropped somewhere else 
    eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) 
    {
        //do something...
    },

    //this is when event is resized in day/week view
    eventResize: function(event,dayDelta,minuteDelta,revertFunc) 
    {
        //do something
    },

    eventClick: function(calEvent, jsEvent, view) 
    {          
        //do something
    },

    eventRender: function( event, element, view ) 
    { 
        //redo the title to include the description
        element.find(".fc-event-title").html(event.title + ": <span>" + event.description + "</span>");
    },

    loading: function(bool) 
    {
        if (bool)
        {
            $("#loading").show();
        }
        else 
        {
            $('#loading').hide();
        }
    }
});

Answer 2

I am assuming you want to add events when a user clicks on a day (in month-view) or a timeslot (in day/week views). If so, you can use the select and eventClick callbacks to add and fetch events on the calendar.

Check this fiddle: http://jsfiddle.net/100thGear/xgSTr/

This incorporates the jQuery UI dialog into the FullCalendar and also inherits the selected dates into the jQuery UI datepicker for convenience!

Let me know if this helps.