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 horizontally to change time.

Also right now, the drag and drop works like event will stick from one resource to another, there is no smooth drag action, Can someone help me figure out a way to implement smooth drag and drop (Event will follow the mouse) in FullCalendar if its possible?

1. Disable drag and drop horizontally (Avoid changing time)
2. Smooth drag and drop instead of sticking from one portion to another

Version: 5.1 Full Calendar | Reactjs

PS: I need to drag disabled horizontally, user shouldn't even be able to start dragging, (Logics like check on dragEnd will not work)

回答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 here
              const { start, end } = info.oldEvent._instance.range;
              console.log(start, end);
              const {
                start: newStart,
                end: newEnd
              } = info.event._instance.range;
              console.log(newStart, newEnd);
              if (new Date(start).getDate() === new Date(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.

来源：https://stackoverflow.com/questions/62753149/full-calendar-drag-and-drop-customisation