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>

酒店预订系统日历

1 个答案: