CODEWITHSUNDEEP
reactjsfullcalendar
Daniel Bozinovski
Daniel Bozinovski

Reputation: 107

Full Calendar - React - How to Disable Dragging Events on Monthly View

I'm currently using React Full Calendar for a booking system and I would like to disable dragging when on the monthly view for the calendar.

I have seen a previous post on how to do this, but this was using jQuery, not React, hence I am still stuck.

This is my current calendar:

How could I possibly do this in React Full Calendar?

Thanks.

<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={bookingLesson} // Allows a user to highlight multiple days or timeslots by clicking and dragging.
        selectMirror={true}
        dayMaxEvents={true}
        allDaySlot={true}
        weekends={true}
        events={currentEvents}
        select={handleDateSelect}
        eventContent={renderEventContent}
        eventClick={handleEventClick}
        eventDrop={handleEventDrop}
        eventDragStart={handleEventDragStart}
        eventDragStop={handleEventDragStop}
        eventConstraint={"lesson-available"}
        selectConstraint={"lesson-available"}
        selectOverlap={(event) => {
          return !(event.groupId == "lesson-unavailable");
        }}
        slotDuration="00:60:00"
        slotMinTime="6:00:00"
        slotMaxTime="22:00:00"
      />

Upvotes: 1

Views: 688

Answers (1)

CharlesRA
CharlesRA

Reputation: 395

I think a ternary on the view name will do the trick

selectable={viewName === "dayGridMonth" ? false : true}

You can get the viewName with the FullCalendarRef API

Upvotes: 2

Related Questions