问题标签 [fullcalendar-4]

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 回答
1007 浏览

reactjs - 如何在 FullCalendar v4 中仅选择可见事件

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

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

0 投票
1 回答
335 浏览

javascript - 为什么 eventDragStop 不能在回调中编辑事件?(FullCalendar v4)

我正在使用 fullcalendar(v4 alpha)来安排活动。
我有一个eventDragStop回调,我试图用它来为一个事件设置一个 extendedProp,标记该事件已被更改。

使用上面的代码,它不起作用。如果 I alert(info.event.id),我可以看到正在为已拖动的事件调用正确的 ID,并且没有错误。

如果我在日历上有三个事件,ID 为:1、2、3,并使用以下代码:

因此,明确声明要更改 ID 号 1,而不是回调中的事件。
如果我拖动事件编号 1,这也不起作用。但是,如果我拖动事件 2 或 3,它将起作用并更改事件 1。

反之亦然,我明确声明的任何事件都可以更改该事件,前提是该事件不是触发eventDragStop回调的事件。

谁能告诉我这是为什么?

0 投票
1 回答
1681 浏览

angular - How to initialize Full Calendar version 4 in Angular

I'm trying to use the Full Calendar version 4 so I can use mouse over events on events in background mode. For some reason I cannot initialize it in my component(set options), I mean its working when I run ng serve, but I get error on my IDE. I will post the picture error here along with my code. Official docs you can see here https://fullcalendar.io/docs/v4/release-notes

I tried using OptionInputs as a parameter but that didn't work

} }

enter image description here

0 投票
1 回答
257 浏览

recurring-events - FullCalendar V4 - 如何在重复事件系列中计算较短的月份?

我正在使用带有RRule 插件的FullCalendar v4-alpha-3来生成重复事件。它按预期工作,只有一个问题:如何修改重复事件以说明比系列中起始月份天数更少的月份?

例如,如果第一次发生在 2019 年 1 月 29 日;由于只有 28 天(不包括闰年),该事件将在所有后续月份的 29 日重复,2 月除外。

我试过重置dtstart到下个月的第一天。它可以工作,只是事件不再是递归的。

这是我的设置的精简片段:

我会很感激任何见解。

0 投票
1 回答
780 浏览

angular - 无法让 FullCalendar v4 与 Angular 和 Angular Cli 一起使用

我正在尝试使用 Angular cli 在 Angular 7 应用程序中使用 FullCalendar v4,并且在构建过程中遇到 Typescript 错误,并且浏览器中出现控制台错误,指出未定义“日历”。不确定我做错了什么,因为我似乎在遵循所有方向。我已将此添加到一个最小的角度应用程序中,并在 css 下方添加了受影响的文件,但这不应该影响它。

注意 - 我在这里的一个 stackblitz 示例中克隆了它,一切似乎都工作得很好,但是当在 angular cli 中多次本地重新创建它时,我仍然得到相同的结果。

https://stackblitz.com/edit/angular-lec711

包.json

在此处输入图像描述

在此处输入图像描述

0 投票
0 回答
32 浏览

reactjs - 如何在全日历中替换按日重复发生的特定事件?

我通过在每个星期天用户不可用的重复事件来设置用户的可用性。如果用户提供特定星期天的数据,他/她在特定星期天有空,那么我如何将特定日期的重复事件替换为特定日期事件。

请帮帮我。例如 :

在此示例中,用户并非在所有星期日和星期六都可用,但在日期为“2019-02-02”的特定星期六,他/她可用,而不是我只想显示特定事件而不是重复事件。

先感谢您。

0 投票
0 回答
263 浏览

javascript - 加载源时从 localstorage 加载 angular fullcalendar v4 事件

我从 Angular (7) 应用程序中的 firebase 云函数获取全日历事件,如下所示:

(我使用自己的 get 函数主要是通过拦截器添加授权标头)。

如您所见,我将收到的事件保存在 localStorage 中,以便下次请求日历时可以使用它们。这主要是在没有互联网连接的情况下,因为它应该可以用作 PWA,而且 firebase 云功能似乎非常慢,因此在加载新事件时显示存储中的事件会很好。加载保存的事件会出现问题。我尝试将它们作为第二个事件源添加,如下所示:

这个想法是在第一个回调后立即删除第二个 eventSource,这样就不会重复了。但是第二个 eventSource 只会在第一个完成后立即显示,此时所有的 successCallbacks 都已完成,因此这里没有节省时间。

因为这似乎是很多人可能面临的一个非常基本的问题:有没有人对如何实现它有想法/解决方案?

0 投票
2 回答
578 浏览

fullcalendar - FullCalendar timeGridWeek 拖动或选择时隙在一天结束时停止工作

我将 Fullcalendar timeGridWeek 与 dayGrid 并排使用。

我可以在两者之间拖动并在 timeGridWeek (左侧)中调整大小或拖动。

但是,问题是功能在下午 6 点之后或接近一天结束时会中断,具体取决于屏幕宽度。

我还启用了单击时间段。我可以点击到 13:00。之后的任何事情都停止工作。

如果我将#container > *元素设置为 1600 像素(在我的超宽显示器上)一切正常。

我不知道为什么。

我也在使用 MaterialUI 的 React App 中运行它,它的行为方式相同。我认为这与主题有关,但现在可以看到它以最少的样式做同样的事情。

0 投票
1 回答
861 浏览

javascript - 使用 calendar.AddEvent 在 FullCalendar Scheduler 4.0.1 中复制事件

我正在尝试将功能添加到我的完整日历应用程序中,当用户单击某个事件时,它将复制它(稍后将移动)。

问题是重复的事件虽然存在,但不会显示。

起初我认为这可能是一个resourceID问题。但是,我通过添加资源 ID 属性来消除这种恐惧。我真的不确定此时问题是什么,因为这两个元素在功能上是相同的(尽管它们是用不同的 ID 制作的)。

我的代码示例是(标记了重复块//Duplication):

如果有人想看看的话,一个工作的codepen: https ://codepen.io/anon/pen/JzBwwj?editors=0010

0 投票
1 回答
1412 浏览

javascript - FullCalendar 4.0.0-beta.2 从另一个非日历函数调用 eventRender 函数

我正在尝试将 FullCalendar 4.0.0-beta.2 集成到我的项目中,我需要的按钮之一是根据某个事件参数(在本例中为“名称”)过滤结果。我有“仅限我的事件”按钮的功能,它将isShowAll正确设置布尔值。我遇到的问题是让函数myEventFunc调用函数eventRender。使用calendar.rerenderEvents();似乎也不起作用。

我对 JavaScript 比较陌生,所以如果有一个简单的解决方案,我会更喜欢它。如果对于我基于给定名称过滤结果的整个目标有另一个(更好的)解决方案,请解释清楚!谢谢 :)

日历.html: