Show Slots Based On Data In Full Calendar Day View

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'

Solution 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 (e.g. working hours or opening times etc) are made un-selectable by another means (e.g. 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 = newFullCalendar.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-5daysOfWeek: [1, 2, 3, 4, 5],
      startTime: '09:00',
      endTime: '19:00',
    }
  });

  calendar.render();
});

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

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.