0

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>
2
  • No se entiende lo que estas haciendo. Fullcalendar no es un datepicker, entonces cuando hablas de "desabilitar" no queda claro el contexto: no quieres que se muestren ese rango de fecha? no quieres que se seleccionen? no quieres que se puedan agregar evento?? que cosa es la que buscas...
    – Yussef
    Commented el 24 oct. 2023 a las 3:28
  • Buen día, Yussef. Lo que necesito es que apartir del cálculo de un intervalo de fechas (El cálculo ya lo tengo hecho en otra funcionalidad) en el calendario no sean seleccionables o que no se muestren en el calendario directamente, por ejemplo: Si en el intervalo de fechas tengo Mon Oct 30 2023, Tue oct 31 2023 y Wed Nov 1 2023, ese intervalo tendría que ser no seleccionable o que directamente no se muestre, sin embargo las fechas previas al inicio del intervalo y el fin del intervalo no sufren ningún cambio y se muestran de manera natural.
    – Lito
    Commented el 24 oct. 2023 a las 10:20

2 respuestas 2

0

Puedes usar la función selectAllow para permitir y/o denegar la selección de un rango.

Donde en realidad existen 2 rangos de fechas:

  • El rango que tu quieres deshabilitar
  • El rango de selección

Entonces lo que hay que evaluar es que si el primer rango se intersecta con el segundo.

Supongamos que queremos deshabilitar entre el 2023-10-17 y el 2023-10-24, sería algo así:

const desde = new Date("Tue Oct 17 2023 00:00:00 GMT-0300");
const hasta = new Date("Tue Oct 24 2023 00:00:00 GMT-0300");


document.addEventListener('DOMContentLoaded', loaded);


function loaded(){
 const element = document.getElementById('calendar');
 const calendar = new FullCalendar.Calendar(element, {
   initialView: 'dayGridMonth',
   selectable: true,
   selectAllow: function(e) {
     return !(e.end > desde && e.start <= hasta);
    }
 });
 calendar.render();
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>

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

0

Luego de varios intentos, tomando de base la lógica proporcionada por Yussef, pude resolver mi problema. A continuación, voy a proporcionar la solución que utilicé.

$(document).ready(function () {
  var anioActual = new Date().getFullYear();
  var finDeAnio = new Date(anioActual, 11, 31);

  // Recuperar las fechas bloqueadas
  recuperarFechasBloqueadas()
    .then(intervaloFechas => {
      console.log('Intervalo de fechas bloqueadas:', 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');

          var seleccionPermitida = true;

          for (var i = 0; i < intervaloFechas.length; i++) {
            var intervalo = intervaloFechas[i];
            var bloqueoInicio = moment(intervalo.fecha_inicio);
            var bloqueoFin = moment(intervalo.fecha_fin);

            if ((start >= bloqueoInicio && start < bloqueoFin) || (end > bloqueoInicio && end <= bloqueoFin)) {
              seleccionPermitida = false;
              break;
            }
          }

          if (seleccionPermitida) {
            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);
              });
          } else {
            alert('El intervalo de fechas seleccionadas contienen una fecha bloqueada.');
          }
        },
        dayClick: function () {
          $('#fecha_inicio').val('');
          $('#fecha_fin').val('');
        },
      });
    })
    .catch(error => {
      console.error('Error al recuperar las fechas bloqueadas:', error);
    });
});

Me di cuenta de que el valor devuelto por recuperarFechasBloqueadas es una promesa, por lo que ese era mi principal problema. Sin embargo, lo resolví de manera sencilla con la función .then(), que permite manejar promesas. De esta manera, cuando se hayan recuperado las fechas de manera fortuita, se ejecutará el código dentro de la funcionalidad.

Posteriormente, para verificar si el intervalo de fechas seleccionado por el usuario no coincidía con ninguna de las fechas dentro de los intervalos bloqueados, utilicé un bucle for y una condición if. El bucle itera por el intervalo de la selección del usuario para verificar que ninguna fecha seleccionada se encuentre dentro de ningún intervalo bloqueado.

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.