Fullcalendar v5如何使用复选框显示和隐藏事件 [英] Fullcalendar v5 how to show and hide events with checkbox

问题描述

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

我根据该答案制作了一支笔，但不起作用...可以帮我吗?

codepen演示

  document.addEventListener('DOMContentLoaded'，function(){var calendarEl = document.getElementById('calendar');var calendar = new FullCalendar.Calendar(calendarEl，{现在:"2020-07-11"，scrollTime:'00:00'，AspectRatio:1.8，headerToolbar:{左:今天上一个，下一个"，中心:标题"，右:"dayGridMonth，timeGridWeek，timeGridDay，listMonth"}，initialView:"dayGridMonth"，事件:[{"id":"1"，"title":"event1"，"start":"2020-07-01 19:30"，"end":"2020-07-02 19:30"，"backgroundColor":#39CCCC"，"cid":"1"}，"id":"2"，"title":"event2"，"；开始":"2020-07-09 19:30"，结束":"2020-07-10 19:30"，"backgroundColor":#F012BE"，"cid":"; 2}]，eventDidMount:function(arg){var cs = document.querySelectorAll('.cs');cs.forEach(function(v){if(v.checked){if(arg.event.extendedProps.cid === v.value){arg.el.style.display ='block';}} 别的 {if(arg.event.extendedProps.cid === v.value){arg.el.style.display ='none';}}})}});calendar.render();var csx = document.querySelectorAll(.cs")csx.forEach(function(el){el.addEventListener('change'，function(){calendar.refetchEvents();console.log(el);})});}); 

谢谢

解决方案

您的演示与另一个问题之间的主要区别是 calendar.refetchEvents(); 导致事件被重新获取来自动态(服务器端)事件源，然后导致触发 eventDidMount .但是您已经使用了静态数据源，因此refetchEvents会查看该数据源并决定没有要重新提取的内容，因为它的数据是静态的，并且不知道在哪里寻找新事件.因此，它使事件保持原样，并且 eventDidMount 不会触发，这意味着决定显示/隐藏事件的代码永远不会运行.

但是，您可以使用 events-as-afunction 来模拟动态数据源

a>功能，然后在成功"列表中返回您的静态数组.打回来.这使fullCalendar认为您的事件数据是动态的，因此每次调用 refetchEvents 时都会重新绘制事件，从而在该过程中触发 eventDidMount 回调./p>

赞:

  events:函数(fetchInfo，successCallback，failureCallback){successCallback([{id:"1"，标题:"event1"，开始:"2020-07-01 19:30"，结束:"2020-07-02 19:30"，backgroundColor:#39CCCC"，cid:"1"；}，{id:"2"，标题:"event2"，开始:"2020-07-09 19:30"，结束:"2020-07-10 19:30"，backgroundColor:#F012BE"，cid:"2"；}]);}， 

演示: https://codepen.io/ADyson82/pen/mdEbyQr

I am trying to show and hide events with checkbox, I see another question here on stack and try to implement the same configuration explained here: https://stackoverflow.com/a/62865578/5376930

I made a pen based on that answer but doesn't work... could give me a help please?

codepen demo

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
  now: '2020-07-11',
  scrollTime: '00:00',
  aspectRatio: 1.8,
  headerToolbar: {
    left: 'today prev,next',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
  },
  initialView: 'dayGridMonth',
events: 
  [{"id":"1","title":"event1","start":"2020-07-01 19:30","end":"2020-07-02 19:30","backgroundColor":"#39CCCC","cid":"1"},{"id":"2","title":"event2","start":"2020-07-09 19:30","end":"2020-07-10 19:30","backgroundColor":"#F012BE","cid":"2"}],
eventDidMount: function(arg) {  
var cs = document.querySelectorAll('.cs');
cs.forEach(function(v) {
  if(v.checked){
    if(arg.event.extendedProps.cid === v.value) {
    arg.el.style.display = 'block';
    }
    } else {
    if(arg.event.extendedProps.cid === v.value) {
    arg.el.style.display = 'none';
    }
  }
})
}  
});
calendar.render();

var csx = document.querySelectorAll(".cs")
csx.forEach(function(el) {
    el.addEventListener('change', function() {
        calendar.refetchEvents();
        console.log(el);
})
});
});

Thankyou

解决方案

The key difference between your demo and that other question is that calendar.refetchEvents(); causes the events to be re-fetched from the dynamic (server-side) event source, which then causes eventDidMount to be triggered. But you've used a static data source, so refetchEvents looks at that and decides there's nothing to refetch, since it the data is static and it doesn't know where to look for new events. Therefore it leaves the events as they are, and eventDidMount doesn't fire, meaning the code to decide to show/hide your events never runs.

However, you can simulate a dynamic data source by using the events-as-a-function feature and just returning your static array inside the "success" callback. This fools fullCalendar into thinking your event data is dynamic, and therefore it re-draws the events each time refetchEvents is called, and thus fires the eventDidMount callback in the process.

Like this:

events: function (fetchInfo, successCallback, failureCallback) {
  successCallback([
    {
      id: "1",
      title: "event1",
      start: "2020-07-01 19:30",
      end: "2020-07-02 19:30",
      backgroundColor: "#39CCCC",
      cid: "1"
    },
    {
      id: "2",
      title: "event2",
      start: "2020-07-09 19:30",
      end: "2020-07-10 19:30",
      backgroundColor: "#F012BE",
      cid: "2"
    }
  ]);
},

Demo: https://codepen.io/ADyson82/pen/mdEbyQr

这篇关于Fullcalendar v5如何使用复选框显示和隐藏事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！