javascript html5 calendar event moving drag drop

Drag and drop moving of calendar events is enabled by default.

Drag handle

  • Users can start activate moving anywhere on the event box.

  • You can customize the location of the drag handle using the moveBy property.

  • You can also create a custom drag handle using event active areas (this can be helpful on touch devices).

Event handling

As soon as the user drops the event at the target location, the JavaScript Calendar fires two events:

  • The onEventMove event is fired before the actual position is moved. You have a chance to cancel the action here (that lets you implement custom rules or ask the user for confirmation).

  • The onEventMoved event is fired after the calendar event position is updated.

Drag customization

In the Pro version, there is a real-time onEventMoving event available that lets you customize the appearance during dragging and implement custom rules (with real-time feedback).

Event copying

The onEventMove event stores the Ctrl and Shift key status. This allows implementation of drag and drop event copying.

Undo/redo

To learn how to implement client-side undo/redo in Angular, please see the Angular Calendar with Undo/Redo tutorial.

Disabled drag-and-drop moving

It is possible to disable drag-and-drop moving for the whole calendar or for selected events. See also JavaScript Calendar in Read-Only Mode.

JavaScript Calendar

Drag and drop event moving is enabled by default (eventMoveHandling is set to "Update"). You can disable it by setting eventMoveHandling to "Disabled".

See also

Example:

<div id="calendar"></div>
<script>
  const calendar = new DayPilot.Calendar("calendar", {
    onEventMoved: (args) => {
      console.log("Moved: " + args.e.text());
      // your own HTTP call to the server to notify it about the change
    },
    // ...
  });
  calendar.init();
</script>

Angular Calendar

See the Open-Source Angular Appointment Calendar Component (TypeScript + PHP/MySQL) tutorial to learn how to use onEventMove and onEventMoved events of the Angular Calendar component to save the changes to a MySQL database using a PHP backend.

Example:

import { Component, ViewChild } from '@angular/core';
import { DayPilot, DayPilotCalendarComponent } from '@daypilot/daypilot-lite-angular';

@Component({
  selector: 'app-calendar',
  template: `
    <div>
      <daypilot-calendar [config]="calendarConfig" #calendarRef></daypilot-calendar>
    </div>
  `,
})
export class CalendarComponent {
  @ViewChild("calendarRef")
  calendarRef!: DayPilotCalendarComponent;

  calendarConfig: DayPilot.CalendarConfig = {
    onEventMoved: (args) => {
      const message = `Event ${args.e.data.id} moved to ${args.newStart}`;
      console.log(message);
    },
    // ...
  };

}

React Calendar

In the React Calendar component, you can specify the onEventMove event handler using the onEventMove attribute of <DayPilotCalendar> in JSX.

import React, { useRef, useEffect } from 'react';
import { DayPilot, DayPilotCalendar } from '@daypilot/daypilot-lite-react';

const CalendarComponent = () => {
  const calendarRef = useRef(null);

  const calendarConfig = {
    onEventMove: args => {
      const message = `Event ${args.e.data.id} moved to ${args.newStart}`;
      console.log(message);
    },
    // ...
  };

  return (
    <div>
      <DayPilotCalendar
        {...calendarConfig}
        ref={calendarRef}
      />
    </div>
  );
};

export default CalendarComponent;

ASP.NET WebForms

Drag and drop event moving is disabled by default.

It can be enabled using EventMoveHandling property. It has to be set to one of the following values:

  • CallBack

  • PostBack

  • Notify

  • JavaScript

PostBack event handling type will fire a server-side event handler (EventMove) using a PostBack (or partial AJAX PostBack if the Calendar is inside an UpdatePanel).

CallBack event handling type will fire a server-side event handler (EventMove) using an AJAX callback. CallBack is much faster than PostBack (and partial PostBack).

Notify event handling type will update the Calendar on the client immediately and then notifies the server (EventMove) using an AJAX callback. Notify is much faster than CallBack.

JavaScript event handling will fire the JavaScript code specified in EventMoveJavaScript.

Server-Side Handler

<DayPilot:DayPilotCalendar runat="server" id="DayPilotCalendar1"
  ...
  EventMoveHandling = "CallBack"
  OnEventMove="DayPilotCalendar1_EventMove" 
/>

Example EventMove handler:

protected void DayPilotCalendar1_EventMove(object sender, EventMoveEventArgs e)
{
  // update the database
  // ...

  // reload events and refresh the calendar on the client side
  DayPilotCalendar1.DataSource = LoadData();  // your method
  DayPilotCalendar1.DataBind();
  DayPilotCalendar1.UpdateWithMessage("Event moved.");
}

If any changes are made to the event data set (which is the typical case), it is necessary to redraw the event set on the client side using an Update() call.

See Also

ASP.NET MVC

Drag & drop event moving is disabled by default.

It can be enabled using EventMoveHandling property. It has to be set to one of the following values:

  • CallBack

  • Notify

  • JavaScript

CallBack event handling will fire a server-side event handler (OnEventMove) using an AJAX callback.

Notify event handling type will update the Calendar on the client immediately and then notifies the server using an AJAX call. Notify is much faster than CallBack.

JavaScript event handling will fire the JavaScript code specified in EventMoveJavaScript.

  • The following variables are available to the client-side handler: e, newStart, newEnd, newResource, external, ctrl, shift (see DayPilot.Calendar.onEventMove)

  • The client side handler can call the server-side handler using eventMoveCallBack() method

Server-Side Handler

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig {
  BackendUrl = ResolveUrl("~/Calendar/Backend"),
  ...
  EventMoveHandling = EventMoveHandlingType.CallBack
})

The EventMove event can be handled by overriding the OnEventMove method in the DayPilotCalendar implementing class:

protected override void OnEventMove(EventMoveArgs e)
{
  new EventManager(Controller).EventMove(e.Id, e.NewStart, e.NewEnd);
  Update();
}

protected override void OnFinish()
{
  // only load the data if an update was requested by an Update() call
  if (UpdateType == CallBackUpdateType.None)
  {
    return;
  }

  Events = new EventManager(Controller).FilteredData(StartDate, EndDate, (string)ClientState["filter"]).AsEnumerable();

  DataStartField = "start";
  DataEndField = "end";
  DataTextField = "text";
  DataIdField = "id";

}

If any changes are made to the event data set (which is the typical case), it is necessary to redraw the event set on the client side using an Update() call.

Tutorial