Search in Fullcalendar.js

Asked

Viewed 279 times

0

How to do that when typing a text in the input Fullcalendar.js it filters the content. I’ve tried the eventRender more not succeeded.

document.addEventListener("DOMContentLoaded", function() {
  var calendarEl = document.getElementById("calendar");
  let calendar = new FullCalendar.Calendar(calendarEl, {
    locale: "pt-br",
    plugins: ["interaction", "dayGrid", "timeGrid", "list"],
    header: {
      left: "prev,next",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay"
    },
    customRender: true,
    editable: false,
    navLinks: true, 
    eventLimit: true,
    timeZone: "UTC",
    events: {
      url: "json/events.json",
      failure: function() {
      }
    },
    eventDataTransform: function(eventData) {
      return {
        title: eventData.diaSemana,
        start: eventData.dataAssembleia
      };
    },
    eventClick: function(eventData) {
      eventData.el.style.borderColor = "red";
      alert("O Evento é: " + eventData.event.title);
    }
  });
  calendar.render();
});
    <input type="text" id="numero" placeholder="Nome do Evento" />
    <div id="calendar"></div>

fullcalendar

  • In this filter you will reload the data from the server ? or you want to filter the events that are already set in Callendar ?

  • Type when the person type diaSemana only appear in the calendar what they want

1 answer

1


You can create a function to pick up events from FullCalendar and add a class items you want to hide according to the filter, and call it every time your filter input is changed.

Example of function: 

function filterCalendar() {
    var events = $("#calendar").fullCalendar('clientEvents');

    events.map(function (event) {
        console.log(event);

        // o objeto event possui todas as propriedades que voce difiniu nele.
        // Voce consegue fazer o seu filtro por qualquer uma delas, por exemplo o titulo.
        if (evento.title.indexOf($('#inputFilter').val())) {
            event.className[0] = 'filter-hidden';        
        } else {
            event.className[0] = '';        
        }

        $('#calendar').fullCalendar('updateEvent', event);        
    });
}

And in his cssyou set for this class to hide the objects, as in the example below:

.filter-hidden {
    display: none;
}

Useful Fullcalendar Doc Links:

https://fullcalendar.io/docs/v3/clientEvents

https://fullcalendar.io/docs/v3/updateEvent

https://fullcalendar.io/docs/v3/removeEvents

https://fullcalendar.io/docs/v3/event-object

Browser other questions tagged fullcalendar

You are not signed in. Login or sign up in order to post.