CODEWITHSUNDEEP
javascriptreactjsfullcalendarfullcalendar-5
Daniel Bozinovski
Daniel Bozinovski

Reputation: 107

Full Calendar REACT JS - How to disable dragging to inverse-background events

I'm currently creating a booking system utilising Full Calendar with React.

When Dragging a lesson (event), I have all the unavailable booking times appear as grey, but for some reason, I am still able to drag events on those slots, But for the white areas, I am unable to drag.

How would I reverse this?

Image of my timetable

Some of my code:

My array of available lessons:

let avail = [
{
  groupId: "lesson-available",
  start: "2021-01-13T10:00:00",
  end: "2021-01-13T16:00:00",
  color: "#ccc",
  display: "inverse-background",
},
{
  groupId: "lesson-available",
  start: "2021-01-14T16:00:00",
  end: "2021-01-14T19:00:00",
  color: "#ccc",
  display: "inverse-background",
},
{
  groupId: "lesson-available",
  start: "2021-01-15T16:00:00",
  end: "2021-01-15T19:00:00",
  display: "inverse-background",
  color: "#ccc",
},
{
  groupId: "lesson-available",
  start: "2021-01-16T16:00:00",
  end: "2021-01-17T19:00:00",
  display: "inverse-background",
  color: "#ccc",
},
];


-------------------------------------------------------

<FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        headerToolbar={{
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay",
        }}
        initialView="timeGridWeek"
        editable={true}
        eventColor="#6DCBCA"
        selectable={false} // Allows a user to highlight multiple days or timeslots by clicking and dragging.
        selectMirror={true}
        dayMaxEvents={true}
        weekends={true}
        events={currentEvents}
        select={handleDateSelect}
        eventContent={renderEventContent}
        eventClick={handleEventClick}
        eventDrop={handleEventDrop}
        eventDragStart={handleEventDragStart}
        eventDragStop={handleEventDragStop}
        eventOverlap={false}
      />

Upvotes: 1

Views: 1256

Answers (1)

ADyson
ADyson

Reputation: 61849

The bit which isn't coloured #ccc is the area where the event is located. So you can't drag onto the event. That's what you told the code to do with the eventOverlap setting - i.e. don't allow dragging onto existing events. The fact that you also told it to invert the background colour is irrelevant - that's just a visual detail.

What you can do instead of eventOverlap is use eventConstraint - it allows you to specify a groupId indicating events over which events may be dropped. It then ensures they cannot be dropped anywhere else. Since you've already defined a groupId for your background events, this becomes trivial:

eventConstraint: "lesson-available"

(In the React Component syntax, this would be eventOverlap="lesson-available" I think.)

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

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

Upvotes: 1

Related Questions