Full Calendar - Drag And Drop - Customisation

I'm using react scheduler of FullCalendar. I like to keep the drag and drop feature for changing the event from one resource to another. But is there a way to disable dragging hori

Solution 1:

1. Disable drag and drop horizontally (Avoid changing time)

You can use onDrop and you can get start and end time using info.event and info.oldEvent respectively.

Working demo

     <FullCalendar
            editable={true}
            defaultView="timeGridWeek"
            headerToolbar={{
              left: "prev,next today",
              center: "title",
              right: "dayGridMonth,timeGridWeek,timeGridDay"
            }}
            header={{
              left: "prev,next today",
              center: "title",
              right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
            }}
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
            ref={this.calendarComponentRef}
            weekends={this.state.calendarWeekends}
            events={this.state.calendarEvents}
            dateClick={this.handleDateClick}
            eventDrop={info => {//<--- see from hereconst { start, end } = info.oldEvent._instance.range;
              console.log(start, end);
              const {
                start: newStart,
                end: newEnd
              } = info.event._instance.range;
              console.log(newStart, newEnd);
              if (newDate(start).getDate() === newDate(newStart).getDate()) {
                info.revert();
              }
            }}
          />

2. Smooth drag and drop instead of sticking from one portion to another

Couldn't find a quick take away solution. I can solve this but needs a bit more time to figure-out a solution. If i have time, I will come back later and update the answer.