酒店预订系统日历

Question

我正在尝试为酒店创建预订系统。该系统将由酒店管理员使用，而不是客户使用。在行上我需要查看房间 (100,101,ecc..)，在列上我需要日期。我正在使用 TimelineView，初始视图设置为“resourceTimelineWeek”。我可以添加房间并使其正常工作，但我不需要查看日期，只需查看日期。房间至少预留一整天。这是我的基本代码，我试过使用“allDaySlot”选项，但没有成功。

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();
                });

有什么建议吗？谢谢

Answer 1

添加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/fullcalendar-scheduler@5.5.1/main.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.5.1/main.js"></script>


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

酒店预订系统日历

Calendar for hotel's booking system

javascript

fullcalendar

fullcalendar-5