Angular Event calendar Drag and Drop Between Calendars Example

There are certain cases when moving the events between calendars can come in handy.

Dragging and dropping events between two calendar instances can be enabled by turning on the externalDrag and externalDrop options.

Get started with this example

Preview in full screen

Drag and drop events between two side-by-side event calendar in month view — move events across separate calendars with cross-calendar drag and drop.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarView, MbscModule, Notifications, setOptions  } from '@mobiscroll/angular';

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  providers: [Notifications],
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  constructor(private notify: Notifications) {}

  myView: MbscEventcalendarView = {
    calendar: {
      type: 'month',
    },
  };

  firstEvents: MbscCalendarEvent[] = [
    {
      start: '2026-09-18T00:00',
      end: '2026-09-20T00:00',
      title: 'Event 1',
      color: '#e20000',
    },
    {
      start: '2026-09-22T00:00',
      end: '2026-09-24T00:00',
      title: 'Event 2',
      color: '#166f6f',
    },
    {
      start: '2026-09-27T00:00',
      end: '2026-09-28T00:00',
      title: 'Event 3',
      color: '#166f6f',
    },
    {
      start: '2026-10-01T00:00',
      end: '2026-10-03T00:00',
      title: 'Event 4',
      color: '#a32f00',
    },
    {
      start: '2026-10-05T00:00',
      end: '2026-10-07T00:00',
      title: 'Event 5',
      color: '#8b8b00',
    },
    {
      start: '2026-10-11T00:00',
      end: '2026-10-13T00:00',
      title: 'Event 6',
      color: '#1dab2f',
    },
    {
      start: '2026-10-15T00:00',
      end: '2026-10-16T00:00',
      title: 'Event 7',
      color: '#4981d6',
    },
    {
      start: '2026-10-20T00:00',
      end: '2026-10-21T00:00',
      title: 'Event 8',
      color: '#4418d2',
    },
    {
      start: '2026-10-26T00:00',
      end: '2026-10-26T00:00',
      title: 'Event 9',
      color: '#6e7f29',
    },
    {
      start: '2026-11-03T00:00',
      end: '2026-11-04T00:00',
      title: 'Event 10',
      color: '#8b0000',
    },
    {
      start: '2026-11-09T00:00',
      end: '2026-11-10T00:00',
      title: 'Event 11',
      color: '#a32f00',
    },
    {
      start: '2026-11-14T00:00',
      end: '2026-11-16T00:00',
      title: 'Event 12',
      color: '#152d2b',
    },
  ];

  secondEvents: MbscCalendarEvent[] = [
    {
      start: '2026-09-20T00:00',
      end: '2026-09-20T00:00',
      title: 'Event 1',
      color: '#',
    },
    {
      start: '2026-09-24T00:00',
      end: '2026-09-26T00:00',
      title: 'Event 2',
      color: '#',
    },
    {
      start: '2026-09-28T00:00',
      end: '2026-09-28T00:00',
      title: 'Event 3',
      color: '#4418d2',
    },
    {
      start: '2026-10-02T00:00',
      end: '2026-10-02T00:00',
      title: 'Event 4',
      color: '#8b1a1a',
    },
    {
      start: '2026-10-06T00:00',
      end: '2026-10-07T00:00',
      title: 'Event 5',
      color: '#e7b300',
    },
    {
      start: '2026-10-12T00:00',
      end: '2026-10-13T00:00',
      title: 'Event 6',
      color: '#a32f00',
    },
    {
      start: '2026-10-17T00:00',
      end: '2026-10-19T00:00',
      title: 'Event 7',
      color: '#21a833',
    },
    {
      start: '2026-10-22T00:00',
      end: '2026-10-22T00:00',
      title: 'Event 8',
      color: '#a917bb',
    },
    {
      start: '2026-10-25T00:00',
      end: '2026-10-27T00:00',
      title: 'Event 9',
      color: '#e20000',
    },
    {
      start: '2026-11-01T00:00',
      end: '2026-11-02T00:00',
      title: 'Event 10',
      color: '#4981d6',
    },
    {
      start: '2026-11-04T00:00',
      end: '2026-11-04T00:00',
      title: 'Event 11',
      color: '#166f6f',
    },
    {
      start: '2026-11-08T00:00',
      end: '2026-11-10T00:00',
      title: 'Event 12',
      color: '#d6d145',
    },
  ];

  handleFirstCalEventCreated(args: any) {
    if (args.action === 'externalDrop') {
      this.notify.toast({
        context: '.md-drag-drop-first-calendar',
        message: 'Event dropped to Calendar 1',
      });
    }
  }

  handleSecondCalEventCreated(args: any) {
    if (args.action === 'externalDrop') {
      this.notify.toast({
        context: '.md-drag-drop-second-calendar',
        message: 'Event dropped to Calendar 2',
      });
    }
  }
}

<mbsc-page>
  <div class="mbsc-grid mbsc-no-padding md-drag-drop-calendar">
    <div class="mbsc-row">
      <div class="mbsc-col-sm-6 md-drag-drop-calendar-border">
        <div class="mbsc-form-group-title">Calendar 1</div>
        <mbsc-eventcalendar
          [view]="myView"
          [data]="firstEvents"
          [height]="450"
          [dragToMove]="true"
          [eventDelete]="true"
          [externalDrag]="true"
          [externalDrop]="true"
          (onEventCreated)="handleFirstCalEventCreated($event)"
          class="md-drag-drop-first-calendar"
        ></mbsc-eventcalendar>
      </div>
      <div class="mbsc-col-sm-6">
        <div class="mbsc-form-group-title">Calendar 2</div>
        <mbsc-eventcalendar
          [view]="myView"
          [data]="secondEvents"
          [height]="450"
          [dragToMove]="true"
          [eventDelete]="true"
          [externalDrag]="true"
          [externalDrop]="true"
          (onEventCreated)="handleSecondCalEventCreated($event)"
          class="md-drag-drop-second-calendar"
        ></mbsc-eventcalendar>
      </div>
    </div>
  </div>
</mbsc-page>

.md-drag-drop-calendar-border {
  border-right: 3px dashed #e4e4e4;
}

.md-drag-drop-calendar .mbsc-form-group-title {
  font-size: 1em;
}

.md-drag-drop-calendar .mbsc-row,
.md-drag-drop-calendar .mbsc-col-sm-6 {
  height: 100%;
}

Drag and Drop Between Calendars

Duplicate Session

Duplicate Session

Demo

Code

Duplicate Session

Duplicate Session