Full calendar - Drag and Drop - Customisation

久未见 提交于 2021-01-05 06:21:13

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!