0

primero que nada me presento, soy nuevo por acá y esta es mi primera pregunta.

Les cuento. Tengo un proyecto en el cual estamos trabajando con Fullcalendar y los eventos los traemos desde la base de datos, hasta ahí todo bien. También tenemos horarios de atención que se traen desde la base de datos y de un calendario a otro pueden variar, también en sus días. Ahora el problema que tengo es bloquear las horas que están por fuera de esos horarios de atención, pues si bien aparecen con un distinto color, fullcalendar no me provee nada con lo cual poder hacer esto, lo más que pone es un Div con la clase fc-nonbusiness pero por más que he intentado no he podido hacer nada con ello.

Estamos trabajando con Laravel y a su vez con Carbon.

Mi idea ahora es, seleccionar los horarios de atención para esos días, y hacer una comparación para que me quede solo las horas que no están en ese rango. Pero no se me ocurre como hacerlo...

Un ejemplo: Digamos que para el lunes hay dos horarios de atención. 1: de 08:00:00 hasta 12:00:00 y 2: de 14:00:00 hasta 18:00:00

Entonces lo que yo quiero es tener todas las horas (con intervalos de minutos, pueden ser 5, 10 esto es lo menos importante) que no están en ese intervalo, por ejemplo 06:00:00, 07:00:00, 13:00:00 ... Por favor tener en cuenta que este es un tema dinámico. He intentado varias cosas pero ninguna con éxito.

Gracias de antemano por la atención prestada y espero alguien haya pasado por esto y pueda echarme un cable.

6
  • En vez de hacerlo de la manera que planteastes puedes a travez de javascript con los eventos de fullcalendar como eventDrop validar que solo se dejen agregar eventos en el horario valido, segun el dia. Commented el 25 may. 2018 a las 12:40
  • Hola, Ramon, Gracias por tu respuesta. Te digo que llevo varios días tratanto con esto y fullcalendar no me sirve mucho para esto, acabo de tener una idea y voy a ver como me va, mi intención con esta pregunta era ver si a alguien más podía ayudar. Gracias de nuevo. Commented el 25 may. 2018 a las 12:50
  • No hay de ke para eso estamos, si te interesa mi idea despues te puedo poner un ejemplo de codigo ke hice para ello. Commented el 25 may. 2018 a las 13:14
  • Claro, puedes ponerlo cuando desees! todo sirve, yo creo que estoy cerca usando Javascript, espero pueda funcionarme. Muchas gracias de nuevo Commented el 25 may. 2018 a las 13:38
  • Hola Cristian como tema aparte te doy la bienvenida y te sugiero completar el recorrido de bienvenida para que te familiarices con el funcionamiento del lugar y de paso ganar tu primera medalla. También puedes revisar la sección de Cómo preguntar para que tus preguntas sean bien recibidas por la comunidad y obtengas respuestas de calidad.
    – user22721
    Commented el 25 may. 2018 a las 14:21

1 respuesta 1

0

amigos, a la final después de tanto buscar y buscar, he encontrado la solución, lo hice desde el mismo Fullcalendar con el evento selectAllowed, les dejo el código por si a alguno le sirve

selectAllow: function(selectInfo) {           

//Esto trae la información del evento
       var start = selectInfo.start;
       var end = selectInfo.end;

 //En este caso, ya que los objetos que tengo guardados como horarios de atención deben guardarse sin fecha para que
//sirvan en todos los días del calendario debo obtener el día en el que se está intentando hacer click
       day = start.day();

 //inicio el array de horarios            
        horarios_atencion = [];

//aquí accedo a los horarios de ese calendario que se generan más arriba en el código con una iteración de PHP (Uso blade)
        if(horarios{{ $calendario->id }}.length > 0){
            $.map(horarios{{ $calendario->id }}, function(item, index) {
    //si en el array coincide el día entonces hago un push a los horarios de atención
                if (item.dia == day) {
                    horarios_atencion.push(item);
                }
            });

            //console.log(horarios_atencion)

    Obtengo la fecha completa del día en que se está haciendo click
            year = start.format('YYYY-MM-DD');

    //Inicio el array de horarios permitidos a la final si no hay horarios de atención significa que todo
    //El día está bloqueado
            var horarios_permitidos = [];

    //Recorro los horarios de atención

            $.map(horarios_atencion, function(item, index) {
    //agrego la fecha del día a los horarios de atención que tengo guardados en la bd para poder hacerlo un objeto válido
    //de moment.js
                var horarioStart = moment(year + ' ' + item.start);
                var horarioEnd   = moment(year + ' ' + item.end);

    //clono el objeto de moment.js
                var current = horarioStart.clone();
     //hago un while para generar todos los horarios permitidos, y le agrego un minuto cada iteración
    //Esto con el fin de hacerlo compatible con cualquier intervalo ya que los horarios son dinámicos
                while(current < horarioEnd){
                    horarios_permitidos.push(current.format('YYYY-MM-DD HH:mm'));
                    current.add(1, 'minutes');
                }

                if (horarioEnd) {
                    horarios_permitidos.push(horarioEnd.format('YYYY-MM-DD HH:mm'));
                }

                horarios_permitidos.splice(-1);
            });

    //le doy el formato que necesito para poder hacer la comparación
            var event_date = start.format('YYYY-MM-DD HH:mm');

            if ($.inArray(event_date, horarios_permitidos) < 0) {
        //Y al final si el horario que se intenta seleccionar no está dentro de los horarios permitidos, 
    //Se retorna falso y full calendar no dejará hacer click en la creación del evento

            return false;
            }
        }


   },

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.