Event filter in FullCalendar

Question

Event filter in FullCalendar

Navigation

#1 by (1 votes)

0

I am working with FullCalendar. I keep events and database with this structure:

                {
                id: 1,
                title: 'evento',
                nombre: 'Juan',
                start: '2018-09-05',
                end: '2018-09-07'
               },
                {
                id: 2,
                title: 'evento',
                nombre: 'Pepe',
                start: '2018-09-05',
                end: '2018-09-07'
               }

and I receive them correctly in this way:

  $('#calendario').fullCalendar({
  events: 'http://192.168.1.162/carpeta/eventos.php'
   )}

The problem comes to me that I want to show alone the events that I receive that have for example the name of 'Pepe'.

Any ideas to do it? Greetings and thanks

fullcalendar

asked by Carlos Rayón Álvarez 21.09.2018 в 12:40

source

1 answer

Save result of Array in Mysql How to send variables from one PHP to another and retrieve them to use them?

score 1 · Accepted Answer

To do what you need, fullCalendar has an event that filters the calendar according to a condition or value, which is implemented by the eventRender ; then what you would need would be to include in your DOM some element where you can filter, in this case a select

$(document).ready(function(){
  var list = [
    { 
      id: 1,
      title: 'evento',
      nombre: 'Juan',
      start: '2018-09-05',
      end: '2018-09-07'
    },
    {
      id: 2,
      title: 'evento',
      nombre: 'Pepe',
      start: '2018-09-05',
      end: '2018-09-07'
    }
  ]
  
  
  $('#calendar').fullCalendar({
    defaultView: 'month',
    events: list,
    eventRender: function(event, element, view){
      return ['all', event.nombre].indexOf($('#selector').val()) >= 0
    }
  });
  
  $('#selector').on('change',function(){
    $('#calendar').fullCalendar('rerenderEvents');
  })
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <select class="form-control col-md-4 mb-4 mt-4" id="selector">
    <option value="all">Todos</option>
    <option value="Juan">Juan</option>
    <option value="Pepe">Pepe</option>
  </select>
  
  <div id="calendar"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>

I stress that the answer is based on the indicated solution here

You tell us colleague =)