Vue FullCalendar 中的下个月和上个月观察者

Posted 2023-02-25

【中文标题】Vue FullCalendar 中的下个月和上个月观察者

【英文标题】：Next and Previous month watcher in Vue FullCalendar

【发布时间】：2019-06-16 21:47:47

【问题描述】：

我在 Vue.js 中使用 FullCalendar 库

是否可以使用默认的 prev、next 和 today 按钮来触发我自己的操作。

我已经创建了我想要做的自定义按钮，但更喜欢使用默认按钮。

当前我有一个链接到方法的按钮：

<button @click="handleMonthIncrement">Next Month</button>

这调用了这个方法：

 handleMonthIncrement: function(arg) 
  // update month and year
  this.incrementMonth();

  // update calendar
  let calendarApi = this.$refs.fullCalendar.getApi();
  calendarApi.next();

  // updateCurrentSummary (mapped to store)
  this.updateCurrentSummary();

我使用 ref=fullCalendar 绑定到日历的 jQuery 引用来更改视图。

如果我可以收听下一个、上一个按钮，那么我可以删除该代码，因为这些按钮已经改变了日历视图。

这可能吗？我知道 viewRender (https://fullcalendar.io/docs/v1/viewRender) 可用于记录日历何时更改视图，但不确定这是否可用于满足我的上述要求。

提前致谢。

谢谢

【问题讨论】：

您使用的是哪个版本的 fullCalendar，确切地说？您已链接到版本 1 的文档，但这是古老且长期被取代的。大多数人使用的是第 3 版或全新的第 4 版。

是的，您可以使用 viewRender (v1-3) 或 viewSkeletonRender (v4) 来帮助您 - 它们会在视图更改时发生（切换视图类型，例如从一个月到一周），和/或更改显示的日期范围 - 包括按下一个/上一个。因此，它涵盖的事件不仅仅是这些按钮，但您可能会发现这实际上很有用。回调中提供的视图对象会告诉您当时正在呈现的视图的日期范围。

一个问题 - 你为什么要这样做，究竟是什么？如果您只是使用它来了解何时将事件加载到日历上，那么这是错误的方法 - 相反，您应该声明一个动态事件源（根据您的情况，有几种方法可以做到这一点，记录在 here 和here

嗨@ADyson - 使用v.4 - 将更新我的参考（抱歉不准确！）我不清楚我如何在我的Vue组件中使用viewSkeletonRender回调。我尝试在我的 Vue 元素中添加以下道具，如下所示： 但它不会触发方法 handleMonthChange - 感谢您的帮助

不幸的是，我对vue一无所知。您是否使用此处提到的 fullCalendar vue 组件：fullcalendar.io/docs/vue？

【参考方案1】：

我通过查看此处发出的事件来实现这一点：https://github.com/fullcalendar/fullcalendar-vue/blob/master/src/fullcalendar-options.js

我发现 datesRender - 可以添加到以 @ 开头的 FullCalendar 元素中，以便在日期重新渲染时触发。因为我只有一个月的视图，所以我可以触发一个我称为 handleMonthChange 的方法。

看这里：

<FullCalendar
  defaultView="dayGridMonth"
  @datesRender="handleMonthChange"
/>

然后在 handleMonthChange 我有以下内容：

handleMonthChange: function(arg) 
  var currentStart = arg.view.currentStart;
  var check = moment(currentStart, "YYYY/MM/DD");
  var currentMonth = check.format("M");

  // load action
  this.updateCurrentMonth(currentMonth);
  // refresh summaries
  this.updateSummary();

我使用时刻从日期（从视图对象）确定月份。

在此处查看更多信息，了解在此处传递回的内容https://fullcalendar.io/docs/datesRender

然后我使用它通过调用 Vuex 操作来更改我的 Vuex 状态的月份，然后我根据需要更新了我的摘要部分。

希望对其他人也有帮助。非常感谢@ADyson 帮助我到达这里！

【讨论】：

datesRender 现已弃用，建议用作道具。我真的不明白这是怎么回事..