FullCalendar - 在 dayClick 上获取背景事件答案

【问题标题】：FullCalendar - Get Background event on dayClickFullCalendar - 在 dayClick 上获取背景事件
【发布时间】：2019-02-27 18:46:41
【问题描述】：

我目前正在尝试在触发 DayClick 时获取事件（background 类型）。由于背景类型，我无法使用 EventClick 触发器（我不知道为什么，但在我的情况下什么也没发生，FullCalendar 出了什么问题？）。

这是我的初始化代码：

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

我想要什么：

当我点击某一天时，我想要获取与该天相关的事件（背景）（我的日历中每天只有一个事件）。

目前我正在使用 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

因为，当我尝试使用 fc-bgevent 类获取目标 <td> 时，什么也没有发生：

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

如果我尝试转到由jsEvent 获取的 HTML 元素 target，它会向我显示错误的 <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;
        }
    }

【问题讨论】：

" 不能使用 EventClick 触发器，因为背景类型（我不知道为什么..." fullcalendar.io/docs/eventClick 说“eventClick 不会被触发背景事件。”
您的替代方法的问题是eventRender 将数据存储在 event 元素中，而不是 day 元素中。所以你无法匹配它们。由于您知道每天只有一个元素，因此只需使用 fullcalendar.io/docs/clientEvents 方法来检索开始日期与 dayClick 回调中的 date 参数匹配的事件。你只会得到一个，这将是你的背景事件。
@ADyson 再次嗨，我的意思是，我不知道为什么在获取事件的方法完成时没有实现获取事件背景的功能。
我也不知道。您必须询问 fullCalendar 的维护者为什么要这样写。我猜他们的意图是背景事件只是为了突出日历上的区域，人们不想将它们用于比这更活跃的事情，但也许他们的假设是错误的！
@ADyson 目前是这样工作的，但是每次点击我都会调用一个函数来获取所有事件，如果日期匹配，我会返回它。但它需要一秒钟的时间，我想优化它。 POST 更新代码

标签： fullcalendar fullcalendar-3

【解决方案1】：

@ADyson cmets 之后，我的最终函数如下所示：

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

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

Keep an eye on it

再次感谢。

【讨论】：