---
title: "Javascript Scheduler Instance Event Transfer Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/drag-drop-between-calendar-instances"
---

# Instance Event Transfer - JavaScript Scheduler demo

Move events between two Javascript Scheduler instances with drop — reassign appointments, tasks, or shifts across separate weekly scheduling views. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/scheduler/drag-drop-between-calendar-instances)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/scheduler/drag-drop-between-calendar-instances)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/scheduler/drag-drop-between-calendar-instances.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/drag-drop-between-calendar-instances.md), [React](https://demo.mobiscroll.com/react/scheduler/drag-drop-between-calendar-instances.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/drag-drop-between-calendar-instances.md)

## Description

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

Dragging and dropping events between two scheduler instances can be enabled by turning on the [`externalDrag`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrag) and [`externalDrop`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrop) options.

## What this demo shows

- Two separate scheduler instances are displayed one below the other, with `Calendar 1` above `Calendar 2`.
- **Scheduler layout** Each instance uses a desktop weekly scheduler layout with a fixed week strip, a fixed all-day row, and a vertically scrollable time grid.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected week.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **External drag and drop** Events can be dragged from one scheduler instance and dropped into the other to move them between the two schedulers.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.

## Best for

- **Multi-scheduler planning** Moving events between separate team, department, or location calendars.
- **Resource reassignment** Reassigning appointments, tasks, or shifts from one scheduler to another with direct drag and drop.
- **Parallel scheduler review** Comparing two weekly schedulers and adjusting event placement between them.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`height`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-height) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`eventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventDelete) - option
- [`externalDrag`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrag) - option
- [`externalDrop`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrop) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`onEventCreated`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventCreated) - event

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

mobiscroll.eventcalendar('#demo-drag-drop-first-calendar', {
  view: {
    scheduler: {
      type: 'week',
    },
  },
  height: 450,
  dragToMove: true,
  eventDelete: true,
  externalDrag: true,
  externalDrop: true,
  data: [
    {
      start: '2026-10-18T10:00',
      end: '2026-10-18T14:00',
      title: 'Event 1',
      color: '#de3d83',
    },
    {
      start: '2026-10-19T07:00',
      end: '2026-10-19T08:00',
      title: 'Event 2',
      color: '#6e7f29',
    },
    {
      start: '2026-10-20T16:00',
      end: '2026-10-20T18:00',
      title: 'Event 3',
      color: '#e7b300',
    },
    {
      start: '2026-10-22T11:00',
      end: '2026-10-22T12:00',
      title: 'Event 4',
      color: '#e9967a',
    },
    {
      start: '2026-10-23T14:00',
      end: '2026-10-23T17:00',
      title: 'Event 5',
      color: '#a917bb',
    },
    {
      start: '2026-10-24T08:00',
      end: '2026-10-24T10:00',
      title: 'Event 6',
      color: '#3d9140',
    },
    {
      start: '2026-10-25T15:00',
      end: '2026-10-25T16:00',
      title: 'Event 7',
      color: '#8b8b00',
    },
    {
      start: '2026-10-26T13:00',
      end: '2026-10-26T15:00',
      title: 'Event 8',
      color: '#6e7f29',
    },
    {
      start: '2026-10-28T10:00',
      end: '2026-10-28T12:00',
      title: 'Event 9',
      color: '#37bbe4',
    },
    {
      start: '2026-10-29T16:00',
      end: '2026-10-29T17:00',
      title: 'Event 10',
      color: '#ee9572',
    },
    {
      start: '2026-10-31T11:00',
      end: '2026-10-31T14:00',
      title: 'Event 11',
      color: '#c67171',
    },
    {
      start: '2026-11-02T07:00',
      end: '2026-11-02T09:00',
      title: 'Event 12',
      color: '#8b1a1a',
    },
  ],
  onEventCreated: function (args) {
    if (args.action === 'externalDrop') {
      mobiscroll.toast({
        context: '#demo-drag-drop-first-calendar',
        message: 'Event dropped to Calendar 1',
      });
    }
  },
});

mobiscroll.eventcalendar('#demo-drag-drop-second-calendar', {
  view: {
    scheduler: {
      type: 'week',
    },
  },
  height: 450,
  dragToMove: true,
  eventDelete: true,
  externalDrag: true,
  externalDrop: true,
  data: [
    {
      start: '2026-10-18T14:00',
      end: '2026-10-18T17:00',
      title: 'Event 1',
      color: '#e7b300',
    },
    {
      start: '2026-10-19T10:00',
      end: '2026-10-19T12:00',
      title: 'Event 2',
      color: '#6e7f29',
    },
    {
      start: '2026-10-20T08:00',
      end: '2026-10-20T09:00',
      title: 'Event 3',
      color: '#37bbe4',
    },
    {
      start: '2026-10-22T15:00',
      end: '2026-10-22T17:00',
      title: 'Event 4',
      color: '#8b1a1a',
    },
    {
      start: '2026-10-23T12:00',
      end: '2026-10-23T13:00',
      title: 'Event 5',
      color: '#c67171',
    },
    {
      start: '2026-10-24T17:00',
      end: '2026-10-24T20:00',
      title: 'Event 6',
      color: '#6e7f29',
    },
    {
      start: '2026-10-25T14:00',
      end: '2026-10-25T16:00',
      title: 'Event 7',
      color: '#a917bb',
    },
    {
      start: '2026-10-26T10:00',
      end: '2026-10-26T13:00',
      title: 'Event 8',
      color: '#7ac5cd',
    },
    {
      start: '2026-10-28T15:00',
      end: '2026-10-28T16:00',
      title: 'Event 9',
      color: '#de3d83',
    },
    {
      start: '2026-10-29T11:00',
      end: '2026-10-29T12:00',
      title: 'Event 10',
      color: '#3d9140',
    },
    {
      start: '2026-10-31T08:00',
      end: '2026-10-31T10:00',
      title: 'Event 11',
      color: '#8b8b00',
    },
    {
      start: '2026-11-02T17:00',
      end: '2026-11-02T19:00',
      title: 'Event 12',
      color: '#ee9572',
    },
  ],
  onEventCreated: function (args) {
    if (args.action === 'externalDrop') {
      mobiscroll.toast({
        context: '#demo-drag-drop-second-calendar',
        message: 'Event dropped to Calendar 2',
      });
    }
  },
});
```

