0

Estoy trabajando con FullCalendar. Guardo eventos y base de datos con esta estructura:

                {
                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'
               }

y los recibo correctamente de esta forma:

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

El problema me viene que quiero mostrar solos los eventos que recibo que tengan por ejemplo el nombre de 'Pepe'.

¿Alguna idea para hacerlo? Un saludo y gracias

0

1 respuesta 1

2

Para realizar lo que necesitas, fullCalendar tiene un evento que filtra el calendario de acuerdo a una condición o valor, el cual se implementa mediante el evento eventRender; entonces lo que necesitarías sería incluir en tu DOM algún elemento donde puedas filtrar, en este caso un 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>

Destaco que la respuesta se basa en la solución indicada acá

Nos comentas colega =)

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.