Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Events not displayed in fullcalendar js

Please any one help me to find what is going wrong in code. I used fullcalendar.js for calendar event.

I want to show the events in 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 is:

[{ 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 is not displayed in calendar. if i gave directly assign the value then it displaying the event.

Example:

events: [
    { 
        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 to rectify my error.

like image 564
sara Avatar asked Apr 22 '14 06:04

sara


People also ask

How do I set events in Fullcalendar?

Here is an example of how to specify an array of events: var calendar = new Calendar(calendarEl, { events: [ { title : 'event1', start : '2010-01-01' }, { title : 'event2', start : '2010-01-05', end : '2010-01-07' }, { title : 'event3', start : '2010-01-09T12:30:00', allDay : false // will make the time show } ] });

What is event in Fullcalendar?

An “event source” is anything that provides FullCalendar with data about events. It can be a simple array, an event-generating function that you define, a URL to a json feed, or a Google Calendar feed. Event Objects can have “options” associated with them.


2 Answers

Calendar needs to be told to update after a data change. Try:

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

when nevent is ready.

EDIT:

Accept the input as JSON object not a string:

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

Note that the JSON must be in correct format with quotes 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"}]
like image 65
kravits88 Avatar answered Oct 02 '22 01:10

kravits88


in nevent value, start (and end) according to documentation should be: "you may specify a string in IETF format (ex: "Wed, 18 Oct 2009 13:00:00 EST"), a string in ISO8601 format (ex: "2009-11-05T13:15:30Z") or a UNIX timestamp"

so you have to convert your dates.

like image 29
nikos.svnk Avatar answered Oct 02 '22 02:10

nikos.svnk