---
title: "Vue Event calendar Drag and Drop from External Lists Example | Mobiscroll"
component: "Event calendar"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/eventcalendar/external-drag-drop-sortable-dragula"
---

# Drag and Drop from External Lists - Vue Event calendar demo

Drag items from external SortableJS or Dragula lists onto a Vue event calendar to schedule events — or drag them out to unschedule. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/eventcalendar/external-drag-drop-sortable-dragula)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/calendar-view/external-drag-drop-sortable-dragula)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/calendar-view/external-drag-drop-sortable-dragula)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/eventcalendar/external-drag-drop-sortable-dragula.md), [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/external-drag-drop-sortable-dragula.md), [Angular](https://demo.mobiscroll.com/angular/eventcalendar/external-drag-drop-sortable-dragula.md), [React](https://demo.mobiscroll.com/react/eventcalendar/external-drag-drop-sortable-dragula.md)

## Description

**Dragging events on the Mobiscroll event calendar**

Events can be scheduled by dragging and dropping an external item onto the event calendar with Mobiscroll `draggable`. In order for that to work you will need to have two things set up:

- Enable the event calendar to receive external events by setting [`externalDrop`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-externalDrop) to `true`.
- Initialize the external events (containers) as `draggable` components.

Use the `MbscDraggable` component to specify a skeleton event through its `dragData` option and reference the draggable container in the `element` option. The `dragData` accepts a full event definition that will be added to the event calendar on drop. If omitted, a default event will be created.

**Working together with SortableJS and Dragula lists**

Mobiscroll provides built-in support for two widely used reorderable drag-and-drop list libraries: [SortableJS](https://sortablejs.github.io/Sortable/) and [Dragula](https://bevacqua.github.io/dragula/). If you are already using any of these libraries to reorder list items, they can be seamlessly integrated with the event calendar. This integration enables a smooth workflow where items can be dragged from external lists and scheduled directly onto the calendar.

Events can be created and scheduled by dragging items from third-party lists into the event calendar. To enable this behavior you will need to:

- Allow the event calendar to receive external drops by setting [`externalDrop`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-externalDrop) to `true`.
- Use the `sortableJsDraggable` or `dragulaDraggable` plugins to connect the third-party list with the scheduler. The event data will be read from the dragged element's `data-drag-data` attribute, or the plugin's options expose an `eventData` function where the event definition (title, start, end, resource, etc.) can be specified.

You can then handle the calendars lifecycle events such as [`event-create`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventCreate), [`event-created`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventCreated) or [`event-create-failed`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventCreateFailed) to run custom logic (e.g. showing a toast) when a drop succeeds or fails.

**Unscheduling events (or dragging them off a calendar)**

Additionally events can be unscheduled by dragging them out from the calendar and dropping them onto an external drop container. To activate this, you will need to:

- Enable the calendar to allow dragging events out by setting [`externalDrag`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-externalDrag) to `true`.

- Initialize the `dropcontainer`

Use the `MbscDropcontainer` component and its [`item-drop`](https://mobiscroll.com/docs/vue/eventcalendar/drag-and-drop#event-onItemDrop) event to handle dropped events.

Events can also be dropped on another event calendar with `externalDrop` enabled.

When an event is dropped into an external drop container or another calendar, it will be deleted from the original calendar and the [`event-delete`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDelete) will be fired.

You can also use the [`event-drag-leave`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDragLeave) and [`event-drag-enter`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDragEnter), and the drop container's `item-drag-enter` and `item-drag-leave` events to provide visual feedback or running custom logic during drag.

Learn more from the [external drag & drop documentation](https://mobiscroll.com/docs/vue/eventcalendar/drag-and-drop#the-eventcalendar-as-source).

**Unscheduling events to SortableJS and Dragula lists**

Dropping events from the Eventcalendar to [SortableJS](https://sortablejs.github.io/Sortable/) and [Dragula](https://bevacqua.github.io/dragula/) lists is also possible with the `sortableJsDraggable` and `dragulaDraggable` plugins. To enable this behavior you will need to set the following under the `options` configuration:

- Allow the list to receive external drops by setting `externalDrop` to `true`
- Use the `onExternalDrop` callback to update the content of the third-party list. The function arguments return the `afterElement` - the list element before which the clone is dropped, `container` - the list container, `dragData` - the dragged event data, `position` - the index where the clone is dropped on the list.

For details, and option lists see the [Third-party dragging support](https://mobiscroll.com/docs/vue/eventcalendar/drag-and-drop#third-party-dragging-support) section in the documentation

**Looking for external drag into a scheduler?** [Check out this example →](https://demo.mobiscroll.com/vue/scheduler/external-drag-drop-sortable-dragula)

## What this demo shows

- This demo shows a desktop month view event calendar with a separate external event panel for scheduling and unscheduling events by drag and drop.
- **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.
- **External lists** A scrollable panel on the right contains three external event lists: `Mobiscroll draggable` with four red items, `SortableJS list (externally sortable)` with four orange items, and `Dragula list (externally sortable)` with four green items.
- **Scheduling from lists** Any item from the external lists can be dragged onto the month view to create and schedule that event on the target day.
- **Unscheduling back to lists** Scheduled events can be dragged out of the calendar and dropped back into an external list, removing them from the month view.
- **List behavior** When an item is scheduled from an external list, it disappears from that list and appears on the calendar.
- **Feedback on drop** After an event is scheduled from an external list, a toast appears near the bottom center of the calendar showing the event title and the `added` message.
- **Feedback on external list drop** After an event is unscheduled from the calendar and dropped on the external list a toast appears near the bottom center of the calendar showing the event title and the `unscheduled` message.
- **Event label rendering** Day cells display event labels with different visual styles for all-day, multi-day, and time-specific events.
- **Overflow handling** The number of visible event labels in a day cell depends on the available vertical space.
- **More events popup** When not all events fit in a day cell, an `X more` label appears; selecting it opens a popup that lists all events of that day.
- **Event interaction** Event labels are highlighted on hover and on selection.
- **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.
- **Drag to create** New events can be created directly on the calendar by clicking and dragging across the empty space of the day cells.

## Best for

- **Unscheduled work queues** Managing tasks, appointments, or work items that start in an external backlog and need to be placed onto calendar dates.
- **Desktop planning workflows** Month-based planning experiences where users need a broad date overview together with a side panel of draggable items.
- **Schedule and unschedule flows** Use cases where users need to move items onto the calendar to assign dates and move them back out to return them to an unscheduled state.
- **Third-party drag-and-drop integration** Projects that need to combine Mobiscroll Eventcalendar with existing `SortableJS` or `Dragula` list implementations.

## 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
- [`labels`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-labels) - option
- [`externalDrop`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-externalDrop) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) - option
- [`dragToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToCreate) - option
- [`externalDrag`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-externalDrag) - option
- [`event-created`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventCreated) - event
- [`event-deleted`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDeleted) - event
- [`close`](https://mobiscroll.com/docs/vue/notifications/toast#event-onClose) - event

## Code

### SFC JS

```vue
<script setup>
import {
  dragulaDraggable,
  getJson,
  MbscDraggable,
  MbscDropcontainer,
  MbscEventcalendar,
  MbscToast,
  setOptions,
  sortableJsDraggable
} from '@mobiscroll/vue'
import dragula from 'dragula'
import Sortable from 'sortablejs'
import { onMounted, onUnmounted, ref } from 'vue'
import 'dragula/dist/dragula.css'

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

const dragElements = ref([])
const dropCont = ref()
const sortableCont = ref([])
const sortableInstance = ref()
const dragulaCont = ref()
const drake = ref()
const myEvents = ref([])
const toastMessage = ref(null)
const isToastOpen = ref(false)

const myDraggableTasks = ref([
  {
    id: 1,
    title: 'Task 1',
    color: '#cf4343',
    start: '2026-10-24T08:00',
    end: '2026-10-24T09:30'
  },
  {
    id: 2,
    title: 'Task 2',
    color: '#cf4343',
    start: '2026-10-24T08:00',
    end: '2026-10-24T10:00'
  },
  {
    id: 3,
    title: 'Task 3',
    color: '#cf4343',
    start: '2026-10-24T10:00',
    end: '2026-10-24T14:00'
  },
  {
    id: 4,
    title: 'Task 4',
    color: '#cf4343',
    start: '2026-10-24T12:00',
    end: '2026-10-24T18:00'
  }
])

const mySortableTasks = ref([
  {
    id: 'sortable-1',
    title: 'Task 5',
    color: '#e49516',
    start: '2026-10-24T08:00',
    end: '2026-10-24T09:30'
  },
  {
    id: 'sortable-2',
    title: 'Task 6',
    color: '#e49516',
    start: '2026-10-24T12:00',
    end: '2026-10-24T15:00'
  },
  {
    id: 'sortable-3',
    title: 'Task 7',
    color: '#e49516',
    start: '2026-10-24T08:30',
    end: '2026-10-24T11:00'
  },
  {
    id: 'sortable-4',
    title: 'Task 8',
    color: '#e49516',
    start: '2026-10-24T16:00',
    end: '2026-10-24T17:00'
  }
])

const myDragulaTasks = ref([
  {
    id: 'dragula-1',
    title: 'Task 9',
    color: '#1ca11a',
    start: '2026-10-24T08:00',
    end: '2026-10-24T09:30'
  },
  {
    id: 'dragula-2',
    title: 'Task 10',
    color: '#1ca11a',
    start: '2026-10-24T12:00',
    end: '2026-10-24T15:00'
  },
  {
    id: 'dragula-3',
    title: 'Task 11',
    color: '#1ca11a',
    start: '2026-10-24T08:30',
    end: '2026-10-24T11:00'
  },
  {
    id: 'dragula-4',
    title: 'Task 12',
    color: '#1ca11a',
    start: '2026-10-24T16:00',
    end: '2026-10-24T17:00'
  }
])

const myView = {
  calendar: { labels: true }
}

function handleEventCreated(args) {
  if (args.action === 'externalDrop') {
    myDraggableTasks.value = myDraggableTasks.value.filter((item) => item.id !== args.event.id)
    mySortableTasks.value = mySortableTasks.value.filter((item) => item.id !== args.event.id)
    myDragulaTasks.value = myDragulaTasks.value.filter((item) => item.id !== args.event.id)
    toastMessage.value = args.event.title + ' added'
    isToastOpen.value = true
  }
}

function handleEventDeleted(args) {
  toastMessage.value = args.event.title + ' unscheduled'
  isToastOpen.value = true
}

function handleItemDrop(args) {
  if (args.data) {
    myDraggableTasks.value = [...myDraggableTasks.value, args.data]
  }
}

function getHours(event) {
  const eventLength = Math.round(
    Math.abs(new Date(event.end) - new Date(event.start)) / (60 * 60 * 1000)
  )
  return eventLength + ' hour' + (eventLength > 1 ? 's' : '')
}

function handleToastClose() {
  isToastOpen.value = false
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/drag-drop-events/',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
  if (sortableCont.value) {
    sortableInstance.value = new Sortable(sortableCont.value, {
      animation: 150,
      forceFallback: true
    })

    sortableJsDraggable.init(sortableInstance.value, {
      cloneSelector: '.sortable-drag',
      externalDrop: true,
      onExternalDrop: (a) => {
        const dragData = a.dragData
        const newTasks = [...mySortableTasks.value]
        newTasks.splice(a.position, 0, dragData)
        mySortableTasks.value = newTasks
      }
    })
  }

  if (dragulaCont.value) {
    drake.value = dragula([dragulaCont.value])
    dragulaDraggable.init(drake.value, {
      externalDrop: true,
      onExternalDrop: (a) => {
        const dragData = a.dragData
        const newTasks = [...myDraggableTasks.value]
        newTasks.splice(a.position, 0, dragData)
        myDraggableTasks.value = newTasks
      }
    })
  }
})

onUnmounted(() => {
  if (sortableInstance.value) {
    sortableInstance.value.destroy()
  }
  if (drake.value) {
    drake.value.destroy()
  }
})
</script>

<template>
  <div class="mbsc-grid mbsc-no-padding mds-full-height">
    <div class="mbsc-row mds-full-height">
      <div class="mbsc-col-sm-9 mds-drag-drop-sort-calendar mds-full-height">
        <MbscEventcalendar
          :view="myView"
          :data="myEvents"
          :dragToMove="true"
          :dragToCreate="true"
          :externalDrop="true"
          :externalDrag="true"
          @event-created="handleEventCreated"
          @event-deleted="handleEventDeleted"
        />
      </div>
      <div class="mbsc-col-sm-3 mds-drag-drop-sort-container-wrapper mds-full-height">
        <div class="mbsc-txt-muted mds-third-party-title">Mobiscroll draggable</div>
        <div ref="dropCont" class="mds-drag-drop-sort-container">
          <MbscDropcontainer :element="dropCont" @item-drop="handleItemDrop($event)">
            <div v-for="(task, i) in myDraggableTasks" :key="task.id">
              <div
                ref="dragElements"
                class="mds-drag-drop-sort-task"
                :style="{ background: task.color }"
              >
                <div>{{ task.title }}</div>
                <div>{{ getHours(task) }}</div>
                <MbscDraggable :element="dragElements[i]" :dragData="task" />
              </div>
            </div>
          </MbscDropcontainer>
        </div>
        <div class="mbsc-txt-muted mds-third-party-title">
          SortableJS list (externally draggable)
        </div>
        <div class="mds-drag-drop-sort-container" ref="sortableCont">
          <div
            v-for="task in mySortableTasks"
            :key="task.id"
            class="mds-drag-drop-sort-task"
            :style="{ background: task.color }"
            :data-drag-data="JSON.stringify(task)"
          >
            <div>{{ task.title }}</div>
            <div>{{ getHours(task) }}</div>
          </div>
        </div>
        <div class="mbsc-txt-muted mds-third-party-title">Dragula list (externally draggable)</div>
        <div class="mds-drag-drop-sort-container" ref="dragulaCont">
          <div
            v-for="task in myDragulaTasks"
            :key="task.id"
            class="mds-drag-drop-sort-task"
            :style="{ background: task.color }"
            :data-drag-data="JSON.stringify(task)"
          >
            <div>{{ task.title }}</div>
            <div>{{ getHours(task) }}</div>
          </div>
        </div>
      </div>
    </div>
    <MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="handleToastClose" />
  </div>
</template>

<style>
.mds-full-height {
  height: 100%;
}

.mds-drag-drop-sort-calendar {
  border-right: 1px solid #ccc;
}

.mds-drag-drop-sort-container {
  margin: 10px;
}

.mds-drag-drop-sort-container-wrapper {
  overflow: auto;
}

.mds-third-party-title {
  margin-top: 12px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
}

.mds-drag-drop-sort-task {
  margin: 10px;
  padding: 10px;
  touch-action: none;
  color: #fff;
  border-radius: 8px;
  font-family:
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  dragulaDraggable,
  getJson,
  MbscDraggable,
  MbscDropcontainer,
  MbscEventcalendar,
  MbscToast,
  setOptions,
  sortableJsDraggable
} from '@mobiscroll/vue'
import type {
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscEventCreatedEvent,
  MbscEventDeletedEvent,
  MbscExternalDropEvent,
  MbscItemDragEvent
} from '@mobiscroll/vue'
import dragula, { type Drake } from 'dragula'
import Sortable from 'sortablejs'
import { onMounted, onUnmounted, ref } from 'vue'
import 'dragula/dist/dragula.css'

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

const dragElements = ref([])
const dropCont = ref<HTMLDivElement>()
const sortableCont = ref<HTMLDivElement>()
const sortableInstance = ref<Sortable>()
const dragulaCont = ref<HTMLDivElement>()
const drake = ref<Drake>()
const myEvents = ref<MbscCalendarEvent[]>([])
const toastMessage = ref<string>('')
const isToastOpen = ref<boolean>(false)

const myDraggableTasks = ref<MbscCalendarEvent[]>([
  {
    id: 1,
    title: 'Task 1',
    color: '#cf4343',
    start: '2026-10-24T08:00',
    end: '2026-10-24T09:30'
  },
  {
    id: 2,
    title: 'Task 2',
    color: '#cf4343',
    start: '2026-10-24T08:00',
    end: '2026-10-24T10:00'
  },
  {
    id: 3,
    title: 'Task 3',
    color: '#cf4343',
    start: '2026-10-24T10:00',
    end: '2026-10-24T14:00'
  },
  {
    id: 4,
    title: 'Task 4',
    color: '#cf4343',
    start: '2026-10-24T12:00',
    end: '2026-10-24T18:00'
  }
])

const mySortableTasks = ref<MbscCalendarEvent[]>([
  {
    id: 'sortable-1',
    title: 'Task 5',
    color: '#e49516',
    start: '2026-10-24T08:00',
    end: '2026-10-24T09:30'
  },
  {
    id: 'sortable-2',
    title: 'Task 6',
    color: '#e49516',
    start: '2026-10-24T12:00',
    end: '2026-10-24T15:00'
  },
  {
    id: 'sortable-3',
    title: 'Task 7',
    color: '#e49516',
    start: '2026-10-24T08:30',
    end: '2026-10-24T11:00'
  },
  {
    id: 'sortable-4',
    title: 'Task 8',
    color: '#e49516',
    start: '2026-10-24T16:00',
    end: '2026-10-24T17:00'
  }
])

const myDragulaTasks = ref<MbscCalendarEvent[]>([
  {
    id: 'dragula-1',
    title: 'Task 9',
    color: '#1ca11a',
    start: '2026-10-24T08:00',
    end: '2026-10-24T09:30'
  },
  {
    id: 'dragula-2',
    title: 'Task 10',
    color: '#1ca11a',
    start: '2026-10-24T12:00',
    end: '2026-10-24T15:00'
  },
  {
    id: 'dragula-3',
    title: 'Task 11',
    color: '#1ca11a',
    start: '2026-10-24T08:30',
    end: '2026-10-24T11:00'
  },
  {
    id: 'dragula-4',
    title: 'Task 12',
    color: '#1ca11a',
    start: '2026-10-24T16:00',
    end: '2026-10-24T17:00'
  }
])

const myView: MbscEventcalendarView = {
  calendar: { labels: true }
}

function handleEventCreated(args: MbscEventCreatedEvent) {
  if (args.action === 'externalDrop') {
    myDraggableTasks.value = myDraggableTasks.value.filter((item) => item.id !== args.event.id)
    mySortableTasks.value = mySortableTasks.value.filter((item) => item.id !== args.event.id)
    myDragulaTasks.value = myDragulaTasks.value.filter((item) => item.id !== args.event.id)
    toastMessage.value = args.event.title + ' added'
    isToastOpen.value = true
  }
}

function handleEventDeleted(args: MbscEventDeletedEvent) {
  toastMessage.value = args.event.title + ' unscheduled'
  isToastOpen.value = true
}

function handleItemDrop(args: MbscItemDragEvent) {
  if (args.data) {
    myDraggableTasks.value = [...myDraggableTasks.value, args.data]
  }
}

function getHours(event: any) {
  const eventLength = Math.round(
    Math.abs(new Date(event.end).getTime() - new Date(event.start).getTime()) / (60 * 60 * 1000)
  )
  return eventLength + ' hour' + (eventLength > 1 ? 's' : '')
}

function handleToastClose() {
  isToastOpen.value = false
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/drag-drop-events/',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
  if (sortableCont.value) {
    sortableInstance.value = new Sortable(sortableCont.value, {
      animation: 150,
      forceFallback: true
    })

    sortableJsDraggable.init(sortableInstance.value, {
      cloneSelector: '.sortable-drag',
      externalDrop: true,
      onExternalDrop: (a: MbscExternalDropEvent) => {
        const dragData = a.dragData
        const newTasks = [...mySortableTasks.value]
        newTasks.splice(a.position, 0, dragData)
        mySortableTasks.value = newTasks
      }
    })
  }

  if (dragulaCont.value) {
    drake.value = dragula([dragulaCont.value])
    dragulaDraggable.init(drake.value, {
      externalDrop: true,
      onExternalDrop: (a: MbscExternalDropEvent) => {
        const dragData = a.dragData
        const newTasks = [...myDraggableTasks.value]
        newTasks.splice(a.position, 0, dragData)
        myDraggableTasks.value = newTasks
      }
    })
  }
})

onUnmounted(() => {
  if (sortableInstance.value) {
    sortableInstance.value.destroy()
  }
  if (drake.value) {
    drake.value.destroy()
  }
})
</script>

<template>
  <div class="mbsc-grid mbsc-no-padding mds-full-height">
    <div class="mbsc-row mds-full-height">
      <div class="mbsc-col-sm-9 mds-drag-drop-sort-calendar mds-full-height">
        <MbscEventcalendar
          :view="myView"
          :data="myEvents"
          :dragToMove="true"
          :dragToCreate="true"
          :externalDrop="true"
          :externalDrag="true"
          @event-created="handleEventCreated"
          @event-deleted="handleEventDeleted"
        />
      </div>
      <div class="mbsc-col-sm-3 mds-drag-drop-sort-container-wrapper mds-full-height">
        <div class="mbsc-txt-muted mds-third-party-title">Mobiscroll draggable</div>
        <div ref="dropCont" class="mds-drag-drop-sort-container">
          <MbscDropcontainer :element="dropCont" @item-drop="handleItemDrop($event)">
            <div v-for="(task, i) in myDraggableTasks" :key="task.id">
              <div
                ref="dragElements"
                class="mds-drag-drop-sort-task"
                :style="{ background: task.color }"
              >
                <div>{{ task.title }}</div>
                <div>{{ getHours(task) }}</div>
                <MbscDraggable :element="dragElements[i]" :dragData="task" />
              </div>
            </div>
          </MbscDropcontainer>
        </div>
        <div class="mbsc-txt-muted mds-third-party-title">
          SortableJS list (externally draggable)
        </div>
        <div class="mds-drag-drop-sort-container" ref="sortableCont">
          <div
            v-for="task in mySortableTasks"
            :key="task.id"
            class="mds-drag-drop-sort-task"
            :style="{ background: task.color }"
            :data-drag-data="JSON.stringify(task)"
          >
            <div>{{ task.title }}</div>
            <div>{{ getHours(task) }}</div>
          </div>
        </div>
        <div class="mbsc-txt-muted mds-third-party-title">Dragula list (externally draggable)</div>
        <div class="mds-drag-drop-sort-container" ref="dragulaCont">
          <div
            v-for="task in myDragulaTasks"
            :key="task.id"
            class="mds-drag-drop-sort-task"
            :style="{ background: task.color }"
            :data-drag-data="JSON.stringify(task)"
          >
            <div>{{ task.title }}</div>
            <div>{{ getHours(task) }}</div>
          </div>
        </div>
      </div>
    </div>
    <MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="handleToastClose" />
  </div>
</template>

<style>
.mds-full-height {
  height: 100%;
}

.mds-drag-drop-sort-calendar {
  border-right: 1px solid #ccc;
}

.mds-drag-drop-sort-container {
  margin: 10px;
}

.mds-drag-drop-sort-container-wrapper {
  overflow: auto;
}

.mds-third-party-title {
  margin-top: 12px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
}

.mds-drag-drop-sort-task {
  margin: 10px;
  padding: 10px;
  touch-action: none;
  color: #fff;
  border-radius: 8px;
  font-family:
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
}
</style>
```

## Implementation notes

- Set `view: { calendar: { labels: true } }`. Enable `externalDrop: true` and `externalDrag: true` to allow events to be dropped in from and dragged out to external lists. Also set `dragToMove: true` and `dragToCreate: true`.
- **Mobiscroll draggable list**: initialize each task item with the `Draggable` component and `dragData` set to the event object (Angular: `mbsc-draggable` directive with `[dragData]`; JS/jQuery: `mobiscroll.draggable(element, { dragData })` or the `mbsc-draggable` attribute with `data-drag-data`). Wrap the list container with a `Dropcontainer` and handle `onItemDrop` (Vue: `@item-drop`) to re-add events that are dragged back from the calendar - `args.data` carries the event object.
- **SortableJS list**: initialize `new Sortable(container, options)`, then call `sortableJsDraggable.init(sortableInstance, { cloneSelector: '.sortable-drag', externalDrop: true, onExternalDrop })`. Supply the event definition via each item's `data-drag-data` attribute. The `onExternalDrop` callback receives `args.dragData`, `args.position`, and `args.container` for re-inserting the item when dropped back from the calendar.
- **Dragula list**: initialize `dragula([container])`, then call `dragulaDraggable.init(drake, { externalDrop: true, onExternalDrop })`. The `onExternalDrop` callback works identically to the SortableJS version.
- Handle `onEventCreated` (Vue: `@event-created`): when `args.action === 'externalDrop'`, remove the item from its source list and show a `Toast` with `args.event.title + ' added'`. Handle `onEventDeleted` (Vue: `@event-deleted`) to show a `Toast` with `args.event.title + ' unscheduled'`.
- Load initial calendar events from a remote endpoint using `getJson` and assign them to `data`; for the imperative API, call `inst.setEvents(events)` in the callback.

## 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 Task Presets](https://demo.mobiscroll.com/vue/eventcalendar/external-event-presets.md) - Drag preset task templates from an external list onto a Vue event calendar — a popup form captures task details and technician at drop time.