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"
    }
]

是可用的，则可以选择慢速，否则无法选择，或者我要禁用它。

是否可以在完整日历中以日视图安排此类数据？

仅供参考：我使用的是Full-calendar的react插件。

Answer 1

可以做您想做的事，但是按照结构化的方式来处理数据会增加难度，并且与fullCalendar的设计方式不符。

基本上，您获得的是事件列表。从逻辑上讲，如果日历中存在一个事件，那么我们可以认为这意味着一个时隙不可用。没问题。但是，如果某个事件在应该可以使用该时隙的地方存在，那不是很好，因为a）乍一看，用户可能会发现该时隙很忙，并且b）对于我们来说，这变得更加困难程序员允许用户选择该插槽。

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

因此本质上我们应该使用的概念是：

1）由于有人已将其占用而无法使用的插槽由覆盖该插槽的事件表示。

2）由于超出了允许时间（例如工作时间或营业时间等）而无法使用的广告位，通过其他方式（例如，businessHours设置）无法选择。

3）仍可用的插槽留空供用户选择。

基本演示：

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>

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

在“完整日历”日视图中显示基于数据的广告位

1 个答案: