Fullcalendar v5 как показать и скрыть события с флажком

Я пытаюсь показать и скрыть события с помощью флажка, я вижу здесь еще один вопрос в стеке и пытаюсь реализовать ту же конфигурацию, которая описана здесь: https://stackoverflow.com/a/62865578/5376930

Я сделал ручку на основе этого ответа, но не работает ... Не могли бы вы мне помочь?

демонстрация кода

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);
})
});
});

Спасибо


javascript fullcalendar fullcalendar-5
person ValB    schedule 04.10.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ключевое различие между вашей демонстрацией и другим вопросом заключается в том, что calendar.refetchEvents(); вызывает повторную выборку событий из динамического (серверного) источника событий, что затем вызывает запуск eventDidMount. Но вы использовали статический источник данных, поэтому refetchEvents смотрит на него и решает, что нечего обновлять, поскольку данные статичны и он не знает, где искать новые события. Поэтому он оставляет события такими, какие они есть, и eventDidMount не срабатывает, что означает, что код, решающий показать / скрыть ваши события, никогда не запускается.

Однако вы можете имитировать динамический источник данных, используя функцию события как функция. и просто возвращая ваш статический массив внутри обратного вызова успеха. Это вводит fullCalendar в заблуждение, заставляя думать, что ваши данные событий являются динамическими, и поэтому он перерисовывает события каждый раз, когда вызывается refetchEvents, и, таким образом, запускает обратный вызов eventDidMount в процессе.

Нравится:

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"
    }
  ]);
},

Демо: https://codepen.io/ADyson82/pen/mdEbyQr

person ADyson    schedule 05.10.2020