Fullcalendar dynamically add events

Question

I am trying to create events in my full calendar dynamically.

I have:

$('#calendar').fullCalendar({ viewRender: function (view) { var h; if (view.name == "month") { h = NaN; } else { h = 2500; // high enough to avoid scrollbars } $('#calendar').fullCalendar('option', 'contentHeight', h); }, lang: 'fr', events: [ { title: '8 présents', start: data[0] }, { title: '8 excusés', start: data[1] }, { title: '8 excusés', start: '2015-01-08' }, { title: '8 présents', start: '2015-01-08' }, ], dayClick: function (date, jsEvent, view) { window.location.replace(Routing.generate('dateChoisie', {date: date.format()})); } }) 

I have var data, which is an array containing all the dates of the events. I want to insert this into events the same way as I inserted data [0], data [1], etc., but dynamically for all dates.

I tried to do for :

 events: [ for (var i = 0, max = data.Lenght; i < max; i++) { { title: '8 présents', start: data[i] }, } { title: '8 excusés', start: data[1] }, { title: '8 excusés', start: '2015-01-08' }, { title: '8 présents', start: '2015-01-08' }, ], 

But it does not work inside the list.

Does anyone know how I can do this?

Answer 1

after rendering the full calendar, you can dynamically add events.

 var event={id:1 , title: 'New event', start: new Date()}; $('#calendar').fullCalendar( 'renderEvent', event, true); 

Answer 2

Source: http://fullcalendar.io/docs/event_data/addEventSource/

You can dynamically add an event source. An event source is a URL that can, for example, return json data.

Perhaps you may have enough to trigger the refetch event after changing the event data.

 .fullCalendar( 'refetchEvents' ) 

Source: http://fullcalendar.io/docs/event_data/refetchEvents/

Answer 3

I searched for a while and I found an opportunity.

In the end it was very easy ...

I admit it is here, maybe someone is interested.

 for (var i in data) var monthSource = new Object(); monthSource.title = data[i]+' présents'; monthSource.start = i; // this should be date object monthSource.end = new Date(y, m, d); //to now month[a] = monthSource; a++; } $('#calendar').fullCalendar({ viewRender: function (view) { $('#calendar').fullCalendar( 'removeEvents'); $('#calendar').fullCalendar('addEventSource', month); } 

Answer 4

Well thank you

Now I have:

 <script> $(document).ready(function () { var events = new array(); event = new Object(); event.title = 'aaaa'; event.start = data[0]; events.push(event); $.ajax({ type: 'get', url: Routing.generate('recupereDates'), success: function (data) { $('#calendar').fullCalendar({ viewRender: function (view) { var h; if (view.name == "month") { h = NaN; } else { h = 2500; // high enough to avoid scrollbars } $('#calendar').fullCalendar('addEventSource', events); $('#calendar').fullCalendar('option', 'contentHeight', h); }, lang: 'fr', events: [ { title: '8 présents', start: data[0] }, { title: '8 excusés', start: data[1] }, { title: '8 excusés', start: '2015-01-08' }, { title: '8 présents', start: '2015-01-08' }, ], dayClick: function (date, jsEvent, view) { window.location.replace(Routing.generate('dateChoisie', {date: date.format()})); } }) } }); }) 

But now I have:

Uncaught ReferenceError: array not defined

Do you know why?