CODEWITHSUNDEEP
javascriptfullcalendar
zawmn83
zawmn83

Reputation: 809

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

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.

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?

Upvotes: 14

Views: 65989

Answers (5)

Gabriel Zulian
Gabriel Zulian

Reputation: 1

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/

Upvotes: 0

Krizzy
Krizzy

Reputation: 77

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

Upvotes: 7

derdida
derdida

Reputation: 14904

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

Upvotes: 0

Alex
Alex

Reputation: 8072

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
}

Upvotes: 0

justkt
justkt

Reputation: 14776

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).

Upvotes: 19

Related Questions