CODEWITHSUNDEEP
javascriptjqueryfullcalendar
anubis
anubis

Reputation: 1505

fullcalendar add events dynamically

I'm 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 a var data, which is an array that contains all the dates of the events. I want to insert this in the events in the same way I inserted data[0], data[1], etc, but dynamically for all the dates.

I have tried to do a 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 doesn't work inside the list.

Anybody know how I can do this?

Upvotes: 11

Views: 82267

Answers (7)

Tyler Dane
Tyler Dane

Reputation: 1069

Simple examples of adding events can be found in the example-projects repo. There's currently examples for angular, vue, react, and bootstrap.

Wanted to mention this for anyone not using jquery who stumbles upon this

Upvotes: 0

Mehmet Samğar
Mehmet Samğar

Reputation: 1

although it is not specified on the fullcalender site, it is necessary to assign a value to the "allday" parameter to be able to add new events dynamically. If you set this value to "false", it will not add the event to the AllDay row. If you do "true" it will add to the AllDay row.

var event = {
        title: 'New Event',
        start: Date(Date.now()),
        backgroundColor: App.getLayoutColorCode('purple'),
        allDay: false
    }
    jQuery('#calendar').fullCalendar('renderEvent',event,true);

or 

var originalEventObject = jQuery(this).data('eventObject');
var copiedEventObject = jQuery.extend({}, originalEventObject);

copiedEventObject.title = "New Event";
copiedEventObject.start = date;
copiedEventObject.className = jQuery(this).attr("data-class");
copiedEventObject.backgroundColor = App.getLayoutColorCode('purple');
copiedEventObject.allDay = false;
jQuery('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

Upvotes: 0

Jannunen
Jannunen

Reputation: 394

How about doing as it says on the website example:

https://fullcalendar.io/docs/renderEvent-demo

So add the event, and then use whatever you want to add that to the backend.

Or you can add the event to backend, then return the database's new id and then add it to the timeline, so you'll have the ids right.

Or update the id with return message, whatever rocks your boat.

Upvotes: 0

ninjagecko
ninjagecko

Reputation: 91094

(The accepted solution will lose the event if you do anything complicated; the event added is ephemeral and will spontaneously disappear if you blink too hard. This solution is robust and will work if you do more complicated things.)

Support for persistent events is a bit inelegant. You may have to dump, reload, AND render the entire calendar state...:

var CAL, EVENTS;

$(document).ready(function() {
    // set up calendar with an EventSource (in this case an array)
    EVENTS = [...];
    $('#calendar').fullCalendar({...});

    // calendar object
    CAL = $('#calendar').fullCalendar('getCalendar');
    // extend object (could be its own function, etc.)
    CAL.refresh = function() {
        CAL.removeEvents();
        CAL.addEventSource(EVENTS);
    }

    // finish setting up calendar
    CAL.refresh();
});

Demo:

EVENTS.pop();  // remove last event
refresh();     // refresh calendar; last event no longer there

see https://stackoverflow.com/a/18498338

Upvotes: 3

Mohammed Safeer
Mohammed Safeer

Reputation: 21535

after rendering the full calendar you can add events dynamically.

var event={id:1 , title: 'New event', start:  new Date()};

$('#calendar').fullCalendar( 'renderEvent', event, true);

Upvotes: 38

anubis
anubis

Reputation: 1505

I was searching for a while and I have found an possibility.

It was very easy at the end...

I let this here, maybe anybody is interested in.

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);
}

Upvotes: 9

Marcel Burkhard
Marcel Burkhard

Reputation: 3523

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

You can dynamically add an event source. An Event Source is an url which can for example return json data.

Maybe it might be sufficient for you to fire the refetch event after you changed the event data.

.fullCalendar( 'refetchEvents' )

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

Upvotes: 7

Related Questions