JQuery - full calendar filtrar eventos

 
Vista:

full calendar filtrar eventos

Publicado por Roberto (6 intervenciones) el 20/06/2018 01:28:53
Buenas estoy intentando filtrar eventos en mi full calendar a traves de un select option. De momento no logro hacerme con ello. Lo he intentado de varias formas pero nada. Os paso mi codigo a ver si me podeis echar una mano. Gracias.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
//    La sacamos fuera para poder utilizarla en todo momento 
 
var Nuevo_Evento;
 
$("#boton-filtro").click(function(){
   RecolectarDatosfiltros();
   EnviarInformacion('filtrar',Nuevo_Evento);
});
function RecolectarDatosfiltros(){
 
    Nuevo_Evento = {
           filtro:$('#actividades_selector').val() //actividades_selector es el select que contiene las opciones por las que quiero filtrar el full calendar
 
       };
 
}
function EnviarInformacion(accion,objEvento){
    $.ajax({
       type:'POST',
       url:'actividades.php?accion='+accion,
       data:objEvento,
       success:function(msg){
           if(msg){
               $('#calendario_actividades').fullCalendar('removeEvents');
                $('#calendario_actividades').fullCalendar('refetchEvents');
 
           }
       },
       error:function(){
           alert("hay un error...");
       }
 
    });
}
 
</script>

el php, "activiades.php" contiene este codigo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
header('Content-type: application/json');
$datos = new PDO("mysql:dbname=nombre_bd;host:127.0.0.1","root","pass");
 
$accion=(isset($_GET['accion']))?$_GET['accion']:'leer';
switch($accion){
    case 'filtrar':
            $filtro = $_POST['filtro'];
            $url = "SELECT * FROM ACTIVIDADES WHERE title = '$filtro'";
            $sql = $datos->prepare("SELECT * FROM ACTIVIDADES WHERE title = 'CICLO'");
            $sql->execute();
            $resultado = $sql->fetchAll(PDO::FETCH_ASSOC);
            echo json_encode($resultado);
            break;
        default:
 
            $sql = $datos->prepare("SELECT * FROM ACTIVIDADES");
            $sql->execute();
            $resultado = $sql->fetchAll(PDO::FETCH_ASSOC);
            echo json_encode($resultado);
        break;
}

Este php contiene otros case como agregar, eliminar y demas y esos funcionan perfectamente. Lo que necesito es poder filtrar eventos. Esta es una app de actividades deportivas que los socios tiene que reservar y quiero que puedan filtrar por cualquiera de las actividades para ver que dias están disponibles. Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema
Val: 32
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

full calendar filtrar eventos

Publicado por txema (9 intervenciones) el 21/06/2018 10:44:07
No veo la parte del script donde descargas los eventos a mostrar.
Debería quedar así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
        $(document).ready(function() {
            var filtro = $('#actividades_selector').val();
            var $calendar = $('#calendar').fullCalendar({
///...
                events: {
                    url: 'actividades.php?title='+filtro,
                    type: 'POST',
                    error: function() {
                        alert('Error al buscar eventos');
                    }
                },
///..
            });
        });
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

full calendar filtrar eventos

Publicado por Roberto (6 intervenciones) el 22/06/2018 01:50:45
Los descargo en este script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script>
//    La sacamos fuera para poder utilizarla en todo momento 
 
var Nuevo_Evento;
 
$("#boton-filtro").click(function(){
 
    RecolectarDatosfiltros();
    EnviarInformacion('filtrar',Nuevo_Evento);
 
});
 function RecolectarDatosfiltros(){
 
    Nuevo_Evento = {
 
        filtro:$('#actividades_selector').val(),
 
    };
 
}
function EnviarInformacion(accion,objEvento){
    $.ajax({
       type:'POST',
       url:'actividades.php?accion='+accion,
       data:objEvento,
       success:function(resultado){
           if(resultado){
 
                $('#calendario_actividades').fullCalendar('refetchEvents')
 
           }
       },
       error:function(){
           alert("hay un error...");
       }
 
    });
}
</script>

