jQuery fullcalendar plugin not rendering the events retrieved from database

Question

I'm trying to add some events to fulllcalendar on my webpage. But it retrieves the values from the database but it doesn't show the results in calendar.

php

$q = "SELECT * FROM `events` ORDER BY `id`";
$result = $mysqli->query($q) or die(mysql_error());
echo json_encode(mysqli_fetch_array($result));

js

var calendar = $('#calendar').fullCalendar({
    editable: true,
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    events: "http://localhost/xxx/events.php",
    eventRender: function(event, element, view) {
        if (event.allDay === 'true') {
            event.allDay = true;
        } else {
            event.allDay = false;
        }
    },
    selectable: true,
    selectHelper: true,
    select: function(start, end, allDay) {
        var title = prompt('Event Title:');
        var url = prompt('Type Event url, if exits:');
        if (title) {
            var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
            var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
            $.ajax({
                url: 'http://localhost/xxx/add_events.php',
                data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
                type: "POST",
                success: function(json) {
                    alert('Added Successfully');
                }
            });
            calendar.fullCalendar('renderEvent',
                {
                    title: title,
                    start: start,
                    end: end,
                    allDay: allDay
                },
                true // make the event "stick"
            );
        }
        calendar.fullCalendar('unselect');
    },
    editable: true,
    eventDrop: function(event, delta) {
        var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
        var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
        $.ajax({
            url: 'http://localhost/xxx/update_events.php',
            data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
            type: "POST",
            success: function(json) {
                alert("Updated Successfully");
            }
        });
    },
    eventResize: function(event) {
        var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
        var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
        $.ajax({
            url: 'http://localhost/xxx/update_events.php',
            data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
            type: "POST",
            success: function(json) {
                alert("Updated Successfully");
            }
        });

json

{"0":"1","id":"1","1":"1","userid":"1","2":"sample","title":"sample","3":"2013-12-03 08:52:20","start":"2013-12-03 08:52:20","4":"2013-12-05 08:52:20","end":"2013-12-05 08:52:20","5":"0","allday":"0"}

Please anyone help me to solve this issue...

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

Judging from your JSON, you problem is that the fullCalendar jQuery plugin requires that all datetime values be converted into a UNIX timestamp.

This might be of help datetime - convert date to unixtime php - Stack Overflow

edited May 23 '17 at 12:03

Community

1
1

answered Dec 04 '13 at 16:26

Jesse Anderson

54
1
7

Thanks for your quick reply. Now I converted the `date` to `unixtimestamp` the `JSON` is `{"userid":"1","title":"sample","start":1386057140,"end":1386229940,"allday":"0"}` still it is not showing the event – James Dec 04 '13 at 17:08
Could be that the cases of some of your parameters do not match the [event object](http://arshaw.com/fullcalendar/docs/event_data/Event_Object/). e.g. change "allday" to "allDay", and if you are to use it, do not use "0/1", but instead use true/false without doublequotes. "userid" is also not part of the event object, so that could be causing some problems as well. I hope that helps. – Jesse Anderson Dec 04 '13 at 17:22
Sorry it is not working i have changed `allday` to `allDay` and `userid` to `id` and also i tried by removing `allDay` still it is not working – James Dec 04 '13 at 17:34
Justed looked at how I implemented this on my site. Try `$(document).ready(function() { $('#calendar').fullCalendar({ ... }); });` instead of `var calendar = ...` – Jesse Anderson Dec 04 '13 at 17:47
If I remove the `var also the result is same. If I enter the `event objects` manually it works. Is that my json is in correct format??? – James Dec 04 '13 at 17:54
Post your new JSON and let me see. Another possible error is with the event source. I wouldn't specify it as an "event" but specify an "eventSources" AJAX option: `eventSources: [ { url: 'http://localhost/7starprojects/secure/events.php', type: 'GET', error: function () { alert('Error grabbing calendar data!'); } } ]` And remove the "eventRender" option until you're able to display the events form your feed. – Jesse Anderson Dec 04 '13 at 18:12
this is my new json `{"id":"1","title":"sample","allDay":true,"start":1386057140,"end":1386229940}` – James Dec 04 '13 at 18:26
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/42519/discussion-between-jranderson-and-james) – Jesse Anderson Dec 04 '13 at 18:37

score 0 · Answer 2 · answered Nov 24 '14 at 07:03

I am guessing I finally cracked the problem. For some reason full calender renders events if the events are supplied inside an array so it is like this.

Array[
   Jason Objects {},{},{} as many as you want
]

for me the below code works like a charm.

$data = array(
    array(
        'id' => $event->_id
        'title' => $event->eventName,
        'start' => date($event->start)
    )
);
return Response::json($data);

And BTW your first json object is correct just change userid to id and pass it through an array i guess it should work.

Hope this helps, Happy Coding :)

jQuery fullcalendar plugin not rendering the events retrieved from database

2 Answers2