Fullcalendar – 如何在日历 1 上获取更新,以触发日历 2 上的 refetchEvents()。

huangapple go评论109阅读模式
英文:

Fullcalendar - How to get an update on calendar 1 to trigger a refetchEvents() on calendar 2

问题

使用 Fullcalendar.io V6 与 Script 标签

我有一个页面上有 2 个 Fullcalendars。[calendar] 和 [calendar_list]

<div id="calendar" name="calendar">
<div id="calendar_list" name="calendar_list">

[calendar] 是一个标准的可编辑日历,具有所有标准事件可插入、更新和删除事件的功能,通过对 php 页面进行 ajax 调用。该日历的功能正常,所有函数都能正确执行更新。

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {.......});

[calendar_list] 是 [calendar] 旁边的第二个日历。它是一个标准的 'listYear' 日历,事件来源与主日历的 ajax 调用到 php 页面相同。[calendar_list] 的目的是显示所有从主日历中插入、更新和删除的日期的摘要列表视图,以便用户可以看到所有选定日期的摘要。

document.addEventListener('DOMContentLoaded', function() {
var calendarEl_list = document.getElementById('calendar_list');
var calendar_list = new FullCalendar.Calendar(calendarEl_list, {......}

Fullcalendar 有一个 refetchEvents() 函数,我需要在主日历更新事件并已提交数据之后调用该函数。

是否有一种方法可以向 [calendar_list] 添加某种类型的侦听器以在 [calendar] 更新事件后触发 refetchEvents()?

英文:

Using Fullcalendar.io V6 with Script Tags

I have a page with 2 Fullcalendars. [calendar] and [calendar_list]

<div id="calendar" name="calendar">
<div id="calendar_list" name="calendar_list">

[calendar] is a standard editable calendar with all the standard events to insert, update and delete events with a ajax call to php page. The calendar works just as expected with all the functions performing the updates correctly.

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {.......});

[calendar_list] is a second calendar next to [calendar]. It is standard 'listYear' calendar and the event source is the same as the main calendar ajax to php page. The purpose of [calendar_list] is to show a list view of all the dates inserted, updated and deleted from the main calendar so the user can see a summary of all the dates selected.

document.addEventListener('DOMContentLoaded', function() {
var calendarEl_list = document.getElementById('calendar_list');
var calendar_list = new FullCalendar.Calendar(calendarEl_list, {......}

Fullcalendar has a function for refetchEvents() which I need to call after and event has been updated in the main calendar and the data has been posted.

Is there a method where I can add some sort of listener to [calendar_list] to trigger the refetchEvents() after [calendar] has updated an event?

答案1

得分: 1

只需将变量声明在函数外部,使它们成为全局变量,然后可以在日历对象更新时从Ajax成功消息中调用refetch。

英文:

Found the solution and it was simple.

I had the var for calendar and calendar_lsit objects declared inside the functions. All I had to do was declare the var outside of the functions so they become global.

var calendar_list;
document.addEventListener('DOMContentLoaded', function() {
var calendarEl_list = document.getElementById('calendar_list');

Once the var is global for calendar_list, I can call the refetch from the ajax success message when the calendar object is updated.

$.ajax({
  url: ....,
  data: {... },
  type: "POST",
  ecnode: true,
  success: function(json) {
   calendar_list.refetchEvents();
},
error: function(xhr, status, error) {
  alert(xhr.responseJSON.message);
}
});

huangapple
  • 本文由 发表于 2023年6月12日 06:02:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/76452686.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定