He comprobado que los parametros llegan al archivo actividades.php. Llegan tanto el accion:filtrar como el filtro:lo que se seleccione.
El problema yo creo que esta al hacer el json_enconde pq no logro ver el rersultado de vuelta en la funcion.
Lo cierto es que llevo muchas horas con este tema del filtro y ya no se por donde tirar.
seguro que es una tonteria pero estoy ya que no veo nada.
el fullcalendar lo tengo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$('#calendario_actividades').fullCalendar({
    height: 650,
    width: 1900,
    defaultView: 'agendaWeek',
    editable:true,
 
    header: {
        left: '',
        center: '',
        right: 'agendaWeek,listWeek,month'
    },
    views: { // set the view button names
        listWeek: {buttonText: 'Diario'}
 
    },
 
 
    events:'http://localhost/Bpxport/actividades.php',
 
    eventClick:function(calEvent,jsEvent,view){
 
        $('#txtID').val(calEvent.id);
        $('#txtActividad').val(calEvent.title);
        $('#txtMoniSala').val(calEvent.descripcion);
 
        $('#txtColor').val(calEvent.color);
         //En la variable FechaHora se divide con split porr un lado la fecha [0](recoge hasta el primer espacio) y por otro la hora [1](recoge despues del espacio)
        FechaHora = calEvent.start._i.split(" ");
 
 
        $('#txtFecha').val(FechaHora[0]);
        $('#txtHora').val(FechaHora[1]);
 
        $("#Modal_reservas").modal();
 
    },
    eventRender: function(event, element) {
      element.find('.fc-title').append("<br/>" + event.descripcion);
     }
    });
});
 
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 32
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

full calendar filtrar eventos

Publicado por txema (9 intervenciones) el 22/06/2018 07:46:04
Prueba a poner en una ventana del navegador http://localhost/Bpxport/actividades.php

Tendrías que ver el JSON completo.
En principio, el código lo veo correcto. Si te da algún error habría que depurarlo.

Después, filtra los valores del json como te indicaba anteriormente. Cambia la línea
1
events:'http://localhost/Bpxport/actividades.php',
por
1
events:'http://localhost/Bpxport/actividades.php?title='+filtro,

Ten en cuenta que la variable filtro ha de ser global para que pueda realizar su trabajo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

full calendar filtrar eventos

