Question

我正在使用FullCalendar的React Scheduler。我喜欢保留拖放功能，以将事件从一种资源更改为另一种资源。但是有一种方法可以禁用水平拖动来更改时间。

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

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

版本：5.1完整日历| Reactjs

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

找不到快速解决方法。我可以解决此问题，但需要更多时间来解决。如果有时间，我会稍后再返回并更新答案。

完整日历-拖放-自定义

1 个答案: