CODEWITHSUNDEEP
javascriptjqueryreactjsfullcalendarfullcalendar-scheduler
Victor
Victor

Reputation: 4199

Full calendar - Drag and Drop - Customisation

I'm using React scheduler - 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 the event will stick from one resource to another, and 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 it's 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)

Upvotes: 4

Views: 5120

Answers (1)

gdh
gdh

Reputation: 13682

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.

Upvotes: 5

Related Questions