0

I wish the event filter can use event id to differentiate different events.

My current code is similar to this link but I am using v4 and I might get wrong with imports so mine is not working.

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>

No error. But when I click filter, it does not change events.
Thanks for help.

Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
Jennifer
  • 19
  • 2
  • 6
  • In fullcalendar v4, eventRender uses only 1 parameter. https://fullcalendar.io/docs/eventRender – Khurram Ishaque Sep 18 '19 at 07:04
  • 1
    So, it should be like : eventRender: function (info) { return ['all', info.event.id].indexOf($('#school_selector').val()) >= 0 } – Khurram Ishaque Sep 18 '19 at 07:05
  • 1
    if you are trying to use fullCalendar 4 then why are you including files which clearly say they are for a different version?? e.g. `fullcalendar-2.1.1`?? The numbering system is pretty clear, IMHO. https://cdnjs.com/libraries/fullcalendar hosts all the correct files for v4, it's not particularly hard to include the correct ones (you can copy one of the CodePen demos on the fullCalendar website if you're unsure exactly which files you need in your case. – ADyson Sep 18 '19 at 09:16

0 Answers0