FullCalendar does not display time from JSON events

Question

Hi,

Using FullCalendar ( http://arshaw.com/fullcalendar/ ) to output events from a MySQL database table via JSON. Events are displayed on the calendar, but for some reason it ignores the time (hours, minutes, seconds) of the event. Here is the javascript from the calendar page -

<script type='text/javascript'> $(document).ready(function() { $('#calendar').fullCalendar({ editable: false, events: "json-events.php", eventDrop: function(event, delta) { alert(event.title + ' was moved ' + delta + ' days\n' + '(should probably update your database)'); }, loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); } }); }); </script> 

and my PHP JSON file (note that I am including the time after the date, currently this field is set only as DATE):

 <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/pdo_conn.inc.php'; $getEventsSQL = $db->query("SELECT id, title, date_start AS start, date_end AS end FROM training"); $events = array(); while ($row = $getEventsSQL->fetch()) { $start = $row['start']; $end = $row['end']; $title = $row['title']; $eventsArray['id'] = $row['id']; $eventsArray['title'] = $title; $eventsArray['start'] = $start . " 13:00:00"; $eventsArray['end'] = $end . " 14:00:00"; $eventsArray['url'] = "http://somewhere.org"; $events[] = $eventsArray; } echo json_encode($events); ?> 

The above outputs:

 [{"id":"13","title":"Test 1","start":"2010-05-18 13:00:00","end":"0000-00-00 14:00:00","url":"http:\/\/tapp-essexvfd.org"},{"id":"14","title":"Test 2","start":"2010-06-18 13:00:00","end":"2010-06-19 14:00:00","url":"http:\/\/tapp-essexvfd.org"},{"id":"15","title":"Test 3","start":"2010-06-18 13:00:00","end":"0000-00-00 14:00:00","url":"http:\/\/somewhere.org"},{"id":"16","title":"test4","start":"2010-05-03 13:00:00","end":"0000-00-00 14:00:00","url":"http:\/\/somewhere.org"}] 

Thanks!

Edit

Here is a modified PHP to reflect the decision made. Thanks!

  <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/pdo_conn.inc.php'; $getEventsSQL = $db->query("SELECT id, title, date_start AS start, time FROM events WHERE date_start >= NOW() AND status = 1"); $events = array(); while ($row = $getEventsSQL->fetch()) { $start = $row['start']; $title = $row['title']; $eventsArray['id'] = $row['id']; $eventsArray['title'] = $title; $eventsArray['start'] = $start . " " . $row['time']; $eventsArray['end'] = $end; $eventsArray['url'] = "#"; $eventsArray['allDay'] = false; $events[] = $eventsArray; } echo json_encode($events); ?> 

Answer 1

Try adding "allDay": false for your json. I had the same problem, see the "allDay" Documentation:

Do not include quotation marks around your true / false. This value is not a string!

When specifying event objects for events or event sources, excluding this property will result in inheritance from allDayDefault, which is usually false.

However, 'allDayDefault' defaults to true?!?

http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

http://arshaw.com/fullcalendar/docs/event_data/allDayDefault/

Answer 2

You can set allDayDefault as false when creating the calendar:

 $('#calendar').fullCalendar({ allDayDefault: false, event: ... }); 

Answer 3

Items in dates are invalid. Instead:

 [{"id":"10", "title":"Urlaub", "start":"2010-11-24T07:30:00+01:00", "end":"2010-11-24T16:15:00+01:00", "allDay":false}] 

Must be:

 [{"id":"10", "title":"Urlaub", "start":"2010 11 24 07:30:00+01:00", "end":"2010 11 24 16:15:00+01:00", "allDay":false}]