web-dev-qa-db-fra.com

Dans l'événement FullCalendar dayClick, puis-je obtenir les événements qui existent déjà dans la date du clic?

Dans l'événement FullCalendar dayClick, puis-je obtenir les événements qui existent déjà dans la date du clic?

http://arshaw.com/fullcalendar/docs/mouse/dayClick/

Permettez-moi de vous expliquer un peu mon projet. J'écris un site php simple qui permet à l'utilisateur d'ajouter/modifier un événement sur le calendrier.

  • Un seul événement peut être ajouté à une date.
  • Si l'utilisateur clique sur une date vide, le nouvel événement apparaîtra (j'utilise l'événement dayclick).
  • Si l'utilisateur clique sur la date avec l'événement existant, la fenêtre d'édition d'événement s'affichera (j'utilise l'événement eventclick).

Le problème est que lorsque l'utilisateur clique en dehors de la zone d'événement (zone supérieure ou zone inférieure) d'une date avec un événement existant, il déclenche dayclick au lieu de eventclick. Comment puis-je déclencher un événement eventclick et ignorer un événement dayclick s'il existe déjà un événement dans la date?

javascriptfullcalendar
12
zawmn83

Vos événements sont-ils stockés côté client ou côté serveur? Si côté client, cela devrait fonctionner spécifiquement si vous voulez que l'événement se produise à ce moment cliqué:

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
            $('#calendar').fullCalendar('clientEvents', function(event) {
                if(event.start <= date && event.end >= date) {
                    return true;
                }
                return false;
            });
    }
});

Cela donnera des événements qui chevauchent le temps cliqué et sont stockés du côté client. Pour le créneau horaire d'une journée entière, tous les événements se chevaucheront ce jour-là.

Si vous voulez que tous les événements soient à cette date, que vous ayez ou non cliqué sur le créneau AllDay ou sur un créneau horaire.

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
            if(!allDay) {
                // strip time information
                date = new Date(date.getFullYear(), date.getMonth(), date.getDay());
            }
            $('#calendar').fullCalendar('clientEvents', function(event) {
                if(event.start <= date && event.end >= date) {
                    return true;
                }
                return false;
            });
    }
});

Si vos événements sont stockés sur le serveur, vous voudrez utiliser la date fournie dans votre rappel dayClick et l'utiliser pour créer un appel sur votre serveur afin d'obtenir les informations dans le format souhaité.

EDITSi vous effectuez un aller-retour ou essayez d'obtenir les informations par d'autres moyens

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
            var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0).getTime();
            var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 23, 59, 59).getTime();
            var cache = new Date().getTime();
            $.getJSON("/json-events.php?start="+startDate+"&end="+endDate+"&_="+cache,
                function(data) {
                    // do stuff with the JSOn data
                }
    }
});

Et si vous ne souhaitez pas faire l'aller-retour, vous pouvez également jeter un coup d'œil à ce qui se passe dans, par exemple, refetchEvents in fullCalendar.js. Si cela ne vous dérange pas de vous écarter du tronc fullCalendar, vous pouvez enregistrer les événements récupérés quelque part afin d'éviter toute manipulation de DOM (selon le nombre d'événements, car ils deviennent volumineux et difficiles à manier).

17
justkt

J'ai moi-même rencontré ce problème tout en trouvant une solution pour intégrer les jours fériés à un calendrier. J'ai trouvé que c'était une bonne solution pour des événements d'une journée complète. J'espère que cela pourra aider quelqu'un d'autre plus tard.

$('#calendar').fullCalendar({                
    eventClick: function (event) {
        ShowEditScreen(event.id);
    },
    dayClick: function (date) {
        var events = $('#calendar').fullCalendar('clientEvents');
        for (var i = 0; i < events.length; i++) {
            if (moment(date).isSame(moment(events[i].start))) {
                ShowEditScreen(events[i].id);
                break;
            }
            else if (i == events.length - 1) {
                ShowCreateNew(date);
            }
        }
    }
});
7
Krizzy

Les réponses examinées ne fonctionnaient pas pour moi, alors il existe un code fonctionnel:

dayClick: function (date, jsEvent, view) {
    var count = 0;

    date = date.toDate();
    var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
    var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);

    $('#calendar').fullCalendar('clientEvents', function (event) {
            if (event.start.toDate() >= startDate && event.start.toDate() <= endDate
                || event.end.toDate() >= startDate && event.end.toDate() <= endDate) {
                        count++;
                    }
                });
    //count - number of events on this day
}
0
Alex

Vous pouvez utiliser la bibliothèque Moment. Par exemple:

$('#endDate').val(moment(endDate).format('YYYY-MM-DD hh:mm:ss'));

http://momentjs.com/docs/#/displaying/format/

0
Gabriel Zulian

C’est vous qui avez besoin de tous vos événements du jour actuel dans une autre fonction:

            var date = $('.js-calendar').fullCalendar('getDate');
            date = date.toDate();
            var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
            var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
            var todaysEvents = $('.js-calendar').fullCalendar('clientEvents', function(event) {
                if (event.start.toDate() >= startDate && event.start.toDate() <= endDate
                    || event.end.toDate() >= startDate && event.end.toDate() <= endDate) {
                    return true
                }
            });
0
derdida