如何在Fullcalendar v5中显示和隐藏事件 [英] How to show and hide events in Fullcalendar v5

问题描述

我试图根据Extraparam值显示和隐藏事件.但是，它不能按预期方式工作.任何建议将不胜感激.

I am trying to show and hide events according to extraparam value. However it does not work as expected. Any advice would be appreciated.

js:

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: {
url: 'feed.php',
method: 'POST'
},
eventDidMount: function(arg) {  
var cs = document.querySelectorAll('input.cs:checked');
cs.forEach(function(v) {
    if(arg.event.extendedProps.cid == v.value) {
    arg.el.style.display = 'block';
    } else {
    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);
})
});
});

html:

<input class="cs" value="1" type="checkbox" checked>Calendar1<br>
<input class="cs" value="2" type="checkbox" checked>Calendar2
<div id='calendar'></div>

feed.php返回:[{"id":"1"，"title":"event1"，"start":"2020-07-07 19:30"，"end":"2020-07-08 19:30"，"backgroundColor":#39CCCC"，"cid":"1"}，{"id":"2"，"title":"event2"，"；开始":"2020-07-09 19:30"，结束":"2020-07-10 19:30"，"backgroundColor":#F012BE"，"cid":"; 2;}]

feed.php returns: [{"id":"1","title":"event1","start":"2020-07-07 19:30","end":"2020-07-08 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';
    }
  }
})

}

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