FullCalendar - Get Background event on dayClick

Question

I'm currently trying to get an event (type of background) when the DayClick is trigger. I can't use the EventClick trigger because of the background type (I don't know why but nothing happen in my case, something wrong from FullCalendar ?).

This is my code for the init :

$('#calendarRoomUnavailable').fullCalendar({
        height: 'auto',
        header: {
            left : '',
            center: 'title',
            right: ''
        },
        defaultView: 'year',
        defaultDate: getDateFilterRoomAvailable(),
        lang: 'fr',
        firstDay: 1,
        columnFormat: 'ddd D/M',
        selectable : false,
        weekends: false,
        navLinks : false,
        events: basePath + '/agenda/datalist/room_available',
        viewRender: function (view, element) {

        },
        eventRender: function(event,element){
            if(event.rendering === "background"){
                element.data(event); //store the event data inside the element
            }
        },
        dayClick: function (date, jsEvent, view) {
            console.log(jsEvent)
        },
        editable:false,
    });

Quick look

What I want:

When I click on a day, I want the get the event(background) related to the day (I've got only one event per day in my calendar).

Currently I'm working with the eventRender + dayClick :

 eventRender: function(event,element){
            if(event.rendering === "background"){
                element.data(event); //store the event data inside the element
            }
        },
 dayClick: function (date, jsEvent, view) {
            console.log(jsEvent)
[...] 
}

With the console.log JSEvent on the DayClick, I know it get me the wrong <td> : Img

Because, when I try to get the target <td> with the class fc-bgevent, nothing happens :

dayClick: function (date, jsEvent, view) {
            console.log(jsEvent)
            if (jsEvent.target.classList.contains('fc-bgevent')) {
                console.log($(jsEvent.target).data());
            }

If I try to go to the HTML element target getted by the jsEvent, it shows me the wrong <td> and I can't do anything with that ...

HTML Debug

Does someone know how to bypass that ?

Thanks !

Code to get one event from a date :

function getEventFromDate(date) {
        var allEvents = [];
        allEvents = $('#calendarRoomUnavailable').fullCalendar('clientEvents');
        var event = $.grep(allEvents, function (v) {
            return +v.start === +date;
        });
        if (event.length > 0) {
            return event[0];
        } else {
            return null;
        }
    }

" can't use the EventClick trigger because of the background type (I don't know why..." fullcalendar.io/docs/eventClick says "eventClick will not be triggered for background events." — ADyson
The problem with your alternative approach is the the eventRender stores the data in the event element, not the day element. So you can't match them up. Since you know there'll only be one element per day, simply use the fullcalendar.io/docs/clientEvents method to retrieve events whose start date matches the date parameter in the dayClick callback. You'll only get one, and it'll be your background event. — ADyson
@ADyson hi again, I meant by that, I don't know why the function to get an event background is not implemented while the method to get an event is done. — Cav Flo
I don't know either. You'd have to ask the maintainers of fullCalendar why they wrote it like that. I would guess that they intended that background events were just to highlight areas on the calendar and that people would not want to use them for anything more active than that, but maybe their assumption was wrong! — ADyson
@ADyson currently it work like that, but at each click I call a function to get all events and if the date match, I'll return it. But it takes one seconde to make it, and I want to optimise that. POST update for the code — Cav Flo

Cav Flo Cav Flo · Accepted Answer · 2018-09-24T12:41:55

After the @ADyson comments, my final function look like this :

function getEventFromDate(date) {
        var eventToReturn = null;

        $('#calendarRoomUnavailable').fullCalendar('clientEvents', function(event) {
            var event_start = formatDateYmd(new Date(date),'-');
            var date_formated = formatDateYmd(new Date(event.start),'-');

            if(event_start === date_formated) {
                eventToReturn = event;
            }
        });

        return eventToReturn;
    }

with a small function to get a formated date without library like Moment.js or Date.js:

function formatDateYmd(value,$delimiter)
    {
        var year = value.getFullYear();
        var month = (value.getMonth()+1) < 10 ? '0'+(value.getMonth()+1) : (value.getMonth()+1);
        var day = value.getDate() < 10 ? '0'+value.getDate() : value.getDate();
        return year  + $delimiter +
            month + $delimiter +
            day;
    }

I hope to find something more performant, but this one divide the execution time by two.

Keep an eye on it

Thanks again.

FullCalendar - Get Background event on dayClick

1 Answers