在“完整日历"日视图中显示基于数据的广告位 [英] Show slots based on data in Full Calendar day view

问题描述

我需要有关在完整日历的日视图中显示时隙的帮助.

I need help on showing time slots in day view in full calendar.

我有以下数据:

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

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

is available is true then that slow can be selected else it can not select or I want to disable that.

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

Is it possible to arrange this type of data with day view in full calendar?

仅供参考:我使用的是Full-calendar的react插件.

FYI: I'm using react plugin of Full-calendar.

推荐答案

可以做您想做的事，但是按照结构化的方式来处理数据会变得更加困难，并且与fullCalendar的设计方式背道而驰

It's possible to do what you want, but doing it with the data in the way you've structured it makes it harder and works against the way fullCalendar is designed.

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

Essentially what you've got a above is a list of events. Logically, if an event exists in the calendar, then we can take that to mean that a time slot is not available. No problem there. But if an event exists in a place where the time slot is supposed to be available, that's not great because a) it probably appears to the user at a casual glance that the slot is busy, and b) it makes it harder for us as programmers to allow the user to select that slot.

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

Now, fullCalendar provides slot selection functionality, allowing the user to click on an empty section of the calendar and the programmer to detect the time they selected and create an event from it. You should take advantage of that.

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

So essentially the concept we should use is:

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

1) slots which are unavailable because someone has filled them are represented by an event covering that slot.

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

2) slots which are unavailable because they are outside the allowed times (e.g. working hours or opening times etc) are made un-selectable by another means (e.g. businessHours settings).

3)仍可用的插槽留空供用户选择.

3) slots which are still available are left blank for the user to 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>

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

P.S. If businessHours does not give you enough flexibility to disable the slots which can never be selected, then you could consider alternatives using validRange or background events (together with a suitable selectOverlap rule) . Which one you use would depend on the exact requirements. These requirements have been asked about before, and you can probably find previous questions on this site showing potential solutions.

这篇关于在“完整日历"日视图中显示基于数据的广告位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！