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

是否有方法获取对包含事件div的前景单元格的引用？

daydrender

事件似乎只提供对背景单元格的引用

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

我的第一次尝试使用了

daydrender

，但它会多次遍历日期（顶部的全天单元格与下面的常规单元格）。实际上我只想要全天的牢房

现在我使用的是

viewSkeletonRender

和

let$day=$（info.el）.find（'.fc day[data date=“'+date+'”））.eq（0）

前景单元格上似乎没有足够的信息以类似的方式选择它们

编辑：我当前使用

viewSkeletonRender

的实现存在问题，因此我改用了

datesRender

，但是在重新渲染日历时，我的所有自定义DOM都会被破坏。因此，我又回到了使用

daydrender

的时候，使用了与上面提到的类似的技术

以下是我试图实现的目标（全天单元格中列出的员工轮班时间，而不是日历中用于约会的实际事件）：

---

我没有尝试使用回调将这个额外的班次信息直接添加到DOM中，而是创建了一个事件源，该事件源由一个events函数提供，该函数获取员工班次，按天分组，然后每天返回一个全天事件

通过将背景和边框颜色设置为

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

---

eventRender将为您获取每个单独的事件（每个事件执行一次，就像dayRender每天执行一次一样）。但是，当你有了事件元素后，你想对它们做什么呢？我正试图做这样的事情，员工的班次列在最上面，而不是作为日历中的实际事件。编辑：哦，无法将图像粘贴到此处。我将把它添加到问题中。你是如何传递轮班数据的？通过事件源提要？或者其他方式？我希望使用

datesRender

获取视图中的每个班次，但当前获取当前在

dayRender

中呈现的当天的所有班次。所以它没有提供给日历，我只是获取并插入到DOM中。我想我应该提供它作为一个事件源，每天有一个人工全天事件，我显示一个事件中的所有变化，并从中删除样式。然后我就可以使用

eventRender

了，不用担心会弄乱DOMI，我最终按照我在上一篇评论中所描述的做了，并为我的问题创建了一个答案，详细说明了它是如何工作的。@ADyson谢谢。对于任何可能遇到这种情况的人来说，这种方法的工作原理有一个令人烦恼的地方。在event render回调中，在不需要的情况下删除event元素并不完美，因为当天的其他事件将被定位为移除的事件仍然存在于DOM中。最后，我为我的事件对象创建了一个简化的

title

属性，并使用它来代替删除元素。

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