1

Estoy ingresando eventos a FullCalendar, pero tengo el problema de que cada evento abarca demasiadas horas (o casillas). Necesito que cada evento use una casilla para que se vea más ordenado.

calendario actual

Este es el JSON de mi evento id:

'{{ $hora->id }}', title: 'Paciente: {{ $hora->paciente_nombre." ".$hora->paciente_apellido }} 
Profesional : {{ $hora->profesional_nombre." ".$hora->profesional_apellido }} ', start: moment('{{ $hora->fecha_hora }}').format('YYYY-MM-DD hh:mm'), backgroundColor: '{{ $hora->color }}',
2
  • ¿A qué te refieres con que cada evento abarca demasiadas horas (o casillas)? Si tu evento dura 1 hora, es correcto que tome 2 casillas. ¿Qué es lo que realmente estás buscando?
    – user227
    el 17 feb. 2016 a las 15:28
  • eso no esta en formato json. puedes editar la pregunta y resumiendo el código a lo mínimo necesario para entender como lo inicializas el 17 feb. 2016 a las 15:55

2 respuestas 2

2

El tema es que FullCalendar cuenta con un defaultTimedEventDuration y este es de 2 horas:

Duración, default: '02:00:00' (2 horas)

Y como no estás especificando el parámetro end en el evento entonces se asume el valor de 2 horas como duración total del evento:

Si no se especifica el end en el evento, aparecerá esta duración al renderizar.

Entonces tienes dos opciones:

  1. Calcular el parámetro end aumentando 30 minutos al valor del parámetro start para que ocupe solo una casilla usando alguna función.

  2. Cambiar el defaultTimedEventDuration:

    $('#calendar').fullCalendar({ 
        defaultTimedEventDuration: '00:30:00',
        forceEventDuration: true,
        // ...    
    });
    

    Lo que hace el flag forceEventDuration es forzar el cálculo del end.

Bueno, es lo que se me ocurre por ahora.

Nota

Considera que las soluciones que estoy planteando van en contra de todo el comportamiento original de FullCalendar el cual es correcto, es decir, es correcto que los eventos tengan una duración si es que no has especificado allDay: true y también es correcto que los eventos se traslapen cuando ocurren al mismo tiempo

4
  • creo que el problema de esta solución es que el calendario esta mal configurado, los eventos durarían menos lo que realmente duran. Tal vez una alternativa posible es toquetear con estilos para cambiar la apariencia únicamente. el 17 feb. 2016 a las 16:10
  • @rnrneverdies si estoy de acuerdo en que este hack no es muy adecuado, por la pregunta parece a Luis no le importan mucho la duración de los eventos y con esto lo puede resolver. Sin embargo, el comportamiento original de FullCalendar es el correcto en mi opinión
    – César
    el 17 feb. 2016 a las 16:23
  • 1
    cesar fíjate mi respuesta... me tengo que ir. saludos. el 17 feb. 2016 a las 21:59
  • toda la razón, me faltó el parámetro END :/ !! en realidad lo agregué desde un principio pero con la misma fecha y hora del START y pasaba que tomaba las dos horas por default. gracias por la respuesta el 17 feb. 2016 a las 22:03
1

Como complemento de la respuesta de @Cesar, Si quires que se vea menos cargado, pero sin dejar de establecer la duración real de los eventos (es decir, sin fijar los eventos a 30 min en el caso que dure 1 hr 30 min.), puedes modificar la apariencia aprovechando la opción className. Esto tiene como ventaja que mueves la cuestión visual afuera de la lógica de tu aplicación. Y te permite que los eventos se ocupen un espacio proporcional a su duración.

Explicación:

  • Necesitas definir dos reglas tu CSS para cada color:
  • .color donde defines el color del borde y pones el fondo a transparente.
  • .color .fc-content done pones el color de fondo del area con texto y el color del texto en si.
  • En cada evento pones el nombre de la clase según el color que corresponda en la opcion className.

Ejemplo:

$(function() {

  var fcal = $('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    allDaySlot: false,
    events: [{
      title: "Evento",
      start: moment().startOf('day').hour(7),
      end: moment().startOf('day').hour(9),
      className: 'azul'
    },{
      title: "Evento",
      start: moment().startOf('day').hour(8).minute(30),
      end: moment().startOf('day').hour(10),
      className: 'rojo'
    }]

  });

});
@import "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.css";

.rojo {
  border-color: red;
  background: transparent;
}

.azul {
  border-color: blue;
  background: transparent;
}
  
.rojo .fc-content {
  background: red;
}

.azul .fc-content {
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.js"></script>

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

1
  • Excelente solución!
    – César
    el 18 feb. 2016 a las 12:09

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.