0

I can't get the events from my JSON to render in FullCalendar, but I know that the AJAX/JSON is working, as it is showing in the Network Tab in the Chrome Debugger.

I have the following JS and I keep getting the following error (see below). I can't find what is causing it ("sizzle" error).

Error from Chrome Debugger:

Uncaught Error: Syntax error, unrecognized expression: [{"id":"000000000000001","title":"Test","start":"2014-10-19 16:30:00","end":"2014-10-19 17:00:00","url":"","allDay":"false"},{"id":"000000000000002","title":"James","start":"2014-10-23 09:00:00","end":"2014-10-23 17:00:00","url":"","allDay":"true"}]

Detail thrown from jquery-1.11.1.js:

Sizzle.error = function( msg ) {
    throw new Error( "Syntax error, unrecognized expression: " + msg );

JQuery - Fullcalendar:

$(document).ready(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
        allDayDefault: false,
        editable: true,
        defaultView: 'agendaWeek',
        header: {
            left: 'prev,next prevYear,nextYear today',
            center: 'title',
            right: 'agendaDay,agendaWeek,month',
        },

        events: function(start, end, timezone, callback) {
            JSON.parse($.ajax({
                type: "GET",
                url: "required/events.php",
                async: false,
                success: function(doc) {
                    var events = [];
                    $(doc).find('event').each(function() {
                        events.push({
                        id: $(this).attr('id'),
                        title: $(this).attr('title'),
                        start: $(this).attr('start'),
                        end: $(this).attr('end'),
                        allDay: $(this).attr('allDay')
                });
            });
            callback(events).show();
        }
            }).responseText);
        }, 

        // Convert the allDay from string to boolean
        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");
                JSON.parse(
                    $.ajax({
                        url: 'actions/event_add.php',
                        data: 'title=' + title + '&start=' + start + '&end=' + end,
                        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: 'actions/event_update.php',
                data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                type: "POST",
                success: function(json) {
                    alert("Updated Successfully");
                }
            });
        },

        eventClick: function(calEvent, jsEvent, view) {

            alert('Event: ' + calEvent.title + ' Start: ' + calEvent.start + ' Finish: ' + calEvent.end + ' allDay: ' + calEvent.allDay);
        },

        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: 'actions/event_update.php',
                data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                type: "POST",
                success: function(json) {
                    alert("Updated Successfully");
                }
            });

        }

    });

});
James Ham
  • 29
  • 4
  • `JSON.parse($.ajax(...))`? Read this first: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call – Salman A Oct 21 '14 at 08:35
  • @SalmanA I have had multiple different views on this and have changed the above twice to reflect both sides of the view - so far, neither have worked, but the above has come closest.. – James Ham Oct 21 '14 at 08:47

0 Answers0