时间戳

首页 > 解决方案 > 如何获取特定日期的前景元素？

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

问题描述

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

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

我的第一次尝试使用dayRender了多次日期（顶部的全天单元格与下面的常规单元格）。我实际上只想要全天牢房。

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

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

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

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

在此处输入图像描述

标签： fullcalendar

解决方案

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

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

推荐阅读