I'm trying to make a filter for Fullcalendar. I've got four dropdown boxes where the user can select a parameter. On the first load it has to show all the events, but when using the filter only the selected events. I now how to use the extraParams for the first load, but i need the extraParams for the refetchEvents.

When i make a selection the refetchEvents function works, but not with the selected parameters. The result is that i still see all the events. How do i send the extraParams?

Here is my plete code with all the functions. My question is about the last few lines at $('#cursus tbody').on('click', 'tr', function().

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'nl',
    weekNumbers: true,
    defaultDate: standaarddatum,
    nowIndicator: true,
    businessHours: true,
    editable: true,
    plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,listYear'
    },
    allDaySlot: true,
    events: {
      url: 'load_select.php',
      method: 'POST',
      extraParams: {
        cursus_id: cursus_id,
        evenement_id: evenement_id,
        locatie_id: locatie_id,
        trainer_id: trainer_id
      },
      failure: function() {
        alert('there was an error while fetching events!');
      },

    },
    eventClick: function(info) {
      var event = info.event;
      $.ajax({
        url: "select.php",
        type: "POST",
        data: {
          id: event.id
        },
        success: function(data) {
          console.log(data);
          $("#exampleModal1").modal();
          document.getElementById("title1").value = (data['title']);
          document.getElementById("trainer1").value = (data['trainer']);
        }
      })
      $('#deleteButton').on('click', function() {
        $.ajax({
          url: "delete.php",
          type: "POST",
          data: {
            id: event.id
          },
          success: function() {
            $('#exampleModal1').modal('hide');
            calendar.refetchEvents()
          }
        })
      })
    },
    dateClick: function(info) {
      $("#exampleModal").modal();
      var start = info.dateStr;
      var start1 = start.replace("T", " ");
      var start2 = start1.split('+');
      var start3 = start2[0];
      var start4 = start3.split(' ');
      var start5 = start4[0];
      var start6 = start5.split('-').reverse().join('-');
      var start7 = start4[1].slice(0, 5)
      var start8 = start6 + " " + start7;
      var end1 = start3.split(' ');
      var end2 = end1[1];
      var end3 = end2.slice(0, 2);
      var end4 = parseInt(end3) + 1;
      var end5 = end2.slice(2, 8);
      var end6 = end4.toString();
      var end7 = end6 + end5;
      var end8 = end1[0];
      var end9 = end8 + " " + end7;
      var end10 = end7.slice(0, 5)
      var end11 = start6 + " " + end10;
      document.getElementById("datetimepicker3").value = (start8);
      document.getElementById("datetimepicker4").value = (end11);
      localStorage.setItem("standaarddatum", end8);
      $('#submitButton').on('click', function() {
        var cursus_id = localStorage.getItem("cursus_id");
        var evenement_id = localStorage.getItem("evenement_id");
        var locatie_id = localStorage.getItem("locatie_id");
        var trainer_id = localStorage.getItem("trainer_id");
        var title = $('#title').val();
        var start10 = $('#datetimepicker3').val();
        var start11 = start10.split(' ');
        var start12 = start11[0].split('-').reverse().join('-');
        var startdef = start12 + " " + start11[1];
        var end12 = $('#datetimepicker4').val();
        var end13 = end12.split(' ');
        var end14 = end13[0].split('-').reverse().join('-');
        var enddef = end14 + " " + end13[1];
        if (start != "") {
          $.ajax({
            url: "insert.php",
            type: "POST",
            data: {
              title: title,
              start: startdef,
              end: enddef,
              cursus_id: cursus_id,
              evenement_id: evenement_id,
              locatie_id: locatie_id,
              trainer_id: trainer_id
            },
            success: function() {
              $('#exampleModal').modal('hide');
              calendar.refetchEvents()
              $('#title').val("");
              $('#trainer').val("");
              title = "";
              start = "";
              end9 = "";
            }
          })
        }
      })
    },
    eventResize: function(info) {
      var event = info.event;
      var id = event.id;
      var starte = event.start;
      var ende = event.end;
      var start = calendar.formatIso(starte);
      var start1 = start.replace("T", " ");
      var start2 = start1.split('+');
      var start3 = start2[0];
      var end = calendar.formatIso(ende);
      var end1 = end.replace("T", " ");
      var end2 = end1.split('+');
      var end3 = end2[0];
      $.ajax({
        url: "update.php",
        type: "POST",
        data: {
          start: start3,
          end: end3,
          id: id
        },
        success: function() {
          calendar.refetchEvents()
        }

      })
    },
    eventDrop: function(info) {
      var event = info.event;
      var id = event.id;
      var starte = event.start;
      var ende = event.end;
      var start = calendar.formatIso(starte);
      var start1 = start.replace("T", " ");
      var start2 = start1.split('+');
      var start3 = start2[0];
      var end = calendar.formatIso(ende);
      var end1 = end.replace("T", " ");
      var end2 = end1.split('+');
      var end3 = end2[0];
      $.ajax({
        url: "update.php",
        type: "POST",
        data: {
          start: start3,
          end: end3,
          id: id
        },
        success: function() {
          calendar.refetchEvents()
        }
      })
    },

  });
  calendar.render();
  $('#cursus tbody').on('click', 'tr', function() {
    var row = this.closest('tr');
    var table = $('#cursus').DataTable()
    var cursus_id = table.row(row).data()[1]
    alert(cursus_id);
    calendar.refetchEvents()
  });
});

