In the FullCalendar dayClick event, can I get the events that already exist in clicked date?

Question

In the FullCalendar dayClick event, can I get the events that already exist in clicked date?

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

Let me explain a little about my project I'm writing a simple php site that allow user to add/edit event on calendar.

• Only single event can add to a date.
• If user click on empty date, New event popup will show (I use dayclick event).
• If user click date with existing event, Edit event popup will show (I use eventclick event).

The problem is when user click outside of event area (upper area or bottom area) of a date with existing event, it raise dayclick instead of eventclick. How can I trigger eventclick event and skip dayclick event if there is existing event in the date?

Answer 1

Are your events stored on the client side or on the server side? If on the client side, this should work specifically if you want the event in that clicked time:

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

This will give events that overlap the clicked time and are stored on the client side. For the all-day slot, it will give all events overlapping that day.

If you want all events on that date itself, regardless of whether the allDay slot or a time slot was clicked.

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

If your events are stored on the server, you'll want to take the date provided in your dayClick callback and use it to construct a call to your server to get the info in whatever format you need.

EDIT If doing a round trip or trying to get the information other ways

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

And if you don't want the round trip, you can also take a look at what happens in, say, refetchEvents in fullCalendar.js. If you don't mind diverging from the fullCalendar trunk, you can save off fetched events somewhere so that you aren't doing a bunch of DOM manipulation (depending on the number of events, as they get large that will get unwieldy).

Answer 2

I've just come across this issue myself whilst finding a solution for entering public holidays on to a calendar. I found this to be a good solution for full day events. I hope this can help someone else further down the line.

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

Answer 3

Exested answers didn't work for me so there is working code:

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
}

Answer 4

This is is you need all your events for the current day in another function:

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

Answer 5

You can use the Moment library. For example:

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

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