Tengo el siguiente fullcalendar y está cargando los datos del mes actual. Esto se está cargando correctamente con todos los events .
$(document).ready(function() { var d = new Date(); var defaultMonth = d.getMonth() + 1; var defaultYear = d.getFullYear(); $.ajax({ type: "POST", url: "calendarChangeAjax.php", data: { selectedMonth: defaultMonth, selectedYear: defaultYear }, success: function(mainResult) { var mainResults = JSON.parse(mainResult); console.log(mainResults); populateCalendar(mainResults); } }); }); function populateCalendar(jArray) { var colors = "white"; var dict = []; var details; for (i = 0; i < jArray["start"].length; i++) { var dates = jArray["start"][i]; if (jArray["title"][i] != null) { details = jArray["title"][i]; colors = "#E0F8E0"; dict.push({ "title": details, "start": dates, "color": colors }); } } jArray.length = 0; // var todayDate = new Date(); $('#calendar').fullCalendar({ // defaultDate: todayDate, eventLimit: true, // allow "more" link when too many events events: dict }); } <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script> <div class="ui container"> <div class="ui grid"> <div class="ui sixteen column"> <div id="calendar"></div> </div> </div> </div> Los siguientes son los códigos en el archivo Ajax calendarChangeAjax.php
$selectedMonth = $_POST['selectedMonth']; $selectedYear = $_POST['selectedYear']; $detailsArray = []; $datesArray = []; $query = "SELECT * FROM supervisorupdate WHERE MONTH(dateAdded) = '$selectedMonth' AND YEAR(dateAdded) = '$selectedYear' AND status =0"; $queryExecute = mysqli_query($conn, $query); while ($queryExecuteResults = mysqli_fetch_array($queryExecute)) { $oa1 = $queryExecuteResults['oa1']; $oa2 = $queryExecuteResults['oa2']; $dateAdded = date("Ymd", strtotime($queryExecuteResults['dateAdded'])); $singleDetail = $oa1.$oa2; array_push($detailsArray, $singleDetail); array_push($datesArray, $dateAdded); } $detailsDictionary = ["title" => $detailsArray]; $datesDictionary = ["start" => $datesArray]; $completedDictionary = array_merge($detailsDictionary, $datesDictionary); echo json_encode($completedDictionary); Quiero que el fullcalendar cambie los events cuando haga clic en el botón del próximo mes según ese mes. Así que agregué los siguientes códigos
$('body').on('click', 'button.fc-next-button', function() { var selectedMonth = $('#calendar').fullCalendar('getView').intervalStart.format('MM'); var selectedYear = $('#calendar').fullCalendar('getView').intervalStart.format('YYYY'); $.ajax({ type: "POST", url: "calendarChangeAjax.php", data: { selectedMonth: selectedMonth, selectedYear: selectedYear }, success: function(nextResult) { var nextResults = JSON.parse(nextResult); console.log(nextResults); populateCalendar(nextResults); } }); }); nextResults correctamente de la llamada Ajax .
{title: Array(7), start: Array(7)}
Pero de alguna manera, los eventos no se muestran cuando hago clic en el botón siguiente. Siempre muestra solo los datos predeterminados cuando se carga el fullcalendar por primera vez. ¿Alguien me puede ayudar en esto?
Actualización: como se señaló en los comentarios (gracias @ADyson), su JS hace referencia a Fullcalendar v3. Eso es bastante viejo ahora, v5 es actual. Mi respuesta original hacía referencia a documentos v5, también he actualizado con enlaces/opciones v3.
Aquí hay un ejemplo súper simple. Notas:
Si no especifica una initialDate (v5) , (o defaultDate en v3 ), la fecha actual será predeterminada, por lo que no es necesario configurar la fecha actual.
Si configura un feed JSON para events: , Fullcalendar usará GET para solicitarlos. Si quiere usar POST, puede hacerlo, usando el formato extendido eventSources (v5) ( o v3 ). Sin embargo, la convención es que POST es para cambiar datos (por ejemplo, hacer una compra, actualizar un registro), mientras que GET es para leer datos. AFAICT, solo está cargando datos de eventos, que en realidad deberían ser un GET. Sugeriría apegarse a la convención y actualizar su back-end para responder a GET en lugar de POST.
Fullcalendar hará automáticamente una nueva solicitud a su fuente de eventos cuando necesite nuevos datos, por ejemplo, cuando navegue a un nuevo mes. No es necesario agregar ningún código para manejar eso manualmente.
JS (v5):
document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', dayMaxEventRows: 3, // I think this is the v5 equivalent of eventLimit events: 'calendarChangeAjax.php', }); calendar.render(); });JS (v3):
// Fullcalendar v3 with jQuery $(document).ready(function() { $('#calendar').fullCalendar({ eventLimit: true, // allow "more" link when too many events events: 'calendarChangeAjax.php', }); });No estoy seguro exactamente de qué está haciendo su PHP con los 2 conjuntos de resultados combinados. Pero siempre que genere un feed JSON a partir de una matriz que se vea así, Fullcalendar lo manejará:
[ { "title": "Event 1", "start": "2019-09-05T09:00:00", "end": "2019-09-05T18:00:00", "color: "#E0F8E0" }, { "title": "Event 2", "start": "2019-09-08", "end": "2019-09-10", "color: "#E0F8E0" } ]Los documentos describen otras propiedades que puede agregar a sus eventos.