Publicado por Roberto (6 intervenciones) el 23/06/2018 00:55:07
Hola. Ejecutando http://localhost/bpxport/activades.php me muestra correctamente todas las actividades.
[{"id":"1","title":"BODY BALANCE","descripcion":"SALA ACTIVITY","start":"2018-05-10 10:00:00","end":"2018-05-10 10:00:00","color":"#ff0000","textcolor":"#FFFFFF"},{"id":"2","title":"ZUMBA","descripcion":"SALA ACTIVITY","start":"2018-05-21 09:00:00","end":"2018-05-21 09:00:00","color":"#ff0000","textcolor":"#FFFFFF"},{"id":"5","title":"PILATES","descripcion":"SALA CORPORE","start":"2018-05-27 09:30:00","end":"2018-05-27 09:30:00","color":"#ff0000","textcolor":"#FFFFFF"},{"id":"6","title":"TONIFICACION","descripcion":"SALA ACTIVITY","start":"2018-05-25 10:30:00","end":"2018-05-25 10:30:00","color":"#fff700","textcolor":"#FFFFFF"},{"id":"7","title":"CICLO","descripcion":"SALA CICLO","start":"2018-05-25 11:30:00","end":"2018-05-25 11:30:00","color":"#00ff5c","textcolor":"#FFFFFF"},{"id":"10","title":"ABDOMINALES","descripcion":"Zona funcional","start":"2018-06-11 08:45:00","end":"2018-06-11 08:45:00","color":"#ff0000","textcolor":"#FFFFFF"},{"id":"11","title":"BODY BALANCE","descripcion":"Sala Corpore","start":"2018-06-11 09:15:00","end":"2018-06-11 09:15:00","color":"#d9eb5f","textcolor":"#FFFFFF"},{"id":"12","title":"CICLO","descripcion":"Sala Ciclo","start":"2018-06-11 09:15:00","end":"2018-06-11 09:15:00","color":"#1be8ea","textcolor":"#FFFFFF"},{"id":"13","title":"BODY PUMP","descripcion":"Sala Activity","start":"2018-06-11 09:30:00","end":"2018-06-11 09:30:00","color":"#1aea32","textcolor":"#FFFFFF"},{"id":"14","title":"CICLO","descripcion":"Sala Ciclo","start":"2018-06-12 08:30:00","end":"2018-06-12 08:30:00","color":"#1eedf0","textcolor":"#FFFFFF"},{"id":"16","title":"BODY BALANCE","descripcion":"Sala Activity","start":"2018-06-12 09:15:00","end":"2018-06-12 09:15:00","color":"#33f735","textcolor":"#FFFFFF"},{"id":"17","title":"ABDOMINALES","descripcion":"Sala Funcional","start":"2018-06-13 08:45:00","end":"2018-06-13 08:45:00","color":"#ff0000","textcolor":"#FFFFFF"},{"id":"18","title":"CICLO","descripcion":"Sala Ciclo","start":"2018-06-13 09:15:00","end":"2018-06-13 09:15:00","color":"#1bdff5","textcolor":"#FFFFFF"},{"id":"19","title":"TONIFICACION","descripcion":"Sala Activity","start":"2018-06-13 11:00:00","end":"2018-06-13 11:00:00","color":"#ecb2e9","textcolor":"#FFFFFF"},{"id":"20","title":"CICLO","descripcion":"Sala Ciclo","start":"2018-06-14 08:30:00","end":"2018-06-14 08:30:00","color":"#25eee5","textcolor":"#FFFFFF"},{"id":"21","title":"CICLO","descripcion":"Sala Ciclo","start":"2018-06-15 09:15:00","end":"2018-06-15 09:15:00","color":"#25eee5","textcolor":"#FFFFFF"},{"id":"22","title":"CICLO","descripcion":"Sala Ciclo","start":"2018-06-16 10:15:00","end":"2018-06-16 10:15:00","color":"#25eee5","textcolor":"#FFFFFF"},{"id":"23","title":"ABDOMINALES","descripcion":"Zona Funcional","start":"2018-06-14 09:30:00","end":"2018-06-14 09:30:00","color":"#f32307","textcolor":"#FFFFFF"},{"id":"24","title":"CORE","descripcion":"Sala Corpore","start":"2018-06-14 11:15:00","end":"2018-06-14 11:15:00","color":"#dec4c4","textcolor":"#FFFFFF"},{"id":"26","title":"CORE","descripcion":"Sala Corpore","start":"2018-06-15 11:30:00","end":"2018-06-15 11:30:00","color":"#f3f720","textcolor":"#FFFFFF"},{"id":"27","title":"HIT","descripcion":"Sala Activity","start":"2018-06-16 11:00:00","end":"2018-06-16 11:00:00","color":"#5b5b41","textcolor":"#FFFFFF"},{"id":"28","title":"HIPOPILATES","descripcion":"Sala Activity","start":"2018-06-12 10:45:00","end":"2018-06-12 10:45:00","color":"#ff0000","textcolor":"#FFFFFF"}]

Lo que no entiendo es pq tengo que modificar la linea events:'http://localhost/Bpxport/actividades.php?title='+filtro,

Pensaba que los parametros para filtrar se los pasaba en esta funcion

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function EnviarInformacion(accion,objEvento){
 
    $.ajax({
       type:'POST',
       url:'actividades.php?accion='+accion,
       data:objEvento,
       success:function(resultado){
           if(resultado){
                $('#calendario_actividades').fullCalendar('refetchEvents')
           }
       },
 
       error:function(){
           alert("hay un error...");
       }
    });
}

Esta funcion si que he comprobado que envia como parametros accion:'filtrar' y filtro:'la actividad que seleccione del option'

lo que no entiendo es pq no pasa por el case si los parametros llegan. En el case 'filtrar' creo que está el codigo correcto para que se refresquen los eventos ya filtrados. No entiendo nada la verdad. Parece una cosa simple pero se esta compliacdo demasiado.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 32
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

full calendar filtrar eventos

Publicado por txema (9 intervenciones) el 23/06/2018 03:48:19
Como ves, el JSON te ha traído TODOS los datos sin filtrar. Sencillamente porque http://localhost/bpxport/activades.php que llamas desde events no tiene asociada ninguna acción.

Es decir, que en activades.php está enviando el JSON desde default:, o lo que es lo mismo, entendiendo que la accion por defecto es leer.

