horario comercial de fullcalendar con período de validez

Answer

1. 

   davy.ai

   July 27, 2023 at 4:17 am

   Para limitar los nuevos eventos a horarios específicos para cada día de la semana en los que las horas de trabajo varían cada semana, puedes usar la opción selectConstraint en FullCalendar.

   Primero, deberás obtener las horas de trabajo para cada semana y construir un arreglo de objetos que contengan las propiedades start y end para cada día de la semana. Esto se puede lograr utilizando la API de events y el parámetro resourceId para obtener las horas de trabajo correspondientes para cada semana.

   Una vez que tengas el arreglo de horas de trabajo para cada semana, podrás utilizar la opción selectConstraint para limitar los nuevos eventos a horarios específicos para cada día de la semana. La opción selectConstraint toma un arreglo de objetos con las propiedades start y end que representan el rango de tiempo durante el cual se pueden crear nuevos eventos.

   Para implementar la opción selectConstraint, puedes utilizar la devolución de llamada select para determinar si el rango de tiempo seleccionado es válido según las horas de trabajo de ese día de la semana. Si el rango de tiempo no es válido, puedes mostrar un mensaje de error o simplemente evitar que se realice la selección. Aquí tienes un código de ejemplo para comenzar:

   // construir el arreglo de horas de trabajo para cada semana
   var businessHours = {
     '2021-12-20': [
       { start: '08:00', end: '12:30' },
       { start: '13:00', end: '16:30' }
     ],
     '2021-12-27': [
       { start: '08:00', end: '17:00' }
     ],
     '2021-12-29': [
       { start: '08:00', end: '17:00' }
     ]
   };
   
   // configurar FullCalendar con las horas de trabajo y la opción selectConstraint
   $('#calendar').fullCalendar({
     businessHours: [{
       // especificar las horas de trabajo predeterminadas fuera de los horarios válidos
       dow: [0, 1, 2, 3, 4, 5, 6],
       start: '00:00',
       end: '07:59',
       rendering: 'background'
     }, {
       dow: [0, 1, 2, 3, 4],
       start: '17:01',
       end: '23:59',
       rendering: 'background'
     }, {
       dow: [5, 6],
       start: '16:31',
       end: '23:59',
       rendering: 'background'
     }],
     // establecer la opción selectConstraint a una función que verifica la validez de la selección
     selectConstraint: function(info) {
       // obtener la fecha y el rango de tiempo seleccionado
       var selectedDate = info.start.format('YYYY-MM-DD');
       var selectedStart = info.start.format('HH:mm');
       var selectedEnd = info.end.format('HH:mm');
       // obtener las horas de trabajo para la fecha seleccionada
       var dayBusinessHours = businessHours[selectedDate];
       // verificar si alguna de las horas de trabajo para el día se superponen con el rango de tiempo seleccionado
       var isValidSelection = false;
       for (var i = 0; i < dayBusinessHours.length; i++) {
         var businessStart = moment(selectedDate + 'T' + dayBusinessHours[i].start);
         var businessEnd = moment(selectedDate + 'T' + dayBusinessHours[i].end);
         if (businessStart.isBefore(info.end) && businessEnd.isAfter(info.start)) {
           isValidSelection = true;
           break;
         }
       }
       // devolver true si la selección es válida, false de lo contrario
       return isValidSelection;
     },
     // configurar otras opciones de FullCalendar según sea necesario
   });
   

   Este código asume que las horas de trabajo están en la hora local (ya que FullCalendar maneja la conversión de zona horaria automáticamente). Si las horas de trabajo están en una zona horaria diferente, deberás ajustar el código en consecuencia. También ten en cuenta que la opción selectConstraint solo se aplica a la selección a través del mouse o el tacto, por lo que posiblemente también necesites agregar validación para la selección programática (por ejemplo, a través del método select).

Comments are closed.