Drag and Drop between Two Calendars

It is possible to drag events from one Calendar instance to another one in the same page.

This feature is disabled by default. It has to be enabled using dragOutAllowed property.

Available since 2026.2.yyyy.

JavaScript

Example:

<div style="display: flex; gap: 20px;">
    <div style="flex: 1"><div id="dp1"></div></div>
    <div style="flex: 1"><div id="dp2"></div></div>
</div>

<script type="text/javascript">
  const dp1 = new DayPilot.Calendar("dp1", {
      dragOutAllowed: true,
      startDate: DayPilot.Date.today(),
      viewType: "Week",
      showEventStartEnd: false,
      scrollLabelsVisible: true,
      timeRangeSelectingStartEndEnabled: true,
      showCurrentTime: true,
      onEventMove: args => {
          const target = args.control;
          const source = args.e.calendar;

          if (target !== source) {
              source.events.remove(args.e);
          }

      },
      onEventMoved: (args) => {
          dp1.message("Moved: " + args.e.text());
      },
      onTimeRangeSelected: async (args) => {
          const modal = await DayPilot.Modal.prompt("New event name:", "Event");
          dp1.clearSelection();
          if (modal.canceled) return;
          dp1.events.add({
              start: args.start,
              end: args.end,
              id: DayPilot.guid(),
              resource: args.resource,
              text: modal.result
          });
          dp1.message("Created");
      },
  });
  dp1.init();

  const dp2 = new DayPilot.Calendar("dp2", {
      dragOutAllowed: true,
      startDate: DayPilot.Date.today(),
      viewType: "Week",
      showEventStartEnd: false,
      scrollLabelsVisible: true,
      timeRangeSelectingStartEndEnabled: true,
      showCurrentTime: true,
      onEventMove: args => {
          const target = args.control;
          const source = args.e.calendar;

          if (target !== source) {
              source.events.remove(args.e);
          }

      },
      onEventMoved: (args) => {
          dp2.message("Moved: " + args.e.text());
      },
      onTimeRangeSelected: async (args) => {
          const modal = await DayPilot.Modal.prompt("New event name:", "Event");
          dp2.clearSelection();
          if (modal.canceled) return;
          dp2.events.add({
              start: args.start,
              end: args.end,
              id: DayPilot.guid(),
              resource: args.resource,
              text: modal.result
          });
          dp2.message("Created");
      },
  });
  dp2.init();
</script>

Demo:

• Dragging events between two Calendars (Demo)