如何获取特定日期的前景元素？

Question

有没有办法获取对包含事件 div 的前景单元格的引用？ dayRender 事件似乎只提供对背景单元格的引用。

我想列出某个日期的其他非事件数据，而不会被事件掩盖或截断。

我的第一次尝试使用了 dayRender，但它经历了多次日期（顶部的全天单元格与下方的常规单元格）。我实际上只想要全天候的细胞。

现在我正在使用 viewSkeletonRender 和 let $day = $(info.el).find('.fc-day[data-date="' + date + '"]').eq(0)。

前景单元格的信息似乎不足，无法以类似方式select它们。

编辑：我当前使用 viewSkeletonRender 的实现有问题，所以我改用 datesRender，但是我所有的自定义 DOM 在重新渲染日历时都会被销毁。所以我回到使用 dayRender 和我上面提到的类似技术。

这就是我想要完成的（全天单元格中列出的员工轮班时间，而不是日历中用于约会的实际事件）：

Answer 1

我没有尝试使用回调将这些额外的班次信息直接添加到 DOM 中，而是最终创建了一个由事件函数提供的事件源，该事件函数获取员工班次，按天对他们进行分组，然后returns 每天一个全天活动。

通过将背景和边框颜色设置为 inherit，将 editable 设置为 false，并使用 eventRender设置 HTML（如果在我不想显示班次的视图中，则完全删除该元素）。

这是事件源和事件生成函数：

{
    id: 'staff-hrs',
    events: async (info, success, failure) => {
        let {shifts} = await ScheduleAPI.get_shifts_in_date_range(info.start, info.end)

        // generate HTML for each shift and group by date
        let dates = {}

        shifts.forEach((shift) => {
            let time = `${shift.start} - ${shift.end}`
            let name = `${shift.first_name} ${shift.last_name}`

            if (shift.start == '00:00:00' && shift.end == '00:00:00') {
                time = 'All-day'
            }

            let $div = $('<div />')
            let $time = $('<strong />').html(time)
            let $name = $('<span />').html(name)

            if (shift.date in dates === false) {
                dates[shift.date] = []
            }

            dates[shift.date].push(
                $div.append($time ,' ', $name)
            )
        })

        // generate an all-day event for each date, with reference to the HTML els
        let events = []

        for (let date in dates) {
            events.push({
                id: `${date}-shifts`,
                start: `${date}T00:00:00`,
                allDay: true,
                editable: false,
                html: dates[date]
            })
        }

        return events
    },
    backgroundColor: 'inherit',
    borderColor: 'transparent'
}

这里是事件渲染回调函数

function handle_eventRender(info) {
    if (info.event.extendedProps.html) {
        if (info.view.type == 'listWeek' || info.view.type == 'dayGridMonth') {
            $(info.el).remove()
        } else {
            $(info.el).html(info.event.extendedProps.html)
        }
    }
}

如何获取特定日期的前景元素？

How can I get the foreground element for a specific day?

fullcalendar