https://codepen.io/ziobit/pen/mdLaXGB

Fullcalendar 5.11.3 timeGridWeek.

Nothing fancy, but I did change the starting/ending time of the day.
All the events DO NOT EVEN touch/overlap with the start/end day.

Why the 2PM row (last one) is so tall? It looks like it's printing the whole hours without showing them.
Maybe it's a "feature", but if there is a way to avoid this, I would be happy :)

Right now, this is how the slots are defined:

slotMinTime: "08:00:00", 
slotMaxTime: "15:00:00", 

I also tried

slotMinTime: "08:00:00", 
slotMaxTime: "14:59:59", 

to no avail

CodePudding user response：

Set the property expandRows to true :

    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      allDaySlot: false,
      initialView: 'timeGridWeek',

      validRange: function(nowDate) {
        return {
          start: '2022-10-01',
          end: '2022-11-15'
        };
      },

      eventClick: function(info) {
        alert('Event ID: '   info.event.id);
      },
      expandRows: true,      
      slotMinTime: "08:00:00", 
      slotMaxTime: "15:00:00", 
      events: [
        {
          id: 10,
          url: 'www.google.com',
          title: 'cavallo a muzzo',
          start: '2022-10-15 10:00',
          end: '2022-10-15 11:00',
        },
        {
          id: 11,
          title: `salti acrobatici all'indietro`, 
          start: '2022-10-15 10:15', 
          end: '2022-10-15 11:15', 
        },
        {
          id: 12,
          title: `tuffi carpiati tripli`, 
          start: '2022-10-14 10:15',
          end: '2022-10-14 12:00', 
        }
      ]
    });
    calendar.render();

<link href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<div id='calendar'></div>