I'm trying to make a filter for Fullcalendar. I've got four dropdown boxes where the user can select a parameter. On the first load it has to show all the events, but when using the filter only the selected events. I now how to use the extraParams for the first load, but i need the extraParams for the refetchEvents.

When i make a selection the refetchEvents function works, but not with the selected parameters. The result is that i still see all the events. How do i send the extraParams?

Here is my plete code with all the functions. My question is about the last few lines at $('#cursus tbody').on('click', 'tr', function().

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'nl',
    weekNumbers: true,
    defaultDate: standaarddatum,
    nowIndicator: true,
    businessHours: true,
    editable: true,
    plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,listYear'
    },
    allDaySlot: true,
    events: {
      url: 'load_select.php',
      method: 'POST',
      extraParams: {
        cursus_id: cursus_id,
        evenement_id: evenement_id,
        locatie_id: locatie_id,
        trainer_id: trainer_id
      },
      failure: function() {
        alert('there was an error while fetching events!');
      },

    },
    eventClick: function(info) {
      var event = info.event;
      $.ajax({
        url: "select.php",
        type: "POST",
        data: {
          id: event.id
        },
        success: function(data) {
          console.log(data);
          $("#exampleModal1").modal();
          document.getElementById("title1").value = (data['title']);
          document.getElementById("trainer1").value = (data['trainer']);
        }
      })
      $('#deleteButton').on('click', function() {
        $.ajax({
          url: "delete.php",
          type: "POST",
          data: {
            id: event.id
          },
          success: function() {
            $('#exampleModal1').modal('hide');
            calendar.refetchEvents()
          }
        })
      })
    },
    dateClick: function(info) {
      $("#exampleModal").modal();
      var start = info.dateStr;
      var start1 = start.replace("T", " ");
      var start2 = start1.split('+');
      var start3 = start2[0];
      var start4 = start3.split(' ');
      var start5 = start4[0];
      var start6 = start5.split('-').reverse().join('-');
      var start7 = start4[1].slice(0, 5)
      var start8 = start6 + " " + start7;
      var end1 = start3.split(' ');
      var end2 = end1[1];
      var end3 = end2.slice(0, 2);
      var end4 = parseInt(end3) + 1;
      var end5 = end2.slice(2, 8);
      var end6 = end4.toString();
      var end7 = end6 + end5;
      var end8 = end1[0];
      var end9 = end8 + " " + end7;
      var end10 = end7.slice(0, 5)
      var end11 = start6 + " " + end10;
      document.getElementById("datetimepicker3").value = (start8);
      document.getElementById("datetimepicker4").value = (end11);
      localStorage.setItem("standaarddatum", end8);
      $('#submitButton').on('click', function() {
        var cursus_id = localStorage.getItem("cursus_id");
        var evenement_id = localStorage.getItem("evenement_id");
        var locatie_id = localStorage.getItem("locatie_id");
        var trainer_id = localStorage.getItem("trainer_id");
        var title = $('#title').val();
        var start10 = $('#datetimepicker3').val();
        var start11 = start10.split(' ');
        var start12 = start11[0].split('-').reverse().join('-');
        var startdef = start12 + " " + start11[1];
        var end12 = $('#datetimepicker4').val();
        var end13 = end12.split(' ');
        var end14 = end13[0].split('-').reverse().join('-');
        var enddef = end14 + " " + end13[1];
        if (start != "") {
          $.ajax({
            url: "insert.php",
            type: "POST",
            data: {
              title: title,
              start: startdef,
              end: enddef,
              cursus_id: cursus_id,
              evenement_id: evenement_id,
              locatie_id: locatie_id,
              trainer_id: trainer_id
            },
            success: function() {
              $('#exampleModal').modal('hide');
              calendar.refetchEvents()
              $('#title').val("");
              $('#trainer').val("");
              title = "";
              start = "";
              end9 = "";
            }
          })
        }
      })
    },
    eventResize: function(info) {
      var event = info.event;
      var id = event.id;
      var starte = event.start;
      var ende = event.end;
      var start = calendar.formatIso(starte);
      var start1 = start.replace("T", " ");
      var start2 = start1.split('+');
      var start3 = start2[0];
      var end = calendar.formatIso(ende);
      var end1 = end.replace("T", " ");
      var end2 = end1.split('+');
      var end3 = end2[0];
      $.ajax({
        url: "update.php",
        type: "POST",
        data: {
          start: start3,
          end: end3,
          id: id
        },
        success: function() {
          calendar.refetchEvents()
        }

      })
    },
    eventDrop: function(info) {
      var event = info.event;
      var id = event.id;
      var starte = event.start;
      var ende = event.end;
      var start = calendar.formatIso(starte);
      var start1 = start.replace("T", " ");
      var start2 = start1.split('+');
      var start3 = start2[0];
      var end = calendar.formatIso(ende);
      var end1 = end.replace("T", " ");
      var end2 = end1.split('+');
      var end3 = end2[0];
      $.ajax({
        url: "update.php",
        type: "POST",
        data: {
          start: start3,
          end: end3,
          id: id
        },
        success: function() {
          calendar.refetchEvents()
        }
      })
    },

  });
  calendar.render();
  $('#cursus tbody').on('click', 'tr', function() {
    var row = this.closest('tr');
    var table = $('#cursus').DataTable()
    var cursus_id = table.row(row).data()[1]
    alert(cursus_id);
    calendar.refetchEvents()
  });
});

