External Drag and Drop

Dragging events on the Mobiscroll event calendar

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

  • Enable the scheduler to receive external events by setting externalDrop to true.
  • Initialize the external events (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 and Dragula. If you are already using any of these libraries to reorder list items, they can be seamlessly integrated with the scheduler. 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 scheduler to receive external drops by setting externalDrop.
  • 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, onEventCreated or 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 scheduler and dropping them onto an external drop container. To activate this, you will need to:

  • Enable the scheduler to allow dragging events out by setting externalDrag to true.

Use the dropcontainer component and its 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 onEventDelete will be fired.

You can also use the onEventDragLeave and 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.

Unscheduling events to SortableJS and Dragula lists

Dropping events from the Eventcalendar to SortableJS and 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 externalDrop section in the documentation

Looking for external drag into a calendar?  Check out this example →
Get started with this example

Demo

Loading the live demo

Preview in full screen

Connect SortableJS or Dragula lists to the Scheduler — drag items in to schedule events and drag events out to unschedule them.

Code

View code on GitHub 
import {
  Draggable,
  dragulaDraggable,
  Dropcontainer,
  Eventcalendar,
  getJson,
  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({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

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 App() {
  const [dropCont, setDropCont] = useState();
  const [sortableCont, setSortableCont] = useState();
  const [dragulaCont, setDragulaCont] = useState();
  const [myEvents, setEvents] = useState([]);
  const [isToastOpen, setToastOpen] = useState(false);
  const [toastMessage, setToastMessage] = useState();

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

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

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

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

  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 handleItemDrop = useCallback((args) => {
    if (args.data) {
      setDraggableTasks((tasks) => [...tasks, args.data]);
    }
  }, []);

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

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

      sortableJsDraggable.init(sortableInstance, {
        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 drake;
    if (dragulaCont) {
      drake = dragula([dragulaCont]);
      dragulaDraggable.init(drake, {
        externalDrop: true,
        onExternalDrop: (a) => {
          const dragData = a.dragData;
          setDragulaTasks((prev) => {
            const newTasks = [...prev];
            newTasks.splice(a.position, 0, dragData);
            return newTasks;
          });
        },
      });
    }

    return () => {
      if (sortableInstance) {
        sortableInstance.destroy();
      }
      if (drake) {
        drake.destroy();
      }
    };
  }, [dragulaCont, sortableCont]);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/drag-drop-events/',
      (events) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <div className="mbsc-grid mbsc-no-padding mds-full-height">
      <div className="mbsc-row mds-full-height">
        <div className="mbsc-col-sm-9 mds-drag-drop-sort-calendar mds-full-height">
          <Eventcalendar
            clickToCreate={ }
            dragToCreate={ }
            dragToMove={ }
            dragToResize={ }
            eventDelete={ }
            data={myEvents}
            view={myView}
            externalDrop={true}
            dragToMove={true}
            dragToCreate={true}
            externalDrag={true}
            onEventCreated={handleEventCreated}
            onEventDeleted={handleEventDeleted}
          />
        </div>
        <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="mds-drag-drop-sort-container" ref={setDropCont}>
            <Dropcontainer onItemDrop={handleItemDrop} element={dropCont}>
              {myDraggableTasks.map((task) => (
                <Task key={task.id} data={task} isDraggable={true} />
              ))}
            </Dropcontainer>
          </div>
          <div className="mbsc-txt-muted mds-third-party-title">SortableJS list (externally sortable)</div>
          <div className="mds-drag-drop-sort-container" ref={setSortableCont}>
            {mySortableTasks.map((task) => (
              <Task key={task.id} data={task} />
            ))}
          </div>
          <div className="mbsc-txt-muted mds-third-party-title">Dragula list (externally sortable)</div>
          <div className="mds-drag-drop-sort-container" ref={setDragulaCont}>
            {myDragulaTasks.map((task) => (
              <Task key={task.id} data={task} />
            ))}
          </div>
        </div>
      </div>
      <Toast message={toastMessage} isOpen={isToastOpen} onClose={handleToastClose} />
    </div>
  );
}

export default App;

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.