1

我已经在我的反应项目中使用 Timegrid View 成功实现了 fullcalendar。

我现在正试图显示不连续的日期。默认情况下，可以按范围或按持续时间显示自定义连续日期。

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

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

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

4

1 回答 1

1

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

  1. visibleRange首先，我通过向FullCalendar添加道具来设置从最早日期到最晚日期呈现的范围：
visibleRange={{
                start: startDate,
                end: endDate,
            }}

注意：endDate是独家的。

  1. 然后我创建了一个包含所有事件日期的数组。
const eventDatesList = [];
    events.forEach((event) => {
        eventDatesList.push(event.start);
    });
  1. 最后，我创建了一个回调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()
        }
    }
  1. 剩下的唯一问题是装饰性的：仍然呈现所有天的宽度。

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

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

元素是div.fc-timegrid-bodyand 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`;
    };

注意：是一个设置为day propsdayMinWidth的变量。

瞧！

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

于 2020-06-05T09:19:04.013 回答