问题
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?
- Disable drag and drop horizontally (Avoid changing time)
- 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