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

【问题标题】：How to show non consecutive dates in Fullcalendar Timegrid view?如何在 Fullcalendar Timegrid 视图中显示非连续日期？
【发布时间】：2020-06-04 12:07:17
【问题描述】：

我已经在我的 react 项目中使用 Timegrid View 成功实现了全日历。

我现在正在尝试显示不连续的日期。默认情况下，可以通过range 或duration 显示自定义连续日期。

现在，我正在考虑显示我最早和最晚日期之间的完整范围，并为列元素注入一个类并使用display: none 隐藏它们。（我意识到这远非最佳）

由于我的用例没有内置任何内容，因此实现这一目标的最佳方法是什么？有没有办法在日期被渲染之前过滤它们？

注意：有一个related question 不是我的地址。

【问题讨论】：

您可能必须通过克隆时间网格视图然后更改它来构建custom view，但我怀疑这并不容易。在花费时间之前，请仔细考虑此要求是否 100% 必要。
@ADyson 为此，我再次选择创建自定义视图。我通过在呈现日期时更改 DOM 找到了另一种解决方案。 (See my answer) 如果您发现需要改进的地方，欢迎提供任何反馈。
好吧，我没有意识到您使用的是 fullCalendar 5，因为它还没有完全发布。这本来是一件有用的事情。正如您现在发现的那样，它确实为您在日历外观方面提供了更大的灵活性。
我已经编辑了我的答案，包括我正在使用 Fullcalendar 5。

标签： reactjs fullcalendar fullcalendar-5

【解决方案1】：

我通过使用Day-Header 和Day-Cell Render Hooks 解决了我的问题。（可从 FullCalendar 5 获得）

首先，我通过在 FullCalendar 中添加 visibleRange 属性来设置从最早日期到最晚日期呈现的范围：

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

注意：endDate 是专有的。

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

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

最后，我创建了一个回调handleDayDidMount，它会在每次渲染Day-Header和Day-Cell时运行，并添加到Day-Header和Day-Cell对应的props中：

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

剩下的唯一问题是外观问题：仍然呈现所有天的宽度。

为了解决这个问题，我们可以使用 viewDidMount 属性并使用回调来动态更改控制宽度的 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 是一个设置为day props 的变量。

等等！

如果我将来改变我的方法，我会更新这个答案。

【讨论】：