Question

我希望事件过滤器可以使用事件ID区分不同的事件。

我当前的代码类似于this link，但是我使用的是v4，因此导入可能会出错，因此我的代码无法正常工作。

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['dayGrid', 'timeGrid', 'bootstrap'],
    timeZone: 'local',
    locale: 'en-au',
    themeSystem: 'bootstrap',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'timeGridWeek,timeGridDay'
    },
    allDaySlot: false,
    defaultView: 'timeGridWeek',
    weekends: false,
    minTime: '08:00:00',
    maxTime: '18:00:00',
    weekNumbers: true,
    eventLimit: true, // allow "more" link when too many events
    events: [{
        title: 'Physiotherapy for Children',
        startTime: '11:00:00',
        endTime: '17:30:00',
        color: '#fced7c',
        daysOfWeek: [2],
        id: '1'
      },
      {
        title: 'Physiotherapy for Children',
        startTime: '10:45:00',
        endTime: '17:45:00',
        color: '#fced7c',
        daysOfWeek: [4],
        id: '2'
      }
    ],
    eventRender: function(event, element, view) {
      return ['all', event.id].indexOf($('#school_selector').val()) >= 0
    }
  });

  $('#school_selector').on('change', function() {
    $('#calendar').fullCalendar('rerenderEvents');
  })
  calendar.render();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<select id="school_selector">
  <option id="0" value="all">All</option>
  <option id="1" value="1">School 1</option>
  <option id="2" value="2">School 2</option>
</select>

<div id='calendar'></div>

没有错误。但是当我单击过滤器时，它不会更改事件。
感谢您的帮助。

事件过滤器在FullCalendar v4上不起作用

0 个答案: