---
title: "Vue Event calendar Drag and Drop Between Calendars Example | Mobiscroll"
component: "Event calendar"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/eventcalendar/drag-drop-between-calendar-instances"
---

# Drag and Drop Between Calendars - Vue Event calendar demo

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

- [Live demo](https://demo.mobiscroll.com/vue/eventcalendar/drag-drop-between-calendar-instances)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/calendar-view/drag-drop-between-calendar-instances)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/calendar-view/drag-drop-between-calendar-instances)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/eventcalendar/drag-drop-between-calendar-instances.md), [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/drag-drop-between-calendar-instances.md), [Angular](https://demo.mobiscroll.com/angular/eventcalendar/drag-drop-between-calendar-instances.md), [React](https://demo.mobiscroll.com/react/eventcalendar/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 calendar instances can be enabled by turning on the [`externalDrag`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-externalDrag) and [`externalDrop`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-externalDrop) options.

## What this demo shows

- Two separate event calendar instances are shown side by side in desktop month view, with `Calendar 1` in the left and `Calendar 2` in the right.
- **Month grid** Day cells display events, each label has a colored line on the left, the event title, and an `end` value that shows the event end time.
- **Event interaction** Hovering over or selecting an event label highlights it.
- **External drag and drop** Events can be dragged from one calendar instance and dropped into the other calendar instance to move them between the two separate calendars.
- **Day cell states** Hovering a day cell highlights the day number with a gray background, while clicking the empty part of the cell selects the day and highlights the day number with a blue background.
- **Calendar header** The header shows the current month and year on the left, and blue month navigation arrows with a `Today` button between them on the right.
- **Gesture navigation** The visible month can also be changed by clicking and dragging the calendar horizontally.

## Best for

- **Multi-calendar planning** Moving events between separate team, department, or location calendars.
- **Resource reassignment** Reassigning appointments, tasks, or shifts from one schedule to another with direct drag and drop.
- **Comparing parallel schedules** Reviewing two month-based schedules side by side and adjusting event placement between them.

## API used in this demo

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

## Code

### SFC JS

```vue
<script setup>
import {
  MbscEventcalendar,
  MbscPage,
  MbscToast,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myView = {
  calendar: { type: 'month' }
}

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

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

const toastMessage = ref('')
const toastContext = ref()
const isToastOpen = ref(false)

function handleFirstCalEventCreated(args) {
  if (args.action === 'externalDrop') {
    toastMessage.value = 'Event dropped to Calendar 1'
    toastContext.value = '.md-drag-drop-first-calendar'
    isToastOpen.value = true
  }
}

function handleSecondCalEventCreated(args) {
  if (args.action === 'externalDrop') {
    toastMessage.value = 'Event dropped to Calendar 2'
    toastContext.value = '.md-drag-drop-second-calendar'
    isToastOpen.value = true
  }
}

function handleToastClose() {
  isToastOpen.value = false
}
</script>

<template>
  <MbscPage>
    <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>
          <MbscEventcalendar
            :view="myView"
            :data="firstEvents"
            :height="550"
            :dragToMove="true"
            :eventDelete="true"
            :externalDrag="true"
            :externalDrop="true"
            @event-created="handleFirstCalEventCreated"
            className="md-drag-drop-first-calendar"
          />
        </div>
        <div class="mbsc-col-sm-6">
          <div class="mbsc-form-group-title">Calendar 2</div>
          <MbscEventcalendar
            :view="myView"
            :data="secondEvents"
            :height="550"
            :dragToMove="true"
            :eventDelete="true"
            :externalDrag="true"
            :externalDrop="true"
            @event-created="handleSecondCalEventCreated"
            className="md-drag-drop-second-calendar"
          />
        </div>
      </div>
    </div>
    <MbscToast
      :message="toastMessage"
      :context="toastContext"
      :isOpen="isToastOpen"
      @close="handleToastClose"
    />
  </MbscPage>
</template>

<style>
.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%;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  MbscEventcalendar,
  MbscPage,
  MbscToast,
  setOptions
} from '@mobiscroll/vue'
import type {
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscEventCreatedEvent
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myView: MbscEventcalendarView = {
  calendar: { type: 'month' }
}

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

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

const toastContext = ref<string>()
const toastMessage = ref<string>('')
const isToastOpen = ref<boolean>(false)

function handleFirstCalEventCreated(args: MbscEventCreatedEvent) {
  if (args.action === 'externalDrop') {
    toastMessage.value = 'Event dropped to Calendar 1'
    toastContext.value = '.md-drag-drop-first-calendar'
    isToastOpen.value = true
  }
}

function handleSecondCalEventCreated(args: MbscEventCreatedEvent) {
  if (args.action === 'externalDrop') {
    toastMessage.value = 'Event dropped to Calendar 2'
    toastContext.value = '.md-drag-drop-second-calendar'
    isToastOpen.value = true
  }
}

function handleToastClose() {
  isToastOpen.value = false
}
</script>

<template>
  <MbscPage>
    <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>
          <MbscEventcalendar
            :view="myView"
            :data="firstEvents"
            :height="550"
            :dragToMove="true"
            :eventDelete="true"
            :externalDrag="true"
            :externalDrop="true"
            @event-created="handleFirstCalEventCreated"
            className="md-drag-drop-first-calendar"
          />
        </div>
        <div class="mbsc-col-sm-6">
          <div class="mbsc-form-group-title">Calendar 2</div>
          <MbscEventcalendar
            :view="myView"
            :data="secondEvents"
            :height="550"
            :dragToMove="true"
            :eventDelete="true"
            :externalDrag="true"
            :externalDrop="true"
            @event-created="handleSecondCalEventCreated"
            className="md-drag-drop-second-calendar"
          />
        </div>
      </div>
    </div>
    <MbscToast
      :message="toastMessage"
      :context="toastContext"
      :isOpen="isToastOpen"
      @close="handleToastClose"
    />
  </MbscPage>
</template>

<style>
.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%;
}
</style>
```

## Implementation notes

- Set `view: { calendar: { type: 'month' } }`. Render two separate `Eventcalendar` instances side by side, each with its own independent events array.
- On both instances, set `externalDrag: true` to allow events to be dragged out and `externalDrop: true` to allow events to be dropped in. Also set `dragToMove: true` to enable dragging within each calendar, and `eventDelete: true` to allow keyboard deletion.
- Handle `onEventCreated` (Vue: `@event-created`) on each instance. Inside the handler, check `args.action === 'externalDrop'` to identify cross-calendar drops and show a `Toast` targeting the receiving calendar's container as `context`.

## 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-vue.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 vue
   ```

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 vue --trial`.

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

## Related demos

- Previous: [Drag and Drop Permissions](https://demo.mobiscroll.com/vue/eventcalendar/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md) - Set move and resize permissions per event or globally in the Vue event calendar — lock events in time, prevent resizing, or mix rules.
- Next: [Blocked Days and Date Ranges](https://demo.mobiscroll.com/vue/eventcalendar/blocked-days-ranges.md) - Disable weekends and date ranges in a Vue event calendar — block dates and drag-and-drop, and choose between strict or permissive validation modes.