问题标签 [fullcalendar-5]

我正在使用资源视图处理 react-fullcalendar。我的要求是我想在资源列表中删除事件，我能够成功地在日、周和月日历上删除事件。

请帮助我找到在资源名称上删除事件的方法。（我有预先定义时间的事件，所以当我尝试在资源上删除事件时，应该将那个资源 ID 附加到它，它会与我的 pre 一起显示在日历上-定义开始和结束时间。

我对 fullcalendar v5.3.2 及其选项有疑问。

我有以下设置。

单击下一个、上一个和今天按钮时，我正在尝试更改事件 url 并刷新日历。这是因为我想每月获取事件。

有可能做到吗？

此致，

虽然我是一名经验丰富的程序员，但我不能说我是一名 JavaScript 专家，而且我也刚刚开始尝试掌握 FullCalendar 的来龙去脉。因此，对于尚未掌握所有方面，尚未在文档中找到所有内容并且并不总是使用正确的术语，我提前道歉。

在我的特殊情况下，事件是从 JSON 提要加载的。使用复选框，我想显示和/或隐藏基于它们的事件extendedProps.type。为了防止不必要的服务器往返，我更喜欢一次加载所有类型的事件并向事件元素添加/删除类，允许我使用 CSS 以可维护的方式显示或隐藏它们。事实证明这比我预期的要难。

第一个挑战是向工具栏添加复选框。不幸的是，FullCalendar 似乎没有一种简单、标准的方式来向工具栏添加额外的行。<button>同样，除了常规类型的交互元素之外，似乎没有其他方法可以添加。因此，我最终使用<template>标签向工具栏添加了一个额外的元素并进行了一些额外的flexbox调整。

困难的部分是事件的显示和隐藏。重要的是要知道我的意图是使初始可见性状态可配置。我最初的想法是添加一个invisible类并使用display: none. 添加类的明显位置似乎是eventDidMount钩子。起初这似乎有效；在初始渲染之后，一些事件是可见的，而有些则不是。然而，当试图展示不可见的事件时，似乎什么也没有发生。visibility: invisible问题分析表明，当事件元素设置为 时，FullCalendar给事件的父元素添加了display: none。

不是这些问题的专家，我的解决方案是display: none将visibility: invisible. 现在，最初不可见的事件在切换其可见性时会显示出来，但还有另一个问题：不可见的事件确实占用了空间。因此，月视图显示具有大量空白空间的日单元格，而列表视图显示没有数据的行。

我能想到的第一件事是某种事件后渲染钩子，我可以在其中添加 adisplay: none到不可见元素。在搜索文档和 stackoverflow 问题后，我得出结论，它们不是这样的。乍一看，一些 stackoverflow 主题似乎提供了一个解决方案，但后来证明使用了不再支持的遗留方法或钩子。

我能想到的第二件事是计算挂载事件的数量，将它们与加载事件的数量进行比较，一旦挂载了所有事件，假设已经为事件分配了空间，为不可见事件添加一个额外的类，允许我display: none在我的样式表中设置一个。至少可以说，这是一个非常hacky的结构。让它更加骇人听闻的是，我找不到一种简单的方法来掌握加载的事件数量。所以我最终得到了丑陋的东西，在钩子中将计数器重置为零，并在loading钩子中添加加载事件的数量eventSourceSuccess。也许初始重置不是必需的，但我不确定eventSourceSuccess钩子被触发了多少次。

不幸的是，这也没有解决问题。显然，“挂载”并不意味着“添加到 DOM 并分配空间”。至少不是我期望的那样，它visibility: invisible仍然显示在事件的父元素上:(

走到这一步我花了很多时间，失望和沮丧的结合，我仍然没有足够的解决方案。缺少某种“在所有事件呈现之后”钩子感觉就像一个真正的缺点，以及一种简单的方法来获取加载的事件总数。更多用于自定义工具栏的句柄也将是一个很大的改进。

我被困住了。这很可能是因为我错过或误解了文档和 stackoverflow 中的内容。希望有人可以帮助我，并为我遇到的部分或全部问题指出正确的方向。

提前致谢。

我有两个事件源，配置如下：

我之前calender.render()这样设置它们：

这工作正常。初始渲染后，仅initiallyVisible显示事件。使用复选框，我可以切换每个事件类型的可见性，这几乎可以按预期工作。只有颜色没有按预期显示。使用标准主题，dayGridMonth视图中的项目符号显示在配置的color. 除此之外，事件以默认颜色显示，似乎忽略了事件源的textColor和backgroundColor。

我是否遗漏了文档中的某些内容，或者有什么明显的我做错了？

我正在使用 Fullcalendar V5。尝试在 resourceTimelineWeek 视图中将滚动时间设置为当前日期和时间时，仅时间工作正常，但我该如何设置日期滚动。

现在是 09:30，时间显示正确。但是日期是 10 月 1 日，在日历滚动视图上仍然是 9 月 27 日。

我正在通过设置根据更改的选择元素更新资源列表，this.calendarOptions.resources并且我还使用函数来获取事件。

当我将这些东西结合起来时，资源会显示出来，并且似乎会获取事件，但它们不会显示在时间轴中。我也在calendarAPI.refetchEvents()更新资源后尝试过，看看是否有什么不同。事件已获取，但仍不显示。

如果我修复资源而不更新它，日历事件将成功显示。

任何可能发生这种情况的想法都非常感谢。

获取事件：

获取资源：

我有一个Reactjs FullCalendar，我想要什么时候，我悬停在天的单元格上，背景也会是蓝色的，这个单元格的时间会出现。

我试试这个：

但是，我得到：

https://i.stack.imgur.com/sCKOq.gif

但是，我想像这样独立地将每个单元格悬停在每一天：

https://i.stack.imgur.com/v9FSh.gif

他的代码是：

我该如何解决？

我正在尝试使用复选框显示和隐藏事件，我在堆栈上看到另一个问题并尝试实现此处解释的相同配置： https ://stackoverflow.com/a/62865578/5376930

我根据那个答案做了一支笔，但没有用……可以帮我吗？

代码笔演示

谢谢

我正在尝试向资源时间线中的事件添加弹出框，我想知道正确的方法是什么。

我在 Vue ^2.6.11 中使用 fullcalendar/vue ^5.3.1 和 bootstrap-vue 的 ^2.1.0。

阅读此问题后，我有以下内容，这似乎有效，但似乎不是正确的方法。

我认为是propsDataand的使用.$mount()让人感觉必须有一种更好、更惯用的方法？另外，似乎也不可能将内容制作成html？

在组件中：

在日历选项中：

任何想法都非常感谢。
非常感谢。

自定义按钮和自定义视图不起作用。这是一个代码：

在标题工具栏中，我只看到空文本按钮，单击不做任何事情。

全日历版本：5.3.2