根据完整日历日视图中的数据显示时段

Question

我需要有关在完整日历的日视图中显示时间段的帮助。

我有这个数据：

[
    {
        "slot": "10:00-11:00",
        "available": true,
        "startTime": "10:00 AM",
        "endTime": "11:00 AM"
    },
    {
        "slot": "11:00-12:00",
        "available": true,
        "startTime": "11:00 AM",
        "endTime": "12:00 PM"
    },
    {
        "slot": "12:00-13:00",
        "available": true,
        "startTime": "12:00 PM",
        "endTime": "1:00 PM"
    },
    {
        "slot": "13:00-14:00",
        "available": false,
        "startTime": "1:00 PM",
        "endTime": "2:00 PM"
    },
    {
        "slot": "14:00-15:00",
        "available": false,
        "startTime": "2:00 PM",
        "endTime": "3:00 PM"
    },
    {
        "slot": "15:00-16:00",
        "available": true,
        "startTime": "3:00 PM",
        "endTime": "4:00 PM"
    },
    {
        "slot": "16:00-17:00",
        "available": true,
        "startTime": "4:00 PM",
        "endTime": "5:00 PM"
    },
    {
        "slot": "17:00-18:00",
        "available": true,
        "startTime": "5:00 PM",
        "endTime": "6:00 PM"
    },
    {
        "slot": "18:00-19:00",
        "available": true,
        "startTime": "6:00 PM",
        "endTime": "7:00 PM"
    }
]

可用是真的，那么可以选择慢，否则它不能 select 或者我想禁用它。

是否可以在全日历中以日视图排列此类数据？

仅供参考：我正在使用全日历的反应插件。

Answer 1

可以做你想做的事，但是以你构建的方式处理数据会使它变得更难，并且与 fullCalendar 的设计方式背道而驰。

本质上，您所拥有的是一个事件列表。 从逻辑上讲，如果日历中存在事件，那么我们可以认为这意味着时间段不可用。 那里没问题。 但是如果一个事件存在于一个应该有时间段的地方，那就不好了，因为a）用户可能一眼就觉得这个时间段很忙，并且b）这让我们更难，因为程序员允许用户select那个插槽。

现在，fullCalendar 提供插槽选择功能，允许用户单击日历的空白部分，程序员可以检测他们选择的时间并从中创建事件。 你应该利用这一点。

所以本质上我们应该使用的概念是：

1) 由于有人填满而无法使用的插槽由覆盖该插槽的事件表示。

2) 由于超出允许时间（例如工作时间或开放时间等）而无法使用的时段通过其他方式（例如营业时间设置）变为不可选择。

3) 对于 select 的用户，仍然可用的插槽留空。

基本演示：

 document.addEventListener("DOMContentLoaded", function() { var calendarEl = document.getElementById("calendar"); var calendar = new FullCalendar.Calendar(calendarEl, { plugins: ["interaction", "dayGrid", "timeGrid"], header: { left: "prev,next today", center: "title", right: "dayGridMonth,timeGridWeek,timeGridDay" }, slotDuration: { "hours": 1 }, minTime: "08:00", maxTime: "22:00", defaultView: "timeGridDay", selectable: true, events: [{ "title": "Appointment 1", "start": "2019-09-30 10:00", "end": "2019-09-30 11:00", }, { "title": "Appointment 2", "start": "2019-09-30 13:00", "end": "2019-09-30 14:00", }, { "title": "Appointment 2", "start": "2019-09-30 14:00", "end": "2019-09-30 15:00", } ], selectConstraint: "businessHours", select: function(info) { calendar.addEvent({ "title": "Demo event", start: info.start, end: info.end }); }, businessHours: { // Mon - Fri, 9-5 daysOfWeek: [1, 2, 3, 4, 5], startTime: '09:00', endTime: '19:00', } }); calendar.render(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css" rel="stylesheet"/> <div id="calendar"></div>

PS 如果businessHours没有为您提供足够的灵活性来禁用永远无法选择的插槽，那么您可以考虑使用validRange或背景事件（以及合适的selectOverlap规则）的替代方案。 您使用哪一个将取决于确切的要求。 这些要求之前已被询问过，您可能会在此站点上找到显示潜在解决方案的先前问题。