Para que nos tome el JSON con los valores ya filtrados, y desde case 'filtrar': tenemos que completar la ruta.
Así que, (me corrijo) te sugiero que pases por GET el filtro a actividades.php de forma que el archivo quedarría así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
header('Content-type: application/json');
$datos = new PDO("mysql:dbname=nombre_bd;host:127.0.0.1","root","pass");
 
$accion=(isset($_GET['accion']))?$_GET['accion']:'leer';
switch($accion){
    case 'filtrar':
            $filtro = $_GET['filtro'];
            $url = "SELECT * FROM ACTIVIDADES WHERE title = '$filtro'";
            $sql = $datos->prepare("SELECT * FROM ACTIVIDADES WHERE title = $filtro'");
            $sql->execute();
            $resultado = $sql->fetchAll(PDO::FETCH_ASSOC);
            echo json_encode($resultado);
            break;
        default:
 
            $sql = $datos->prepare("SELECT * FROM ACTIVIDADES");
            $sql->execute();
            $resultado = $sql->fetchAll(PDO::FETCH_ASSOC);
            echo json_encode($resultado);
        break;
}

Y ahora sí, nuestro enlace en events sería
1
events:'http://localhost/Bpxport/actividades.php?accion=filtrar&title='+filtro

Corregido $_GET['filtro'] prueba, como te había recomendado anteriormente, a llamar a la página, con
1
2
3
events:'http://localhost/Bpxport/actividades.php?accion=filtrar&title=CICLO
//  O tomando otro filtro //
events:'http://localhost/Bpxport/actividades.php?accion=filtrar&title=ABDOMINALES
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

full calendar filtrar eventos

Publicado por Roberto (6 intervenciones) el 23/06/2018 14:08:05
Hola. Estoy probando tus sugerencias y no lo consigo. Por GET envia estos parametros. sin pasarle filtros.

accion:"filtrar"
title:"TODAS"
start:"2018-06-18T00:00:00"
end:"2018-06-25T00:00:00"
_:"1529755219318"

El start y el end no se pq los envia tambien. Puede que esto sea un problema.
No entiendo pq en el enlace a events hay que utilizar title si luego no se llama a ese parametro en ningun sitio.

He probado a llamar a la pagina enviado CICLO Y ABDOMINALES Y tampoco me devuelve nada.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

full calendar filtrar eventos

Publicado por Roberto (6 intervenciones) el 23/06/2018 19:23:34
El problema que veo es que por GET siempre llega del select 'TODAS' que es la primera opcion del select. Es como si no cogiera el valor seleccionado para enviarlo por GET. por POST si que lo envia correctamente pero sigue sin filtrarme claro.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

full calendar filtrar eventos

Publicado por Roberto (6 intervenciones) el 24/06/2018 02:12:51
Comprobado si lo recibo por GET siempre me trae la primera opcion del select que es TODAS. Por POST si que llega el filtro seleccionado pero tampoco filtra nada.

1
2
3
4
5
6
7
8
9
10
11
12
13
case 'filtrar':
    $filtro = $_GET['filtro'];
    if ($filtro == 'TODAS'){
        $url = "SELECT * FROM ACTIVIDADES";
        $sql = $datos->prepare("SELECT * FROM ACTIVIDADES");
    }else{
        $url = "SELECT * FROM ACTIVIDADES WHERE title = $filtro";
        $sql = $datos->prepare("SELECT * FROM ACTIVIDADES WHERE title = $filtro");
    }
    $sql->execute();
    $resultado = $sql->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($resultado);
    break;

He cambiado un poco la funcion de EnviarInformacion().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("#boton-filtro").click(function(){
    filtro = $('select[name="actividades_selector"] option:selected').text();
    EnviarInformacion();
 
});
 
function EnviarInformacion(){
    $.ajax({
       type:'POST',
       url:'actividades.php?accion=filtrar&filtro='+filtro,
       success:function(){
            $('#calendario_actividades').fullCalendar('refetchEvents');
 
       },
       error:function(){
           alert("hay un error...");
       }
 
    });
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

full calendar filtrar eventos

Publicado por Braulio (1 intervención) el 02/06/2021 20:36:23
Y te funcionó el filtro... a ver si me compartes el código y tu experiencia ya que ando en lo mismo...Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar