---
title: "React Timeline Schedule & Unschedule from External Lists Example | Mobiscroll"
component: "Timeline"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/timeline/external-drag-drop-sortable-dragula"
---

# Schedule & Unschedule from External Lists - React Timeline demo

Connect SortableJS or Dragula lists to the React Timeline — drag items onto the timeline to schedule them, drag them back off to unschedule. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/timeline/external-drag-drop-sortable-dragula)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/timeline/external-drag-drop-sortable-dragula)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/timeline/external-drag-drop-sortable-dragula)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/external-drag-drop-sortable-dragula.md), [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), [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/react/eventcalendar/api#opt-externalDrop) and/or [`externalResourceDrop`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-externalResourceDrop) to `true`.
- Initialize the external events or/and resources (containers) as `draggable` components.

Use the `Draggable` 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 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/react/eventcalendar/api#opt-externalDrop) or/and [`externalResourceDrop`](https://mobiscroll.com/docs/react/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/react/eventcalendar/api#event-onEventCreate), [`onEventCreated`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onEventCreated) or [`onEventCreateFailed`](https://mobiscroll.com/docs/react/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/react/eventcalendar/api#opt-externalDrag) or [`externalResourceDrag`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-externalResourceDrag) to `true`.
- Initialize the

[`dropcontainer`](https://mobiscroll.com/docs/react/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/react/eventcalendar/api#event-onEventDelete) will be fired.

You can also use the [`onEventDragLeave`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onEventDragLeave) and [`onEventDragEnter`](https://mobiscroll.com/docs/react/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/react/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/react/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/react/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`externalDrop`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-externalDrop) - option
- [`clickToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-eventDelete) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option
- [`resources`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-resources) - option
- [`externalDrag`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-externalDrag) - option
- [`externalResourceDrop`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-externalResourceDrop) - option
- [`onEventCreated`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onEventCreated) - event
- [`onEventDelete`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onEventDelete) - event
- [`onClose`](https://mobiscroll.com/docs/react/notifications/toast#event-onClose) - event
- [`onEventDeleted`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onEventDeleted) - event

## Code

### JSX

```jsx
import {
  Draggable,
  dragulaDraggable,
  Dropcontainer,
  Eventcalendar,
  setOptions,
  sortableJsDraggable,
  Toast,
} from '@mobiscroll/react';
import dragula from 'dragula';
import PropTypes from 'prop-types';
import { useCallback, useEffect, useMemo, useState } from 'react';
import Sortable from 'sortablejs';
import 'dragula/dist/dragula.css';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});
function Task({ data, isDraggable }) {
  const [draggable, setDraggable] = useState();

  const setDragElm = useCallback((elm) => {
    setDraggable(elm);
  }, []);

  const eventLength = Math.round(Math.abs(new Date(data.end).getTime() - new Date(data.start).getTime()) / (60 * 60 * 1000));

  return (
    <div
      className="mds-drag-drop-sort-task"
      ref={isDraggable && setDragElm}
      style={{ background: data.color }}
      data-drag-data={!isDraggable && JSON.stringify(data)}
    >
      <div>{data.title}</div>
      <div>{eventLength + ' hour' + (eventLength > 1 ? 's' : '')}</div>
      {isDraggable && <Draggable dragData={data} element={draggable} />}
    </div>
  );
}

Task.propTypes = {
  data: PropTypes.object.isRequired,
  isDraggable: PropTypes.bool,
};

function Resource({ data, isDraggable }) {
  const [draggable, setDraggable] = useState();

  const setDragElm = useCallback((elm) => {
    setDraggable(elm);
  }, []);

  return (
    <div
      ref={isDraggable && setDragElm}
      className="mds-drag-drop-sort-task"
      style={{ background: '#80808099' }}
      data-drag-data={!isDraggable && JSON.stringify(data)}
    >
      <div>{data.name}</div>
      {isDraggable && <Draggable dragData={data} element={draggable} type="resource" />}
    </div>
  );
}

Resource.propTypes = {
  data: PropTypes.object.isRequired,
  isDraggable: PropTypes.bool,
};

function App() {
  const [dropCont, setDropCont] = useState();
  const [sortableTaskCont, setSortableTaskCont] = useState();
  const [dragulaTaskCont, setDragulaTaskCont] = useState();
  const [sortableResourceCont, setSortableResourceCont] = useState();
  const [dragulaResourceCont, setDragulaResourceCont] = useState();
  const [isToastOpen, setToastOpen] = useState(false);
  const [toastMessage, setToastMessage] = useState();

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

  const [mySortableTasks, setSortableTasks] = useState([
    {
      id: 'sortable-1',
      title: 'Task 5',
      color: '#d1891f',
      start: '2026-10-26T08:00',
      end: '2026-10-26T09:30',
    },
    {
      id: 'sortable-2',
      title: 'Task 6',
      color: '#d1891f',
      start: '2026-10-26T12:00',
      end: '2026-10-26T15:00',
    },
    {
      id: 'sortable-3',
      title: 'Task 7',
      color: '#d1891f',
      start: '2026-10-26T08:30',
      end: '2026-10-26T11:00',
    },
    {
      id: 'sortable-4',
      title: 'Task 8',
      color: '#d1891f',
      start: '2026-10-26T16:00',
      end: '2026-10-26T21:00',
    },
  ]);

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

  const [myDraggableResources, setDraggableResources] = useState([
    {
      id: 'draggable-1',
      name: 'Resource 1',
    },
    {
      id: 'draggable-2',
      name: 'Resource 2',
    },
    {
      id: 'draggable-3',
      name: 'Resource 3',
    },
    {
      id: 'draggable-4',
      name: 'Resource 4',
    },
  ]);

  const [mySortableResources, setSortableResources] = useState([
    {
      id: 'sortable-1',
      name: 'Resource 5',
    },
    {
      id: 'sortable-2',
      name: 'Resource 6',
    },
    {
      id: 'sortable-3',
      name: 'Resource 7',
    },
    {
      id: 'sortable-4',
      name: 'Resource 8',
    },
  ]);

  const [myDragulaResources, setDragulaResources] = useState([
    {
      id: 'dragula-1',
      name: 'Resource 9',
    },
    {
      id: 'dragula-2',
      name: 'Resource 10',
    },
    {
      id: 'dragula-3',
      name: 'Resource 11',
    },
    {
      id: 'dragula-4',
      name: 'Resource 12',
    },
  ]);

  const myResources = useMemo(
    () => [
      { 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' },
    ],
    [],
  );

  const myView = useMemo(
    () => ({
      timeline: { type: 'day' },
    }),
    [],
  );

  const handleEventCreated = useCallback((args) => {
    if (args.action === 'externalDrop') {
      setDraggableTasks((tasks) => tasks.filter((item) => item.id !== args.event.id));
      setSortableTasks((tasks) => tasks.filter((item) => item.id !== args.event.id));
      setDragulaTasks((tasks) => tasks.filter((item) => item.id !== args.event.id));
      setToastMessage(args.event.title + ' added');
      setToastOpen(true);
    }
  }, []);

  const handleEventDeleted = useCallback((args) => {
    setToastMessage(args.event.title + ' unscheduled');
    setToastOpen(true);
  }, []);

  const handleResourceCreated = useCallback((args) => {
    if (args.type === 'onResourceCreated') {
      setDraggableResources((resources) => resources.filter((item) => item.id !== args.resource.id));
      setSortableResources((resources) => resources.filter((item) => item.id !== args.resource.id));
      setDragulaResources((resources) => resources.filter((item) => item.id !== args.resource.id));
      setToastMessage(args.resource.name + ' added');
      setToastOpen(true);
    }
  }, []);

  const handleItemDrop = useCallback((args) => {
    if (args.data) {
      setDraggableTasks((tasks) => [...tasks, args.data]);
    }
  }, []);

  const handleToastClose = useCallback(() => {
    setToastOpen(false);
  }, []);

  useEffect(() => {
    let sortableTaskInstance;
    if (sortableTaskCont) {
      sortableTaskInstance = new Sortable(sortableTaskCont, {
        animation: 150,
        forceFallback: true,
      });

      sortableJsDraggable.init(sortableTaskInstance, {
        cloneSelector: '.sortable-drag',
        externalDrop: true,
        onExternalDrop: (a) => {
          const dragData = a.dragData;
          setSortableTasks((prev) => {
            const newTasks = [...prev];
            newTasks.splice(a.position, 0, dragData);
            return newTasks;
          });
        },
      });
    }

    let sortableResourceInstance;
    if (sortableResourceCont) {
      sortableResourceInstance = new Sortable(sortableResourceCont, {
        animation: 150,
        forceFallback: true,
      });

      sortableJsDraggable.init(sortableResourceInstance, {
        cloneSelector: '.sortable-drag',
        type: 'resource',
      });
    }

    let drake1;
    if (dragulaTaskCont) {
      drake1 = dragula([dragulaTaskCont]);
      dragulaDraggable.init(drake1, {
        externalDrop: true,
        onExternalDrop: (a) => {
          const dragData = a.dragData;
          setDragulaTasks((prev) => {
            const newTasks = [...prev];
            newTasks.splice(a.position, 0, dragData);
            return newTasks;
          });
        },
      });
    }

    let drake2;
    if (dragulaResourceCont) {
      drake2 = dragula([dragulaResourceCont]);
      dragulaDraggable.init(drake2, {
        type: 'resource',
      });
    }

    return () => {
      if (sortableTaskInstance) {
        sortableTaskInstance.destroy();
      }
      if (sortableResourceInstance) {
        sortableResourceInstance.destroy();
      }
      if (drake1) {
        drake1.destroy();
      }
      if (drake2) {
        drake2.destroy();
      }
    };
  }, [dragulaTaskCont, dragulaResourceCont, sortableTaskCont, sortableResourceCont]);

  return (
    <div className="mbsc-grid mbsc-no-padding mds-drag-drop-sort mds-full-height">
      <div className="mbsc-row mds-full-height">
        <div className="mbsc-col-sm-3 mds-drag-drop-sort-container-wrapper mds-full-height">
          <div className="mbsc-txt-muted mds-third-party-title">Mobiscroll draggable</div>
          <div className="mbsc-flex">
            <div className="mbsc-col-sm-6 mbsc-flex-col">
              <div className="mds-drag-drop-sort-container mbsc-flex-col mbsc-flex-1-0" ref={setDropCont}>
                <div className="mbsc-txt-muted mds-third-party-list-title">Event list</div>
                <Dropcontainer onItemDrop={handleItemDrop} element={dropCont}>
                  {myDraggableTasks.map((task) => (
                    <Task key={task.id} data={task} isDraggable />
                  ))}
                </Dropcontainer>
              </div>
            </div>
            <div className="mbsc-col-sm-6 mbsc-flex-col">
              <div className="mds-drag-drop-sort-container mbsc-flex-col mbsc-flex-1-0">
                <div className="mds-third-party-list-title mbsc-txt-muted">Resource list</div>
                {myDraggableResources.map((res) => (
                  <Resource key={res.id} data={res} isDraggable />
                ))}
              </div>
            </div>
          </div>
          <div className="mbsc-txt-muted mds-third-party-title">SortableJS (externally sortable)</div>
          <div className="mbsc-flex">
            <div className="mbsc-col-sm-6 mbsc-flex-col">
              <div className="mds-drag-drop-sort-container mbsc-flex-col mbsc-flex-1-0">
                <div className="mds-third-party-list-title mbsc-txt-muted">Event list</div>
                <div className="mbsc-flex-col mbsc-flex-1-0" ref={setSortableTaskCont}>
                  {mySortableTasks.map((task) => (
                    <Task key={task.id} data={task} />
                  ))}
                </div>
              </div>
            </div>
            <div className="mbsc-col-sm-6 mbsc-flex-col">
              <div className="mds-drag-drop-sort-container mbsc-flex-col mbsc-flex-1-0">
                <div className="mds-third-party-list-title mbsc-txt-muted">Resource list</div>
                <div className="mbsc-flex-col mbsc-flex-1-0" ref={setSortableResourceCont}>
                  {mySortableResources.map((res) => (
                    <Resource key={res.id} data={res} />
                  ))}
                </div>
              </div>
            </div>
          </div>
          <div className="mbsc-txt-muted mds-third-party-title">Dragula (externally sortable)</div>
          <div className="mbsc-flex">
            <div className="mbsc-col-sm-6 mbsc-flex-col">
              <div className="mds-drag-drop-sort-container mbsc-flex-col mbsc-flex-1-0">
                <div className="mds-third-party-list-title mbsc-txt-muted">Event list</div>
                <div className="mbsc-flex-col mbsc-flex-1-0" ref={setDragulaTaskCont}>
                  {myDragulaTasks.map((task) => (
                    <Task key={task.id} data={task} />
                  ))}
                </div>
              </div>
            </div>
            <div className="mbsc-col-sm-6 mbsc-flex-col">
              <div className="mds-drag-drop-sort-container mbsc-flex-col mbsc-flex-1-0">
                <div className="mds-third-party-list-title mbsc-txt-muted">Resource list</div>
                <div className="mbsc-flex-col mbsc-flex-1-0" ref={setDragulaResourceCont}>
                  {myDragulaResources.map((res) => (
                    <Resource key={res.id} data={res} />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="mbsc-col-sm-9 mds-drag-drop-sort-calendar mds-full-height">
          <Eventcalendar
            clickToCreate={true}
            dragToCreate={true}
            dragToMove={true}
            dragToResize={true}
            eventDelete={true}
            view={myView}
            resources={myResources}
            dragToMove={true}
            dragToCreate={true}
            externalDrop={true}
            externalDrag={true}
            externalResourceDrop={true}
            onEventCreated={handleEventCreated}
            onResourceCreated={handleResourceCreated}
            onEventDelete={handleEventDeleted}
          />
        </div>
      </div>
      <Toast message={toastMessage} isOpen={isToastOpen} onClose={handleToastClose} />
    </div>
  );
}

export default App;
```

### TSX

```tsx
import {
  Draggable,
  dragulaDraggable,
  Dropcontainer,
  Eventcalendar,
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscEventCreatedEvent,
  MbscEventDeletedEvent,
  MbscExternalDropEvent,
  MbscItemDragEvent,
  MbscResource,
  MbscResourceCreatedEvent,
  setOptions,
  sortableJsDraggable,
  Toast,
} from '@mobiscroll/react';
import dragula, { Drake } from 'dragula';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import Sortable from 'sortablejs';
import 'dragula/dist/dragula.css';

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

const Task = (props: { data: MbscCalendarEvent; isDraggable?: boolean }) => {
  const data = props.data;
  const isDraggable = props.isDraggable;
  const [draggable, setDraggable] = useState<HTMLDivElement>();

  const setDragElm = useCallback((elm: HTMLDivElement) => {
    setDraggable(elm);
  }, []);

  const eventLength = Math.round(
    Math.abs(new Date(data.end as string).getTime() - new Date(data.start as string).getTime()) / (60 * 60 * 1000),
  );

  return (
    <div
      className="mds-drag-drop-sort-task"
      ref={isDraggable ? setDragElm : null}
      style={{ background: data.color }}
      data-drag-data={!isDraggable && JSON.stringify(data)}
    >
      <div>{data.title}</div>
      <div>{eventLength + ' hour' + (eventLength > 1 ? 's' : '')}</div>
      {isDraggable && <Draggable dragData={data} element={draggable} />}
    </div>
  );
};

const Resource = (props: { data: MbscResource; isDraggable?: boolean }) => {
  const data = props.data;
  const isDraggable = props.isDraggable;

  const [draggable, setDraggable] = useState<HTMLDivElement>();

  const setDragElm = useCallback((elm: HTMLDivElement) => {
    setDraggable(elm);
  }, []);

  return (
    <div
      ref={isDraggable ? setDragElm : null}
      className="mds-drag-drop-sort-task"
      style={{ background: '#80808099' }}
      data-drag-data={!isDraggable && JSON.stringify(data)}
    >
      <div>{data.name}</div>
      {isDraggable && <Draggable dragData={data} element={draggable} type="resource" />}
    </div>
  );
};

const App: FC = () => {
  const [dropCont, setDropCont] = useState<HTMLDivElement | null>();
  const [sortableTaskCont, setSortableTaskCont] = useState<HTMLDivElement | null>();
  const [dragulaTaskCont, setDragulaTaskCont] = useState<HTMLDivElement | null>();
  const [sortableResourceCont, setSortableResourceCont] = useState<HTMLDivElement | null>();
  const [dragulaResourceCont, setDragulaResourceCont] = useState<HTMLDivElement | null>();
  const [isToastOpen, setToastOpen] = useState<boolean>(false);
  const [toastMessage, setToastMessage] = useState<string>('');

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

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

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

  const [myDraggableResources, setDraggableResources] = useState<MbscResource[]>([
    {
      id: 'draggable-1',
      name: 'Resource 1',
    },
    {
      id: 'draggable-2',
      name: 'Resource 2',
    },
    {
      id: 'draggable-3',
      name: 'Resource 3',
    },
    {
      id: 'draggable-4',
      name: 'Resource 4',
    },
  ]);

  const [mySortableResources, setSortableResources] = useState<MbscResource[]>([
    {
      id: 'sortable-1',
      name: 'Resource 5',
    },
    {
      id: 'sortable-2',
      name: 'Resource 6',
    },
    {
      id: 'sortable-3',
      name: 'Resource 7',
    },
    {
      id: 'sortable-4',
      name: 'Resource 8',
    },
  ]);

  const [myDragulaResources, setDragulaResources] = useState<MbscResource[]>([
    {
      id: 'dragula-1',
      name: 'Resource 9',
    },
    {
      id: 'dragula-2',
      name: 'Resource 10',
    },
    {
      id: 'dragula-3',
      name: 'Resource 11',
    },
    {
      id: 'dragula-4',
      name: 'Resource 12',
    },
  ]);

  const myResources = useMemo<MbscResource[]>(
    () => [
      { 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' },
    ],
    [],
  );

  const myView = useMemo<MbscEventcalendarView>(
    () => ({
      timeline: { type: 'day' },
    }),
    [],
  );

  const handleEventCreated = useCallback((args: MbscEventCreatedEvent) => {
    if (args.action === 'externalDrop') {
      setDraggableTasks((tasks) => tasks.filter((item) => item.id !== args.event.id));
      setSortableTasks((tasks) => tasks.filter((item) => item.id !== args.event.id));
      setDragulaTasks((tasks) => tasks.filter((item) => item.id !== args.event.id));
      setToastMessage(args.event.title + ' added');
      setToastOpen(true);
    }
  }, []);

  const handleEventDeleted = useCallback((args: MbscEventDeletedEvent) => {
    setToastMessage(args.event.title + ' unscheduled');
    setToastOpen(true);
  }, []);

  const handleResourceCreated = useCallback((args: MbscResourceCreatedEvent) => {
    if (args.type === 'onResourceCreated') {
      setDraggableResources((resources) => resources.filter((item) => item.id !== args.resource.id));
      setSortableResources((resources) => resources.filter((item) => item.id !== args.resource.id));
      setDragulaResources((resources) => resources.filter((item) => item.id !== args.resource.id));
      setToastMessage(args.resource.name + ' added');
      setToastOpen(true);
    }
  }, []);

  const handleItemDrop = useCallback((args: MbscItemDragEvent) => {
    if (args.data) {
      setDraggableTasks((tasks) => [...tasks, args.data]);
    }
  }, []);

  const handleToastClose = useCallback(() => {
    setToastOpen(false);
  }, []);

  useEffect(() => {
    let sortableTaskInstance: Sortable;
    if (sortableTaskCont) {
      sortableTaskInstance = new Sortable(sortableTaskCont, {
        animation: 150,
        forceFallback: true,
      });

      sortableJsDraggable.init(sortableTaskInstance, {
        cloneSelector: '.sortable-drag',
        externalDrop: true,
        onExternalDrop: (a: MbscExternalDropEvent) => {
          const dragData = a.dragData;
          setSortableTasks((prev) => {
            const newTasks = [...prev];
            newTasks.splice(a.position, 0, dragData);
            return newTasks;
          });
        },
      });
    }

    let sortableResourceInstance: Sortable;
    if (sortableResourceCont) {
      sortableResourceInstance = new Sortable(sortableResourceCont, {
        animation: 150,
        forceFallback: true,
      });

      sortableJsDraggable.init(sortableResourceInstance, {
        cloneSelector: '.sortable-drag',
        type: 'resource',
      });
    }

    let drake1: Drake;
    if (dragulaTaskCont) {
      drake1 = dragula([dragulaTaskCont]);
      dragulaDraggable.init(drake1, {
        externalDrop: true,
        onExternalDrop: (a: MbscExternalDropEvent) => {
          const dragData = a.dragData;
          setDragulaTasks((prev) => {
            const newTasks = [...prev];
            newTasks.splice(a.position, 0, dragData);
            return newTasks;
          });
        },
      });
    }

    let drake2: Drake;
    if (dragulaResourceCont) {
      drake2 = dragula([dragulaResourceCont]);
      dragulaDraggable.init(drake2, {
        type: 'resource',
      });
    }

    return () => {
      if (sortableTaskInstance) {
        sortableTaskInstance.destroy();
      }
      if (sortableResourceInstance) {
        sortableResourceInstance.destroy();
      }
      if (drake1) {
        drake1.destroy();
      }
      if (drake2) {
        drake2.destroy();
      }
    };
  }, [dragulaTaskCont, dragulaResourceCont, sortableTaskCont, sortableResourceCont]);

  return (
    <div className="mbsc-grid mbsc-no-padding mds-drag-drop-sort mds-full-height">
      <div className="mbsc-row mds-full-height">
        <div className="mbsc-col-sm-3 mds-drag-drop-sort-container-wrapper mds-full-height">
          <div className="mbsc-txt-muted mds-third-party-title">Mobiscroll draggable</div>
          <div className="mbsc-flex">
            <div className="mbsc-col-sm-6 mbsc-flex-col">
              <div className="mds-drag-drop-sort-container mbsc-flex-col mbsc-flex-1-0" ref={setDropCont}>
                <div className="mbsc-txt-muted mds-third-party-list-title">Event list</div>
                <Dropcontainer onItemDrop={handleItemDrop} element={dropCont}>
                  {myDraggableTasks.map((task) => (
                    <Task key={task.id} data={task} isDraggable />
                  ))}
                </Dropcontainer>
              </div>
            </div>
            <div className="mbsc-col-sm-6 mbsc-flex-col">
              <div className="mds-drag-drop-sort-container mbsc-flex-col mbsc-flex-1-0">
                <div className="mds-third-party-list-title mbsc-txt-muted">Resource list</div>
                {myDraggableResources.map((res) => (
                  <Resource key={res.id} data={res} isDraggable />
                ))}
              </div>
            </div>
          </div>
          <div className="mbsc-txt-muted mds-third-party-title">SortableJS (externally sortable)</div>
          <div className="mbsc-flex">
            <div className="mbsc-col-sm-6 mbsc-flex-col">
              <div className="mds-drag-drop-sort-container mbsc-flex-col mbsc-flex-1-0">
                <div className="mds-third-party-list-title mbsc-txt-muted">Event list</div>
                <div className="mbsc-flex-col mbsc-flex-1-0" ref={setSortableTaskCont}>
                  {mySortableTasks.map((task) => (
                    <Task key={task.id} data={task} />
                  ))}
                </div>
              </div>
            </div>
            <div className="mbsc-col-sm-6 mbsc-flex-col">
              <div className="mds-drag-drop-sort-container mbsc-flex-col mbsc-flex-1-0">
                <div className="mds-third-party-list-title mbsc-txt-muted">Resource list</div>
                <div className="mbsc-flex-col mbsc-flex-1-0" ref={setSortableResourceCont}>
                  {mySortableResources.map((res) => (
                    <Resource key={res.id} data={res} />
                  ))}
                </div>
              </div>
            </div>
          </div>
          <div className="mbsc-txt-muted mds-third-party-title">Dragula (externally sortable)</div>
          <div className="mbsc-flex">
            <div className="mbsc-col-sm-6 mbsc-flex-col">
              <div className="mds-drag-drop-sort-container mbsc-flex-col mbsc-flex-1-0">
                <div className="mds-third-party-list-title mbsc-txt-muted">Event list</div>
                <div className="mbsc-flex-col mbsc-flex-1-0" ref={setDragulaTaskCont}>
                  {myDragulaTasks.map((task) => (
                    <Task key={task.id} data={task} />
                  ))}
                </div>
              </div>
            </div>
            <div className="mbsc-col-sm-6 mbsc-flex-col">
              <div className="mds-drag-drop-sort-container mbsc-flex-col mbsc-flex-1-0">
                <div className="mds-third-party-list-title mbsc-txt-muted">Resource list</div>
                <div className="mbsc-flex-col mbsc-flex-1-0" ref={setDragulaResourceCont}>
                  {myDragulaResources.map((res) => (
                    <Resource key={res.id} data={res} />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="mbsc-col-sm-9 mds-drag-drop-sort-calendar mds-full-height">
          <Eventcalendar
            clickToCreate={true}
            dragToCreate={true}
            dragToMove={true}
            dragToResize={true}
            eventDelete={true}
            view={myView}
            externalDrop={true}
            externalResourceDrop={true}
            dragToMove={true}
            dragToCreate={true}
            externalDrag={true}
            onEventCreated={handleEventCreated}
            onResourceCreated={handleResourceCreated}
            onEventDeleted={handleEventDeleted}
            resources={myResources}
          />
        </div>
      </div>
      <Toast message={toastMessage} isOpen={isToastOpen} onClose={handleToastClose} />
    </div>
  );
};

export default App;
```

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

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

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

## Related demos

- Previous: [Prevent Event Overlap](https://demo.mobiscroll.com/react/timeline/prevent-double-booking-events.md) - Prevent double booking on the React Timeline — block overlaps per event, per resource, or globally, and show a toast on conflict.