---
title: "Javascript Timeline Schedule & Unschedule from External Lists Example | Mobiscroll"
component: "Timeline"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/timeline/external-drag-drop-sortable-dragula"
---
# Schedule & Unschedule from External Lists - JavaScript Timeline demo
Connect SortableJS or Dragula lists to the Javascript Timeline — drag items onto the timeline to schedule them, drag them back off to unschedule. Plain JavaScript API.
- [Live demo](https://demo.mobiscroll.com/javascript/timeline/external-drag-drop-sortable-dragula)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/timeline/external-drag-drop-sortable-dragula)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/timeline/external-drag-drop-sortable-dragula.md), [Angular](https://demo.mobiscroll.com/angular/timeline/external-drag-drop-sortable-dragula.md), [React](https://demo.mobiscroll.com/react/timeline/external-drag-drop-sortable-dragula.md), [Vue](https://demo.mobiscroll.com/vue/timeline/external-drag-drop-sortable-dragula.md)
## Description
**Dragging events and resources on the Mobiscroll event calendar**
Events and resources can be scheduled by dragging and dropping an external item onto the timeline with Mobiscroll `draggable`. In order for that to work you will need to have two things set up:
- Enable the timeline to receive external events and/or resources by setting [`externalDrop`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrop) and/or [`externalResourceDrop`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalResourceDrop) to `true`.
- Initialize the external events or/and resources (containers) as `draggable` components.
Set up a container as draggable with the `mbsc-draggable` attribute. Pass a skeleton event definition through the `data-drag-data` attribute as a stringified json object. This will be added to the event calendar on drop. If omitted, a default event will be created. For a more programmatic approach you might want to use the component initialization where the `draggable` is initialized in js code and the `dragData` can be passed as an object.
**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 timeline. This integration enables a smooth workflow where items can be dragged from external lists and scheduled directly onto the calendar.
Events and resources 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 timeline to receive external drops by setting [`externalDrop`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrop) or/and [`externalResourceDrop`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalResourceDrop)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 [`onEventCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventCreate), [`onEventCreated`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventCreated) or [`onEventCreateFailed`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventCreateFailed) to run custom logic (e.g. showing a toast) when a drop succeeds or fails.
**Unscheduling events and resources (or dragging them off a calendar)**
Additionally events and resources can be unscheduled by dragging them out from the timeline and dropping them onto an external drop container. To activate this, you will need to:
- Enable the timeline to allow dragging events or resources out by setting [`externalDrag`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrag) or [`externalResourceDrag`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalResourceDrag) to `true`.
- Initialize the
[`dropcontainer`](https://mobiscroll.com/docs/javascript/eventcalendar/drag-and-drop#dropcontainer).
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 [`onEventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventDelete) will be fired.
You can also use the [`onEventDragLeave`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventDragLeave) and [`onEventDragEnter`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventDragEnter), and the drop container's `onItemDragEnter` and `onItemDragLeave` events to provide visual feedback or running custom logic during drag.
Learn more from the [external drag & drop documentation](https://mobiscroll.com/docs/javascript/eventcalendar/drag-and-drop#the-eventcalendar-as-source).
**Unscheduling events or resources to SortableJS and Dragula lists**
Dropping events or resources 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/javascript/eventcalendar/drag-and-drop#third-party-dragging-support) section in the documentation
## What this demo shows
- A desktop daily timeline where hours are arranged horizontally and resources are listed as rows on the left.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between weeks and the Today button returns to the current date.
- **Day view** The strip below the header shows the selected day, with the current date highlighted. The timeline displays hourly columns from 12 AM to 12 PM.
- **Resources** Multiple resources are shown as separate timeline rows.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **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 yellow items, and `Dragula list (externally sortable)` with four green items. Each list contains four grey resources as well.
- **Scheduling from lists** Any item from the external lists can be dragged onto the timeline to create and schedule that event on the target time or drop a resource to the resource column.
- **Unscheduling back to lists** Scheduled events can be dragged out of the timeline and dropped back into an external list, removing them from the day view.
- **List behavior** When an item is scheduled from an external list, it disappears from that list and appears on the timeline.
- **Feedback on drop** After an event is scheduled from an external list, a toast appears near the bottom center of the timeline showing the event title and the `added` meesage.
- **Feedback on externap list drop** After an event is unscheduled from the timeline and dropped on the external list a toast appears near the bottom center of the timeline showing the event title and the `unscheduled` message.
- **Event cards** Events are shown as colored cards with a left color stripe, a bold title, and the start and end time below the title.
- **Date positioning** Events are positioned by their assigned resource and exact date range.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.
## Best for
- **Unscheduled work queues** Managing tasks, appointments, or resources that start in an external backlog and need to be placed onto specific times.
- **Desktop planning workflows** Daily timeline experiences where users need a time-grid view together with a side panel of draggable events and resources.
- **Schedule and unschedule flows** Use cases where users assign items to the timeline, then move them back out to return them to an unscheduled state.
- **Third-party drag-and-drop integration** Projects that combine Mobiscroll timeline with existing `SortableJS` or `Dragula` list implementations.
## 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
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`externalDrag`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrag) - option
- [`externalDrop`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrop) - option
- [`externalResourceDrop`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalResourceDrop) - option
- [`onEventCreated`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventCreated) - event
- [`onEventDeleted`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventDeleted) - event
- [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
## Code
### JS
```js
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
var draggedTask;
var draggedResource;
function addToExternalList(args) {
var afterElement = args.afterElement;
var dragData = args.dragData;
var eventLength = Math.abs(Math.abs(new Date(dragData.end).getTime() - new Date(dragData.start).getTime()) / (60 * 60 * 1000));
var newItem = document.createElement('div');
newItem.className = 'mds-drag-drop-sort-task';
newItem.style.background = dragData.color || '';
newItem.setAttribute('data-drag-data', JSON.stringify(dragData));
newItem.innerHTML =
'' +
dragData.title +
'
' +
eventLength +
' hour' +
(eventLength > 1 ? 's' : '') +
'
';
args.container.insertBefore(newItem, afterElement);
}
mobiscroll.eventcalendar('#demo-drag-drop-sortable-dragula', {
dragToMove: true,
dragToCreate: true,
externalDrag: true,
externalDrop: true,
externalResourceDrop: true,
onEventCreated: function (args) {
if (draggedTask && args.action === 'externalDrop') {
draggedTask.remove();
}
mobiscroll.toast({
message: args.event.title + ' added',
});
var elm = document.getElementById('mds-event-' + args.event.id);
if (elm) {
elm.remove();
}
},
onEventDeleted: function (args) {
mobiscroll.toast({
message: args.event.title + ' unscheduled',
});
},
onResourceCreated: function (args) {
if (draggedResource && args.type === 'onResourceCreated') {
draggedResource.remove();
}
mobiscroll.toast({
message: args.resource.name + ' added',
});
var elm = document.getElementById('mds-resource-' + args.resource.id);
if (elm) {
elm.remove();
}
},
resources: [
{ name: 'Resource A', id: 'res-1' },
{ name: 'Resource B', id: 'res-2' },
{ name: 'Resource C', id: 'res-3' },
{ name: 'Resource D', id: 'res-4' },
{ name: 'Resource E', id: 'res-5' },
],
view: {
timeline: {
type: 'day',
},
},
});
mobiscroll.dropcontainer('#external-drop-cont', {
onItemDrop: function (args) {
if (args.data) {
var event = args.data;
var eventLength = Math.round(Math.abs(new Date(event.end) - new Date(event.start)) / (60 * 60 * 1000));
var elm = document.createElement('div');
elm.setAttribute('id', 'mds-event-' + event.id);
elm.classList.add('mds-drag-drop-sort-task');
elm.style.background = event.color;
elm.innerHTML =
'' +
event.title +
'
' +
eventLength +
' hour' +
(eventLength > 1 ? 's' : '') +
'
';
document.getElementById('mds-event').appendChild(elm);
mobiscroll.draggable('#mds-event-' + event.id, {
dragData: event,
});
}
},
});
var sortableTaskInstance = new Sortable(document.getElementById('demo-sortable-task-list'), {
animation: 150,
forceFallback: true,
onStart: function (e) {
draggedTask = e.item;
},
onEnd: function () {
setTimeout(function () {
draggedTask = null;
});
},
});
mobiscroll.sortableJsDraggable.init(sortableTaskInstance, {
cloneSelector: '.sortable-drag',
externalDrop: true,
onExternalDrop: function (args) {
addToExternalList(args);
},
});
var sortableResourceInstance = new Sortable(document.getElementById('demo-sortable-resource-list'), {
animation: 150,
forceFallback: true,
onStart: function (e) {
draggedResource = e.item;
},
onEnd: function () {
setTimeout(function () {
draggedResource = null;
});
},
});
mobiscroll.sortableJsDraggable.init(sortableResourceInstance, {
cloneSelector: '.sortable-drag',
type: 'resource',
});
var drake1 = dragula([document.getElementById('demo-dragula-task-list')]);
drake1.on('drag', function (e) {
draggedTask = e;
});
drake1.on('cancel', function () {
draggedTask = null;
});
drake1.on('drop', function () {
setTimeout(function () {
draggedTask = null;
});
});
mobiscroll.dragulaDraggable.init(drake1, {
externalDrop: true,
onExternalDrop: function (args) {
addToExternalList(args);
},
});
var drake2 = dragula([document.getElementById('demo-dragula-resource-list')]);
drake2.on('drag', function (e) {
draggedResource = e;
});
drake2.on('cancel', function () {
draggedResource = null;
});
drake2.on('drop', function () {
setTimeout(function () {
draggedResource = null;
});
});
mobiscroll.dragulaDraggable.init(drake2, {
type: 'resource',
});
// });
```
### HTML
```html
Mobiscroll draggable
SortableJS (externally sortable)
Dragula (externally sortable)
```
### CSS
```css
.mds-full-height {
height: 100%;
}
.mds-drag-drop-sort-calendar {
border-left: 1px solid #ccc;
}
.mds-drag-drop-sort .mbsc-timeline-resource-col {
width: 100px;
}
.mds-drag-drop-sort-container {
margin: 5px;
}
.mds-drag-drop-sort-container-wrapper {
overflow: auto;
}
.mds-drag-drop-sort-task {
margin-top: 5px;
padding: 10px 12px 10px 12px;
align-content: center;
touch-action: none;
color: #fff;
border-radius: 8px;
flex: 0 0 4.2em;
font-family: -apple-system, Segoe UI, Roboto, sans-serif;
font-size: 12px;
}
.mds-third-party-title {
margin-top: 12px;
padding: 0 10px;
font-size: 16px;
font-weight: 600;
}
.mds-third-party-list-title {
font-weight: 600;
padding: 0 5px;
font-size: 12px;
text-transform: none;
}
.mds-drag-drop-sort-duration {
font-size: 10px;
}
```
## Implementation notes
- Use `timeline: { type: 'day' }` with 5 fixed calendar resources (A-E). Enable `externalDrop: true`, `externalDrag: true`, and `externalResourceDrop: true` on the `Eventcalendar`.
- The page has three side-by-side external panel sections, each with an **Event list** and a **Resource list**. The three sections demonstrate three integration paths: Mobiscroll `Draggable`, SortableJS, and Dragula.
- **Mobiscroll Draggable (native path):**
- Each task item renders a `Draggable` component (Angular: `mbsc-draggable` directive, Vue: `MbscDraggable`) with `dragData` set to the full event object and `element` pointing to the item's DOM node.
- Resource items use the same pattern with `type="resource"` on the `Draggable`.
- Wrap the event list in a `Dropcontainer` (Vue: `MbscDropcontainer`) with `onItemDrop` to handle events dragged back from the calendar - add the returned `args.data` back to the list.
- **SortableJS (plugin path):**
- Initialize `new Sortable(container, { animation: 150, forceFallback: true })` on the list container.
- Call `sortableJsDraggable.init(sortableInstance, { cloneSelector: '.sortable-drag' })` from `@mobiscroll/*` to connect the list to the calendar. Pass `type: 'resource'` for resource lists. Pass `externalDrop: true` and `onExternalDrop` for event lists that should also receive events back from the calendar; the callback receives `{ dragData, position }` - splice `dragData` into the list at `position`.
- Event data is read from each item element's `data-drag-data` attribute (a stringified JSON of the event object).
- **Dragula (plugin path):**
- Initialize `dragula([container])` on the list container.
- Call `dragulaDraggable.init(drake, { ... })` with the same option shape as the SortableJS path.
- **Calendar event handling:**
- `onEventCreated`: if `args.action === 'externalDrop'`, remove the item from whichever source list contains a matching `id`, then show a `Toast` confirming the event was added.
- `onEventDelete`: fires when an event is dragged out of the calendar to the `Dropcontainer` - show a toast indicating the event was unscheduled.
- `onResourceCreated`: if `args.type === 'onResourceCreated'`, remove the matching resource from the source list and show a toast.
- Store each panel's items as separate mutable state arrays so items disappear from the list once dropped onto the calendar and re-appear when dragged back.
## 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: [Prevent Event Overlap](https://demo.mobiscroll.com/javascript/timeline/prevent-double-booking-events.md) - Prevent double booking on the Javascript Timeline — block overlaps per event, per resource, or globally, and show a toast on conflict.