• javascript
• jquery
• ajax
• fullcalendar
• fullcalendar-4

Share Follow edited Jun 27, 2019 at 8:24 ADyson 62.2k1616 gold badges7979 silver badges9292 bronze badges asked Jun 26, 2019 at 21:44 RoyBernerRoyBerner 5511 silver badge1010 bronze badges 4

• 4 It's probably worth reading the section titled "Dynamic extraParams parameter" in the events-as-a-json-feed documentation – ADyson Commented Jun 27, 2019 at 8:27
• Thank you for your ment. But if i understand it correctly the Dynamic extraParams is for sending a calcutated parameter for example. I need to send selected parameters. In the alert i see the correct cursus_id, but i can't send it as a parameter. – RoyBerner Commented Jun 27, 2019 at 21:13
• It doesn't have to be something actually calculated, it just gives you the opportunity to read a value as it exists at the time the AJAX call is made (rather than at the time you defined the event source, which is what you have now). So for example you could write return { cursus_id: localStorage.getItem("cursus_id") }; or return { someValue: document.getElementById("someValue").value };, or whatever else you need. – ADyson Commented Jun 28, 2019 at 10:18
• Thanks! Now i understand how to use it. – RoyBerner Commented Jun 28, 2019 at 14:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

i've the same problem and this method works for me...
every time i need to change one of the extraParams i do that and next i call calendar.refetchEvents();

events: {
      url: 'load_select.php',
      method: 'POST',
      extraParams: function(){
        return {
          cursus_id: cursus_id,
          evenement_id: evenement_id,
          locatie_id: locatie_id,
          trainer_id: trainer_id
        }
      },
      failure: function() {
        alert('there was an error while fetching events!');
      },
    },
    ...

Just put "data" instead of "extraParams" in "events"

  events: {
    url: 'service.php',
    method: 'POST',
    data: {
        custom_param1: 'something',
        custom_param2: 'somethingelse'
    },
    failure: function() {
        alert('there was an error while fetching events!');
    },
  },

You just need to put the eventSources tag. If you want to dynamicly send an extraParam, then you need to create a global calendar var and render it again in an init method.

eventSources: {
    url: 'service.php',
    method: 'POST',
    extraParams: {
        custom_param1: 'something',
        custom_param2: 'somethingelse'
    },
    failure: function() {
        alert('there was an error while fetching events!');
    },
  },