CODEWITHSUNDEEP
javascriptreactjsfullcalendar
Daniel Bozinovski
Daniel Bozinovski

Reputation: 107

FullCalendar React - How to use selectConstraint With Background Events of Display Background & Inverse

How would I go about not allowing users to click on background events that are greyed out in Full Calendar?

For my current calendar, I am trying to display available bookings for a tutoring company and I currently have tutor availabilities and tutor lessons

I am currently able to allow users to not click on greyed out areas from the following array:

let availabilities = [{
      groupId: "lesson-available",
      daysOfWeek: ["1"],
      startTime: "12:00:00",
      endTime: "15:00:00",
      display: "inverse-background",
      color: "#ccc",
    },
    {
      groupId: "lesson-available",
      daysOfWeek: ["2"],
      startTime: "15:00:00",
      endTime: "16:00:00",
      display: "inverse-background",
      color: "#ccc",
    },
];

But I would like to be able to make the following lessons unavailable on the calendar and not be clickable also:

let lessons = [{
   groupId: "lesson-unavailable",
   start: "2021-01-18T13:00:00",
   end: "2021-01-18T14:00:00",
   display: "background",
   color: "#ccc",
},
{
   groupId: "lesson-unavailable",
   start: "2021-01-19T15:00:00",
   end: "2021-01-19T16:00:00",
   display: "background",
   color: "#ccc",
}
];

My Code for my Calendar is the following:

<FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        headerToolbar={{
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay",
        }}
        height="auto"
        initialView="timeGridWeek"
        editable={true}
        eventColor="#6DCBCA"
        selectable={true}
        selectMirror={true}
        dayMaxEvents={true}
        allDaySlot={true}
        weekends={true}
        events={currentEvents}
        select={handleDateSelect}
        eventContent={renderEventContent}
        eventClick={handleEventClick}
        eventDrop={handleEventDrop}
        eventDragStart={handleEventDragStart}
        eventDragStop={handleEventDragStop}
        selectConstraint={"lesson-available"}
      />

As you can see, the following constraint of

selectConstraint={"lesson-available"}

is disabling me to click on anything else but the availabilities array which is perfect, but how would I edit this to also incorporate not being able to click on the lessons array (which is displayed as background, not inverse-background)

In my image:

Even though the 3-4pm on the 19th of Jan is greyed out, I am still able to click on it. This is exactly what I need to fix.

enter image description here

Upvotes: 1

Views: 1785

Answers (1)

ADyson
ADyson

Reputation: 61977

You can use the selectOverlap function, in addition to your selectConstraint, to achieve this.

The documentation for selectOverlap says:

...the function will be called once for every time the user’s selection intersects with an event. If the function returns true, the selection will be allowed. If false, the selection will not be allowed.

 selectOverlap: function(event) {
  return !(event.groupId == "lesson-unavailable");
},

Demo: https://codepen.io/ADyson82/pen/ZEpwyqm

Documentation: https://fullcalendar.io/docs/selectOverlap

Upvotes: 1

Related Questions