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
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..
Más sin embargo en el calendario no se ve reflejado ningún evento que he extraído, ¿alguna recomendación?, desde ya, gracias.