Home / Questions / 4335
Accepted
Luis Alberto Aguilera Clarke
Asked: 2020-02-18 07:27:18 +0800 CST 2020-02-18 07:27:18 +0800 CST

Only use one checkbox in each event of the fullcalendar.js library

  • 772

I'm entering events into FullCalendar, but I'm having a problem with each event spanning too many hours (or boxes). I need each event to use a checkbox to make it look neater.

current calendar

This is the JSON of my event 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 }}',
javascript

2 Answers

  1. Best Answer

    The issue is that FullCalendar has a defaultTimedEventDurationand this is 2 hours:

    Duration, default: '02:00:00' (2 hours)

    And since you are not specifying the parameter endin the event, then the value of 2 hours is assumed as the total duration of the event:

    If the end is not specified in the event, this duration will appear when rendering.

    So you have two options:

    1. Calculate the parameter endby adding 30 minutes to the value of the parameter startso that it occupies only one cell using some function.

    2. Change the defaultTimedEventDuration:

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

      What the flag does forceEventDurationis force the calculation of the end.

    Well, that's what comes to mind for now.

    Note

    Consider that the solutions that I am proposing go against all the original behavior of FullCalendar which is correct, that is, it is correct that the events have a duration if you have not specified allDay: trueit and it is also correct that the events overlap when they occur at the same time

    • 2

  2. As a complement to @Cesar's answer, if you want to make it look less busy, but still set the actual duration of the events (i.e. without setting the events to 30 min in the 1 hr 30 min case) , you can modify the appearance by taking advantage of the className option . This has the advantage that you move the visual issue out of your application logic. And it allows events to occupy a space proportional to their duration.

    Explanation:

    • You need to define two rules in your CSS for each color:
    • .colorwhere you define the border color and set the background to transparent.
    • .color .fc-contentwhere you put the background color of the area with text and the color of the text itself.
    • In each event you put the name of the class according to the color that corresponds to the option className.

    Example:

    $(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