0

Tengo la intención de implementar fullcalendar en un proyecto que estoy realizando para la universidad, se visualiza correctamente, más sin embargo no logro mostrar eventos extraídos de mi base de datos, aquí anexo lo que llevo...

Este es mi HTML

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Peticiones de Servicios</title>
    <link rel="stylesheet" href="css/fullcalendar.css">
    <link href='css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
    <link rel="stylesheet" href="css/calendario.css">
    <!-- jQuery -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/umd/popper.min.js"></script>
    <!-- bootstrap -->
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- fullcalendar -->
    <script src="js/moment.min.js"></script>
    <script src="js/fullcalendar.js"></script>
    <script src="js/locale/es.js"></script>
    <script src="js/calendario.js"></script>
    <!-- image-picker -->
    <script src="js/image-picker.min.js"></script>
    <link rel="stylesheet" href="css/image-picker.css">
</head>

<body>

    <div id='calendar'></div>

</body>

</html>

Este es el archivo PHP donde almaceno las consultas del proyecto... consultas.php

<?php	
	class Consultas
	{        
        public function cargarEventosPorMesAPartirDeFechaActual(){
            $fecha;
            $fecha = date('Y-m-d');            
            
            $modelo = new Conexion();
            $conexion = $modelo->get_conexion();
            $sql = "SELECT tipoServicio, inicioSolicitud, finSolicitud, estadoServicio, idUsuario
                    FROM servicios
                    INNER JOIN peticiones ON servicios.idPeticion = peticiones.idPeticion
                    WHERE CAST(peticiones.inicioSolicitud AS DATE) >= $fecha
                    AND peticiones.finSolicitud < DATE_ADD( '$fecha', INTERVAL 1 MONTH)";
			$statement = $conexion->prepare($sql);
			$statement->execute();			
			return $statement->fetchAll(PDO::FETCH_ASSOC);
        }
    }
?>

Y este archivo PHP es a donde realizo la petición AJAX.... cargarEventos.php

<?php

	require_once('../Modelo/class.conexion.php');
	require_once('../Modelo/class.consultas.php');

	$consultas = new Consultas();
	$datos = $consultas->cargarEventosPorMesAPartirDeFechaActual();

	$results = (count($datos) > 0) ? $datos : array("error"=>"No hay opciones en la BD");
	$arrayJson = json_encode($results);
	print_r($arrayJson);

?>

Como ya tengo registros que realicé manualmente, cuando corro en mi servidor local http://localhost/RespaldoRecuperacion/Controlador/cargarEventos.php obtengo en pantalla los registros con formato JSON

introducir la descripción de la imagen aquí

Y este es mi archivo JS en donde realizó la peticion AJAX, aquí también inicio el calendario y apunto al Div que lo contendrá.

$(document).ready(function () {
    //Declaramos el arreglo que contendra los eventos
    var eventosBD = new Array();
    
    var tipoServicio, inicioSolicitud, finSolicitud, estadoServicio, idUsuario, nombreClase;
    
    $.get('Controlador/cargarEventos.php', function(data) {         
    	$.each(data, function(idx, opt) {    		            
            idUsuario = (data[idx].idUsuario);            
            tipoServicio = (data[idx].tipoServicio);            
            inicioSolicitud = (data[idx].inicioSolicitud);            
            finSolicitud = (data[idx].finSolicitud);            
            estadoServicio = (data[idx].estadoServicio);            
            
            if(estadoServicio == 1){
              nombreClase = 'tareas-realizadas';
            }            
            eventosBD =    
                [
                    {
                        title: tipoServicio,
                        start: inicioSolicitud,
                        end: finSolicitud,
                        className: nombreClase
				    }
                ]            
            console.log(eventosBD);
	    });
	}, 'json');

    var date = new Date();
    
    // page is now ready, initialize the calendar...
    var initialLocaleCode = 'es';
    $('#calendar').fullCalendar({
        // put your options and callbacks here
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listMonth'
        },
        defaultView: 'month',
        defaultDate: date,
        locale: initialLocaleCode,
        dayClick: function (date, jsEvent, view) {
        //CODIGO QUE NO TIENE NADA QUE VER EN ESTA PREGUNTA
          },
        events: eventosBD
    })

});

En ese console.log(eventosBD); en mi archivo JS me regresa esto en la consola..

introducir la descripción de la imagen aquí

Más sin embargo en el calendario no se ve reflejado ningún evento que he extraído, ¿alguna recomendación?, desde ya, gracias.

1 respuesta 1

0

Para la persona interesada....

Cambié mi cargarEventos.php y trate lo que me arrojaba el cargarEventosPorMesAPartirDeFechaActual()

Quedando de la siguiente manera....

<?php

	require_once('../Modelo/class.conexion.php');
	require_once('../Modelo/class.consultas.php');

	$consultas = new Consultas();
	$datos = $consultas->cargarEventosPorMesAPartirDeFechaActual();

    $eventos = array();    

    foreach($datos as $resultado){
        $title = $resultado['tipoServicio'];
        $start = $resultado['inicioSolicitud'];
        $end = $resultado['finSolicitud'];
        $id = $resultado['idUsuario'];
        $clase = $resultado['estadoServicio'];
        if($clase=='1'){
            $clase = "tareas-realizadas";
        }elseif($clase == '2'){
            $clase = "tareas-programadas-vigentes";
        }elseif($clase == '3'){
            $clase = "tareas-programadas-vencidas";
        }else{
            $clase = "peticion-sin-asignar";
        }
        
        $eventos[] = array('id' => $id, 'title' => $title, 'start' => $start, 'end' => $end, 'className' => $clase);
    }
        
    $arrayJson = json_encode($eventos, JSON_UNESCAPED_UNICODE);
    print_r($arrayJson);	
?>

Y mi archivo js donde cargo mi calendario y sus eventos de la siguiente manera...

$(document).ready(function () {
  
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    // page is now ready, initialize the calendar...
    var initialLocaleCode = 'es';
    $('#calendar').fullCalendar({
        // put your options and callbacks here
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listMonth'
        },
        events: {
        url: 'Controlador/cargarEventos.php',
        cache: true
    },
        defaultView: 'month',
        defaultDate: date,
        locale: initialLocaleCode,
        dayClick: function (date, jsEvent, view) {
            //CODIGO SIN IMPORTANCIA
        }        
    })

});

De esa manera ya puedo visualizar en mi calendario los eventos que extraigo de mi base de datos...

¡Saludos y éxito!

2
  • 1
    me ha servido mucho tu caso! Gracias por postear la solución.
    – Carmen B.
    Commented el 26 may. 2018 a las 23:21
  • De nada, me alegro que te sirva la solucion que propuse en el post, saludos! Commented el 27 may. 2018 a las 20:36

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.