Estoy implementando fullcalendar con Laravel, al momento de hacer click en cualquier día del calendario me arroja la hora local, da igual el día que seleccione, ejemplo (si doy click en el día 31 de diciembre me muestra la fecha de hoy que seria el 30).
Ya implementé los archivos (fullcalendar, moment, jquery, etc.) localmente y por cdn por si ese era el error pero nada, también estuve viendo videos pero lo único que encontré fue que pudiera estar formateando mal la hora de inicio.
El código es el siguiente:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.0.2/index.global.js">
</script>
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="text-center mt-5">FullCalendar js Laravel series with Career Development
Lab</h3>
<div class="col-md-11 offset-1 mt-5 mb-5">
<div id="calendar">
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="eventoModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Guardar cita</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<input type="text" class="form-control" id="title">
<span id="titleError" class="text-danger"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary" id="saveBtn">Guardar</button>
</div>
</div>
</div>
</div>
Mi script es el siguiente:
document.addEventListener('DOMContentLoaded', function() {
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
aspectRatio: 2,
//events:@json($eventos),
selectable: true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
select: function(start, end, allDays) {
$('#eventoModal').modal('toggle');
$('#saveBtn').click(function() {
var evento = $('#title').val();
var start_date = moment(start).format('YYYY-MM-DD');
var end_date = moment(end).format('YYYY-MM-DD');
console.log(evento);
console.log(start_date);
console.log(end_date);
});
}
});
calendar.render();
});
Esto es lo que me arroja: