完整日历-拖放-自定义 [英] Full calendar - Drag and Drop - Customisation

问题描述

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

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.

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

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. 禁用水平拖放(避免更改时间)
2. 平滑的拖放，而不是从一个部分粘贴到另一部分

版本:5.1完整日历|Reactjs

Version: 5.1 Full Calendar | Reactjs

PS:我需要水平拖动，用户甚至不能开始拖动，(诸如对dragEnd进行检查之类的逻辑将不起作用)

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.禁用水平拖放(避免更改时间)

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

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

工作演示

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

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

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.

这篇关于完整日历-拖放-自定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！