Question

I’m actually using the jQuery fullCalendar for a booking system and I’m looking for a way to show some miscellaneous informations into each day frame from a date (basically the current date) to another date (the last day of the current calendar view).

To be more clear, my calendar displays every day of a month and I would like to get some informations from the MySQL database through an Ajax query, like number of free slots for the next coming days etc…

Example:

From the 27-08-2012 (today), MySQL would return from an Ajax query, the number of free slots for every day from today to the last day of the current view and this for the weekly view only. The data should be updated when the week is changed.

For information, the returned data from the Ajax Call may be pliants.

Any help or idea would be greatly appreciated.

Answer 1

I finally Managed to resolve this problem. It’s probably not the best solution but it works…

First i’m using 2 events sources for the calendar :

eventSources: [
        "events_list.php",
        "free_slots.php"
    ]

Both of them return events with a different css attribute. EventType for the first one, EventInfo for the second one. I know I could have used the same file but for some reasons it wasn’t possible…

So, the first one retrieves every events from a SQL query. The 2nd one uses the 2 variables used by the jQuery fullCalendar plugin :

$_GET['start'];
$_GET['end'];

Then i just have to do some calculations to retrieve all events between these two dates and the number of available slots for each…

The server-side script returns a JSON Array with the “className” option… (+the number of free slots if needed (depends on the .php file used))

$Arrayz[] = array('className' => 'EventInfo'); echo json_encode($Arrayz);

So the free slots for each event are displayed like events, but they are not really.. (No background color, no border, etc…)

After that, I can also use another function of the fullCalendar plugin to allows users to interact with the real events…

eventClick: function(event) {
   if(event.className == 'EventType'){ etc...

The possibilities are infinite…

Hope it will help.