问题标签 [fullcalendar-5]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
3487 浏览

javascript - Fullcalendar v5 删除按钮点击的所有事件

我想在单击按钮时删除 fullcalendar v5 中的所有事件,下面的代码可以正常工作

但是我怎样才能在按钮单击后删除/清除/删除所有事件?旧版本的fullcalendar有这个方法

v5怎么样?我尝试了下面的代码,但它给了我一个错误remove is not a function。我什至尝试过calendar.refetchEvents();,但没有任何效果。

0 投票
1 回答
7971 浏览

fullcalendar - eventRender disappears in fullcalendar v5

I tried eventRender like below in chrome:

When I run this code, "debugger" didn't fired. eventRender has became another name in V5 ?

0 投票
1 回答
338 浏览

javascript - Fullcalendar V4 或 V5,如何删除 resourceTimeline 类型中的插槽标签行

我正在将 fullcalendar-scheduler 1.9.4 升级到 v5 beta2。我发现 的行为slotLabelInterval已从 v3 更改为 v4。

我的目标:我想完全删除插槽标签行。我在 V1.9.4 中的设置如下(有效):

在此处输入图像描述

但是设置“slotLabelInterval: '24:00:00'”resourceTimeline与 Fullcalendar-Scheduler 5 beta2(与 v4 相同)的类型不同

上面代码的截图: 在此处输入图像描述

我尝试过的:

  • 同时将 slotDuration 设置为 24,而不是 slotLabelInterval(它不起作用)
  • set slotLabelFormat: { weekday: 'short', month: 'short' } (没用,总是显示时隙标签)

问题:如何用V5做出和第一张截图一样的效果

0 投票
1 回答
236 浏览

javascript - 将事件添加到资源通道后渲染资源区域单元

当加载日历并渲染 cellDidMount 并且单元格渲染为绿色或红色时,这可以正常工作。我想要做的是在一段时间后将事件添加到资源通道时将单元格重新渲染为不同的颜色。在调用 select 或 dateClick 等事件函数并添加新事件后,如何调用此 cellDidMount 以获得特定资源或执行其他操作。

0 投票
2 回答
4634 浏览

javascript - 在 FullCalendar 中格式化列标题日期

我一直在尝试更改出现在 Fullcalendar 周/时间网格视图的日期列标题中的日期格式:

在此处输入图像描述

我将 V5 与 moment.js 结合使用。

通过文档搜索,我最终来到了这里:https ://fullcalendar.io/docs/v5/day-header-render-hooks

这是我在初始化日历时尝试过的代码:

这导致显示每个标题的今天(星期四),而不是正确的日期。

我的下一个问题是我不确定如何相应地格式化其余日期 - 这针对日期对象的“工作日”元素,但我无法弄清楚如何一次性格式化整个日期(如果这是可能的)。例如,我希望简单地显示“Thu 14th”。

任何帮助或建议表示赞赏!

0 投票
1 回答
392 浏览

javascript - FullCalendar 周/日视图仅显示包含事件的时间段

任何人都对如何创建一个仅显示有事件的时间的 Fullcalendar TimeGridView 有建议?

我有一个网站,它显示多个不同的谷歌日历,带有完整的日历和单独的标签。例如,有些日历只有 15:00 - 17:00 的事件,而有些日历的事件只有 11:00 - 21:00。我希望 minTime 和 maxTime 会自动设置为一天/周的第一个事件的开始时间和一天/周的最后一个事件的结束时间。所以没有事件的时间段根本不可见。

我已经这样做了,以便我浏览事件源并找出当前呈现的日/周的事件的第一次和最后一次时间,并在初始化日历时将它们设置为 minTime 和 maxTime 选项。这适用于初始页面渲染,但是当用户更改日期/周时,我需要更新 minTime / maxTime 以使其正确渲染以适应新的周/日选择。否则,初始 minTime / maxTime 将被使用,新事件可能超出这些时间并且在日历上不可见。

我可以在渲染日期或获取事件时使用事件来了解日期何时更改,但我遇到的问题是,当我更新 Fullcalendar 中的 minTime / maxTime 选项时,每次都会重新获取事件和日期被渲染,所以它会导致无限循环。

有没有办法做我要求的?

0 投票
0 回答
114 浏览

javascript - Fullcalendar js事件颜色为json

我正在使用 fullcalendar,并且能够显示来自带有 rails 的 json 流的事件。 https://fullcalendar.io/docs/events-json-feed

现在我想设置特定事件的颜色,如示例中所示。我在 json 中指定它,如下所示:

请注意,“eventColor="=>"#06fff7" 已设置。

但是,它始终以相同的颜色显示所有事件……而不是指定的事件。

是否可以使用 json 流设置事件颜色?

我玩过不同的选项,例如使用 colro、backgroundColor 等。我使用了十六进制值或颜色名称(例如“黄色”)。

没有成功。我真的不明白我做错了什么。

任何帮助表示赞赏。

=== 更新 ===

这是浏览器接收到的json:

信息显示正确。但是,无法识别颜色。

我正在像这样初始化日历:

我删除了引导主题以查看是否有区别,但没有。

0 投票
1 回答
605 浏览

reactjs - 如何在 Fullcalendar Timegrid 视图中显示非连续日期?

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

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

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

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

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

0 投票
4 回答
5339 浏览

javascript - 如何在 Fullcalendar.io 的新 v5 中过滤事件

版本 4eventRender并且很容易渲染或没有事件,因为您所要做的就是返回null

使用版本 5(目前在 beta 4),该事件被替换为eventContentandeventClassNames但我正在努力复制相同的想法,因此我可以轻松地在时间线视图中显示有和没有事件的资源

从升级指南中它说:

eventContent- 如果你通过 eventRender 注入 DOM 内容。但是,您不能通过返回 false 来取消渲染。相反,display:'none'在事件输入上附加了一个属性。

但如果在那种情况下我这样做,它仍然会显示该事件:

在此处输入图像描述

我错过了什么?我们应该返回/设置什么以便不再显示事件?


我也试过

但它所做的只是隐藏事件本身的内容,不删除事件,我最终得到了事件“框架”

在此处输入图像描述

0 投票
0 回答
50 浏览

javascript - FullCalendar 5.0.0-beta.4 ThirdPartyDraggable - 如何延迟点击?

我正在尝试将 SortableJS 与 ThirdPartyDraggable 一起使用。在触摸设备上,我在允许点击之前有 500 毫秒的延迟,但第 3 方可拖动会立即注册点击。

有什么方法可以手动通知 ThirdPartyDraggable 开始收听点击?