Events are not displayed in fullcalendar js

Question

Please help me find what is happening in the code. I used fullcalendar.js for the calendar event.

I want to show events on the calendar. below is my code.

$(document).ready(function() {

    $(window).resize(function() {
        $('#calendar').fullCalendar('option', 'height', get_calendar_height());
    });

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var nevent = [];

    nevent = document.getElementById('<%=hdnevent.ClientID%>').value;


   // alert(nevent);
    var calendar = $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay',
            width: get_calendar_width
        },
        width: get_calendar_width,
        height: 480,
        selectable: true,
        selectHelper: true,
        slotMinutes: 15,
        allDayDefault: false,

        //  events: 'JsonResponse.ashx',
        events: nevent
 });

});

nevent Value:

[{ id: '2302', title: 'XXX', start: '4/4/2014 12:00:00 AM', end: '4/4/2014 12:00:00 AM', allDay: true, url: 'xxx'}]

but it does not appear on the calendar. if I gave the right to assign a value, it displays the event (Example: Event: [{ id: '2302', title: 'XXX', start: '4/4/2014 12:00:00 AM', end: '4/4/2014 12:00:00 AM', allDay: true, url: 'xxx'}])

pls kindly help me fix my error.

Answer 1

The calendar needs to be updated after changing the data. Try:

$("#calendar").fullCalendar('removeEvents');
$("#calendar").fullCalendar('addEventSource', nevent);
$("#calendar").fullCalendar('rerenderEvents');

when nevent is ready.

EDIT:

Accept the input as a JSON object, not a string:

nevent = $.parseJSON(document.getElementById('<%=hdnevent.ClientID%>').value);

Note that JSON must be in the correct format with quotation marks like:

[{ "id": "2302", "title": "XXX", "start": "4/4/2014 12:00:00 AM", "end": "4/4/2014 12:00:00 AM", "allDay": true, "url": "xxx"}]

Answer 2

. , .

[{ id: '2302', start: new Date(2014, 1, 3, 12, 0), end: new Date(2014, 4, 4, 12, 0) ,allDay: true, url: 'xxx'}]

, .

Answer 3

the neventvalue start(s end) in accordance with the documentation should be: "you can specify a string in the IETF format (for example:" Wed, 18 Oct 2009 13:00:00 EST "), a string in the ISO8601 format (for example:" 2009-11- 05T13: 15: 30Z ") or UNIX timestamp"

to convert your dates.