fullcalendar - FullCalendar - 在 dayClick 上获取背景事件

Question

我目前正在尝试在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)
[...] 
}

使用 DayClick 上的 console.log JSEvent，我知道它让我错了<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());
            }

如果我尝试访问target由获取的 HTML 元素jsEvent，它会向我显示错误<td>，我对此无能为力...

HTML 调试

有人知道如何绕过它吗？

谢谢 ！

从日期获取一个事件的代码：

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

Answer 1

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

我希望找到更高效的东西，但是这个将执行时间除以二。

密切关注它

再次感谢。