Удаление или скрытие события от полного календаря - PullRequest
0 голосов
/ 14 апреля 2020

Я пытаюсь удалить событие, основываясь на том, меньше ли это событие, чем текущая дата. Если конкретное событие меньше текущей даты, оно должно быть удалено или скрыто из полного календаря.

   this.renderCalendar = new Calendar(document.querySelector('#calendar'),
{

eventDataTransform:(data: any)=>{
    data.start = data.start.toDate()// convert to date
    //data.end = data.end.toDate()
    const newDate = new Date().getDate();

    if(newDate>data.start.getDate()){

    //this.dataService.eventDelete(data.id);
         var event=this.renderCalendar.getEventById(data.id);
        console.log(event);
        console.log(data.id);
    //event.remove();
     }

    else{
      data.color="blue";
    }
    return data;

  },

}

);

Я смог придумать реализацию, как описано выше. Данные извлекаются из моей базы данных. Я всегда получаю нулевое событие, даже если я могу получить идентификатор из данных. Что должно быть не так с моим кодом?

1 Ответ

0 голосов
/ 17 апреля 2020

Во время eventDataTransform событие еще не было обработано. eventDataTransform происходит, когда fullCalendar все еще обрабатывает каждое входящее событие, но до того, как они будут добавлены в календарь. Таким образом, событие еще не существует в календаре, поэтому оно не может быть возвращено после вызова getEventById.

Я вижу, что вы хотите удалить событие при определенных обстоятельствах. Документация eventDataTransform (https://fullcalendar.io/docs/eventDataTransform) гласит:

Функция должна возвращать анализируемый объект Event или false, что приведет к сбросу события.

Поэтому, чтобы решить вашу проблему, вы можете просто return false из вашего обратного вызова eventDataTransform, когда вы решите, что событие не нужно.

например

  eventDataTransform: (data: any) => {
    data.start = data.start.toDate() // convert to date
    const newDate = new Date().getDate();

    if(newDate > data.start.getDate()) {
      return false;
    }
    else {
      data.color="blue";
      return data;
    }
  },
...