如何在Fullcalendar Timegrid视图中显示非连续日期？

Question

我已经在我的react项目中成功地实现了带Timegrid视图的Fullcalendar。

我现在想显示非连续日期。默认情况下，可以通过以下两种方式来显示自定义的连续日期 范围 或以 期限.

现在，我想显示最早日期和最晚日期之间的全部范围，并为列元素注入一个类，然后用 display: none. 殊途同归

由于我的用例没有任何内置的东西，有什么最好的方法来实现这个目标呢？"有没有一种方法可以在呈现日期之前过滤日期？"。

注意：有一个 相关问题 这并没有解决我的问题。

Answer 1

我通过使用以下方法解决了我的问题 日字头 和 日间电池 渲染钩。(可从FullCalendar 5获得)

---

1. 首先，我设置了从最早的日期到最近的日期的渲染范围，通过添加 visibleRange 支持FullCalendar。

visibleRange={{
                start: startDate,
                end: endDate,
            }}

注意： endDate 是排他性的。

2. 然后，我创建了一个包含所有事件日期的数组。

const eventDatesList = [];
    events.forEach((event) => {
        eventDatesList.push(event.start);
    });

3. 最后，我创建了一个回调 handleDayDidMount该回调将在每次渲染Day-Header和Day-Cell时运行，并添加到Day-Header和Day-Cell对应的道具中。

dayCellDidMount={(arg => handleDayDidMount(arg))}
dayHeaderDidMount={(arg => handleDayDidMount(arg))}

注意：同一个回调可以用于两个道具。

如果渲染的日期不在我们的日期列表中，我们就从dom中删除相应的元素。

const handleDayDidMount = ({date, el}) => {
        let currentDate = DateTime.fromJSDate(date).toFormat('yyyy-MM-dd')
        if (!eventDatesList.includes(currentDate)) {
            el.remove()
        }
    }

---

4. 剩下的唯一问题是外观问题：所有日期的宽度仍然会被渲染。

为了解决这个问题，我们可以使用 viewDidMount props，并使用回调来动态改变控制宽度的DOM元素。

viewDidMount={(arg) => handleMount(arg)}

这些元素是 div.fc-timegrid-body 和 div.fc-timegrid-slots table所以在回调中我有以下内容。

const handleMount = ({ el }) => {
        // Adapt column width to number of dates present
        const timegridBody = el.querySelectorAll('div.fc-timegrid-body');
        const timegridSlots = el.querySelectorAll(
            'div.fc-timegrid-slots table',
        );

        // Update width based on rendered dates number
        let newWidth = eventDatesList.length * dayMinWidth;

        timegridBody[0].style['min-width'] = `${newWidth}px`;
        timegridSlots[0].style['min-width'] = `${newWidth}px`;
    };

注意： dayMinWidth 是一个变量，设置为 日用品.

Et voilà!

如果以后我改变方法，我会更新这个答案。