### HTML

```html
<div class="md-drag-drop-calendar">
    <div class="mbsc-form-group-title">Calendar 1</div>
    <div id="demo-drag-drop-first-calendar" class="md-drag-drop-first-calendar"></div>

    <div class="mbsc-form-group-title">Calendar 2</div>
    <div id="demo-drag-drop-second-calendar" class="md-drag-drop-second-calendar"></div>
</div>
```

## Implementation notes

- Render two independent `Eventcalendar` instances on the same page, each with `view: { scheduler: { type: 'week' } }`. Each instance has its own separate dataset.
- Enable on both instances: `dragToMove: true`, `eventDelete: true`, `externalDrag: true`, `externalDrop: true`. Both `externalDrag` and `externalDrop` must be set on both calendars for bidirectional transfer - `externalDrag` permits dragging an event out, `externalDrop` permits receiving a drop from another instance.
- Handle `onEventCreated` on each instance. Check `args.action === 'externalDrop'` to distinguish a cross-calendar drop from a regular create. When true, show a `Toast` confirming which calendar received the event.
- Scope each `Toast` to its calendar using the `context` prop (a CSS class or element selector pointing to the receiving calendar's wrapper) so it appears near the correct calendar.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [Drag, Resize & Move Restrictions](https://demo.mobiscroll.com/javascript/scheduler/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md) - Restrict drag, resize, and moves per event, per resource, or globally in the Javascript Scheduler — fix length, lock time, or block cross-resource moves.
- Next: [Blocked Time Ranges](https://demo.mobiscroll.com/javascript/scheduler/time-off-blocked-ranges.md) - Block weekends, holidays, and lunch breaks in the Javascript Scheduler using recurring unavailable ranges — choose strict or start-end validation.