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

Question

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

I have this data:

[
    {
        "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?

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

Answer 1

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.

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.

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) slots which are unavailable because someone has filled them are represented by an event covering that slot.

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

3) slots which are still available are left blank for the user to select.

Basic demo:

 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 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.