如何在 FullCalendar v4 中仅选择可见事件答案

【问题标题】：How to select only visible event in FullCalendar v4如何在 FullCalendar v4 中仅选择可见事件
【发布时间】：2019-01-21 17:57:56
【问题描述】：

我想在 React FullCalendar v4 视图中获取所有可见事件。我在日历实例上找不到任何只过滤可见事件的属性。不过，我可以获取所有事件。

无法仅获取可见事件，我的想法是通过可见范围过滤掉所有事件。但是我也无法获得那个可见范围。我试过calendar.view，calendar.getView()，……它们都不存在。这是暂时缺少方法/属性还是我遗漏了什么？

【问题讨论】：

没有看到您的代码或任何错误消息，很难准确地理解问题所在。 getView() 方法肯定存在，如果您在代表当前日历的有效 JS 对象上调用它。然后您可以运行clientEvents() 并使用视图的开始和结束日期作为过滤器来获取当前视图中可见的所有事件。
您的 getView()link 链接到 v3 文档。这是 v4 的getView() 方法。它存在于文档中，但它可能尚未在 v4 alpha 版本中实现吗？我无法发布 codepen 示例，因为我还无法链接 fullcalendar@alpha-4 包。另外，我无法向 SO 添加fullcalendar-v4 标签。
您仍然没有解释当您尝试使用 v4 中的 getView() 方法时会发生什么，或者显示您尝试使用它的任何代码。您无需发布完整的代码笔，只需在您的问题中包含相关的代码示例，然后描述您看到的精确行为 - 例如控制台错误消息或其他。所以我不知道你是在错误的对象上调用方法，还是断章取义，或者是否有更深层次的问题。
P.S.发表上述评论后，我发现：this codepen 使用 Alpha 4。基于此，我想说该方法尚未实现 - 检查“自定义按钮 1”的代码和出现时出现的控制台消息你尝试运行它。相比之下，如果您尝试运行“changeView”方法（例如），它可以正常工作。我猜对于 alpha 版本来说并不完全令人惊讶。你可能只需要耐心等待。我不是 fullCalendar 项目的一部分，所以我不知道路线图是什么，也许可以查看 GitHub。
console.log(this.state.calendar.getView()) 错误为'getView' is not a function。所以确实，结论应该是它还没有实现。这里的问题是 v4 中没有 jQuery 对于 React 开发人员来说是绝对必须的。所以是的，我必须耐心等待。不过，感谢 codepen 链接。

标签： reactjs fullcalendar fullcalendar-4

【解决方案1】：

FullCalendar v4 现在是一个完整版本，这是仅获取可见事件的方法：

const visibleEvents = calendar.getEvents().filter(event => {
    const s = calendar.view.activeStart, e = calendar.view.activeEnd
    if (event.start > e || event.end < s) return false
    return true
})

【讨论】：

谢谢！官方文档仍然只显示 v3 如何获取视图的开始或结束。

【解决方案2】：

我知道这是一篇较旧的帖子，问题并不是专门关于调用 getView() 方法。但是，我认为如果其他人遇到此问题，这可能会有所帮助。因此，为了让我看似使用 React Fullcalendar 模仿 getView() 调用，我做了类似于下面的操作。

let calendarApi = this.calendarRef.current.getApi();
console.log(calendarApi.view.type);

这意味着我可以检查视图是“dayGridMonth”还是“listWeek”。希望这会有所帮助。

【讨论】：