全日历清除选择并在每周更改时重新呈现

Question

我有一个FullCalendar，可以拖放新事件以及通过单击它们来编辑/删除它们，这将打开一个模式窗口。我面临的问题是，当您单击一个事件，取消并单击另一个事件并将其删除时，两个事件都将被删除。我尝试在eventClick方法上调用$('#calendar').fullCalendar('unselect');，但这对我没有任何改变。

我面临的第二个问题是，当用户拖动事件并向前移动一天或一周然后返回时，事件消失了。为此，我尝试在viewRender方法上使用$('#calendar').fullCalendar('refetchEvents');，但同样没有任何改变。

这是我当前的完整日历代码。

let that = this;
that.me.calendar = this.me.calendar;

$('#calendar').fullCalendar({
  header: {
    left: 'today prev,next',
    center: 'title',
    right: 'agendaWeek,agendaDay'
  },
  views: {
    week: {
      titleFormat: 'DD.MM.YYYY'
    }
  },
  defaultView: 'agendaWeek',
  locale: 'fi',
  weekends: false,
  scrollTime: '07:00',
  businessHours: {
    start: '7:00',
    end: '21:00',
  },
  events: function(start, end, timezone, callback) {
    let events = that.me.calendar ? JSON.parse(that.me.calendar) : [];
    callback(events);
  },
  editable: true,
  selectable: true,
  selectHelper: true,
  select: (start, end) => {
    let duration = (end - start) / 1000;
    if (duration == 1800) {
      // Set default duration to 1 hour
      end.add(1, 'hour');
      return $('#calendar').fullCalendar('select', start, end);
    }

    let eventData = {
      start: start,
      end: end,
      works: [],
      stick: true
    }

    $('#calendar').fullCalendar('renderEvent', eventData);
    $('#calendar').fullCalendar('unselect');
  },
  eventClick: (event, element) => {
    $('#calendar').fullCalendar('unselect');
    $('#event-works').empty();
    event.works.forEach(work => {
      $('#event-works').append('<li class="list-group-item">' + work.type + ' <i class="fa fa-times float-right" aria-hidden="true" @click="removeWork(' + work.id + ', ' + event._id + ')" style="cursor: pointer;"></i></li>');
    });
    $('#start-date').text(moment(event.start).format('d.MM.YYYY HH:mm'));
    $('#end-date').text(moment(event.end).format('d.MM.YYYY HH:mm'));
    $('#workModal').modal('show');

    $('#add-work-to-event').click(() => {
      let work = _.find(that.user.works, { id: parseInt($('#work').val()) });
      if(_.includes(event.works, work)) return;
      event.works.push(work);
      $('#event-works').append('<li class="list-group-item">' + work.type + '</li>');
    });

    $('#cancelCalendar').click(() => {
      $('#calendar').fullCalendar('unselect');
    });

    $('#deleteEvent').click(() => {
      $('#calendar').fullCalendar('removeEvents', event._id);
    });

    $('#saveCalendar').click(() => {
      $('#calendar').fullCalendar('updateEvent', event);
    });
  }
});

因此，基本上我需要做的是，如果单击多个事件，则取消选择事件，然后在日期之间导航时重新呈现事件。