web-dev-qa-db-fra.com

fullcalendar ajoute des événements dynamiquement

J'essaie de créer dynamiquement des événements dans mon calendrier complet.

J'ai:

$('#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()}));
                }
            })

J'ai une donnée var, qui est un tableau qui contient toutes les dates des événements. Je veux insérer ceci dans les événements de la même manière que j'ai inséré data [0], data [1], etc., mais de manière dynamique pour toutes les dates.

J'ai essayé de faire une 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'
                                },
                            ],

Mais cela ne fonctionne pas dans la liste.

Quelqu'un sait comment je peux faire ça?

javascriptjqueryfullcalendar
7
anubis

après avoir rendu le calendrier complet, vous pouvez ajouter des événements de manière dynamique.

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

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

Je cherchais depuis un moment et j'ai trouvé une possibilité.

C'était très facile à la fin ...

Je laisse cela ici, peut-être que quiconque est intéressé.

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

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

Vous pouvez ajouter dynamiquement une source d'événements. Une source d’événements est une URL qui peut par exemple renvoyer des données JSON.

Peut-être qu'il suffirait peut-être que vous déclenchiez l'événement refetch après avoir modifié les données de l'événement.

.fullCalendar( 'refetchEvents' )

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

4
Marcel Burkhard

Que diriez-vous de faire comme il est dit sur l'exemple de site Web:

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

Ajoutez donc l'événement, puis utilisez ce que vous voulez ajouter au backend.

Ou vous pouvez ajouter l'événement au backend, puis renvoyer le nouvel identifiant de la base de données, puis l'ajouter à la timeline, de sorte que vous ayez les identifiants corrects.

Ou mettez à jour l'identifiant avec le message de retour, peu importe ce qui fait vibrer votre bateau.

0
Jannunen

(La solution acceptée perdra l'événement si vous faites quelque chose de compliqué; l'événement ajouté est éphémère et disparaîtra spontanément si vous clignez trop des yeux. Cette solution est robuste et fonctionnera si vous faites des choses plus compliquées.)

Le support des événements persistants est un peu inélégant. Vous devrez peut-être vider, recharger ET afficher l'état entier du calendrier ...:

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

Démo:

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

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

0
ninjagecko