FullCalendar - получить фоновое событие на dayClick - PullRequest
Новая
       10

FullCalendar - получить фоновое событие на dayClick

0 голосов
/ 24 сентября 2018

В настоящее время я пытаюсь получить событие (тип background), когда срабатывает DayClick.Я не могу использовать триггер EventClick из-за типа фона (я не знаю почему, но в моем случае ничего не происходит, что-то не так с FullCalendar?).

Это мой код для 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,
    });

Быстрый просмотр

Что я хочу:

Когда я нажимаю на день, я хочу получить событие (фон), связанное сдень (в моем календаре только одно событие в день).

В настоящее время я работаю с 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)
[...] 
}

С JSEvent console.log наDayClick, я знаю, что это неправильно меня понимают <td>: Img

Потому что, когда я пытаюсь получить цель <td> с классом fc-bgevent, ничего не происходит: 

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

Если я пытаюсь перейти к элементу HTML target, полученному jsEvent, он показывает мне неправильный <td>, и я ничего не могу с этим поделать ...

HTML Debug

Кто-нибудь знает, как это обойти?

Спасибо!

Код для получения одного события из даты: 

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

1 Ответ

0 голосов
/ 24 сентября 2018

После комментариев @ADyson моя последняя функция выглядит следующим образом: 

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

с небольшой функцией для получения форматированной даты без библиотеки , такой как Moment.js или 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;
    }

Я надеюсь найти что-то более производительное, но этот разделит время выполнения на два.

Следите за этим

Еще раз спасибо.

...