Fullcalendar v5 how to show and hide events with checkbox

Question

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

Answer 1

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