开发者

FullCalendar not displaying time from JSON events

Using FullCalendar (http://arshaw.com/fullcalendar/) to pull events from a MySQL database table via JSON. The events are being displayed in the calendar but for some reason it is ignoring the time (hours, minutes, seconds) of the event. Here is the Javascript from the calendar page -

<script type='text/javascript'>
$(document).ready(function() {
  $('#calendar').fullCale开发者_StackOverflowndar({
    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 JSON PHP file (note that I am including the time after the date, presently that field is set as DATE only):

<?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 the modified PHP to reflect the accepted solution. 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);
?>


Try adding 'allDay': false to your json. I had the same issue, see 'allDay' documentation specifically:

Don't include quotes around your true/false. This value is not a string!

When specifying Event Objects for events or eventSources, omitting this property will make it inherit from allDayDefault, which is normally false.

However, 'allDayDefault' defaults to true?!?

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

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


You can set the allDayDefault as false when creating the calendar:

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


Dashes in dates are not valid. Instead of:

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

Should 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}]
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