Calendar for hotel's booking system

Question

I'm trying to create a booking system for a hotel. The system will be used by the hotel's administrator, not by the customers. On the rows i need to see the rooms (100,101,ecc..) and on the columns i need the days. I'm using the TimelineView, with the initial view set to "resourceTimelineWeek". I can add the rooms and get it to work, but i don't need to see the hours of days, just the days. The room is reserved at least for one full day. This is my basic code, i've tried with the option "allDaySlot" without luck.

document.addEventListener('DOMContentLoaded', function() {
                    var calendarEl = document.getElementById('calendar');
                    var calendar = new FullCalendar.Calendar(calendarEl, {
                        initialView: 'resourceTimelineWeek',
                        allDaySlot : true,
                        resources: [{
                                id: '1',
                                title: 'Room 101'
                            },
                            {
                                id: '2',
                                title: 'Room 102'
                            }
                        ]
                    });
                    calendar.render();
                });

Any suggestion? Thanks

Answer 1

Add slotDuration: { day: 1 }.

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'resourceTimelineWeek',
  allDaySlot: true,
  slotDuration: {day: 1},
  resources: [{
      id: '1',
      title: 'Room 101'
    },
    {
      id: '2',
      title: 'Room 102'
    }
  ]
});
calendar.render();

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


<div id="calendar"></div>