完整日历 - 拖放 - 自定义

Question

我正在使用 FullCalendar 的反应调度程序。我喜欢保留将事件从一种资源更改为另一种资源的拖放功能。但是有没有办法禁用水平拖动来改变时间。

另外现在，拖放工作就像事件会从一个资源粘到另一个资源，没有平滑的拖动动作，有人可以帮我找出一种实现平滑拖放的方法（事件将跟随鼠标）如果可能的话，在 FullCalendar 中？

1. 禁用水平拖放（避免更改时间）
2. 平滑拖放，而不是从一个部分粘到另一个部分

版本：5.1 完整日历 |反应js

PS：我需要禁用水平拖动，用户甚至不能开始拖动，（检查dragEnd之类的逻辑不起作用）

Answer 1

1.禁用水平拖放（避免更改时间）

您可以使用onDrop，您可以分别使用info.event 和info.oldEvent 获取开始和结束时间。

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。平滑拖放，而不是从一个部分粘到另一个部分

找不到快速外卖解决方案。我可以解决这个问题，但需要更多时间来找出解决方案。如果我有时间，我会稍后回来更新答案。