Mi problema radica en la forma de deshabilitar un rango de fechas en FullCalendar (no estoy hablando de deshabilitar fechas anteriores al día actual o días posteriores a una fecha específica).
Aquí se encuentra mi código:
$(document).ready(function () {
var anioActual = new Date().getFullYear();
var finDeAnio = new Date(anioActual, 11, 31);
var intervaloFechas;
calcularIntervaloFechas()
.then(data => {
intervaloFechas = data;
console.log('Intervalo de fechas:', intervaloFechas);
var calendar = $('#calendario').fullCalendar({
locale: 'es',
selectable: true,
validRange: {
start: new Date(),
end: finDeAnio,
},
select: function (start, end) {
var fechaInicio = start.format('YYYY-MM-DD');
var fechaFin = end.format('YYYY-MM-DD');
const usuario = localStorage.getItem('usuario');
console.log('Usuario:', usuario);
obtenerAntiguedad(usuario)
.then((antiguedadUsuario) => {
if (antiguedadUsuario !== null) {
var diasPermitidos = calcularDiasPermitidos(antiguedadUsuario);
var diasSeleccionados = end.diff(start, 'days') + 1;
if (diasSeleccionados <= diasPermitidos) {
$('#fecha_inicio').val(fechaInicio);
$('#fecha_fin').val(fechaFin);
} else {
alert('No puedes seleccionar más de ' + diasPermitidos + ' días.');
}
} else {
console.error('No se pudo obtener la antigüedad del usuario.');
}
})
.catch((error) => {
console.error('Error al obtener la antigüedad del usuario:', error);
});
},
dayClick: function () {
$('#fecha_inicio').val('');
$('#fecha_fin').val('');
},
dayRender: function (date, cell) {
console.log('Fecha actual:', date);
if (intervaloFechas.includes(date)) {
cell.addClass('bloqueada');
console.log('Fecha bloqueada:', date);
}
},
});
})
.catch(error => {
console.error('Error al obtener el intervalo de fechas:', error);
});
});
Mi código no funciona, sin embargo no logro entender por qué, debido a que no retorna ningún error.
Para proporcionar un poco más de contexto sobre el código, el cálculo del intervalo de fechas se basa en la recuperación de una fecha de inicio y una fecha de fin de una base de datos MySQL, que luego se almacenan en la variable var intervaloFechas;
, que se trata de un array de objetos por lo que entiendo que cuenta con este formato: "Tue Oct 24 2023 00:00:00 GMT-0300"
También creo que cometí un error y estoy bastante seguro de ello, que es el uso de versiones "antiguas" de full calendar y moment.js (Me guié en base a un video de YouTube, debido al conocimiento nulo del uso de FullCalendar).
Los scripts que utilizo en cuestión:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fullcalendar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locale-all.js"></script>