酒店预订系统日历答案

【问题标题】：Calendar for hotel's booking system酒店预订系统日历
【发布时间】：2021-02-16 17:08:45
【问题描述】：

我正在尝试为酒店创建一个预订系统。该系统将由酒店管理员使用，而不是由客户使用。在行上我需要查看房间（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();
                });

有什么建议吗？谢谢

【问题讨论】：

fullcalendar.io/docs/slotDuration
感谢您的回复，抱歉耽搁了！我试过没有运气
您到底尝试了什么？结果到底是什么？如果您不具体，我们无能为力
你说得对，抱歉回复不完整。我使用了不同的插件。

标签： javascript fullcalendar fullcalendar-5

【解决方案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>

【讨论】：