Drag & Resize

Toggle and fine-tune drag-and-drop and resizing in the dash-mui-scheduler EventCalendar, including per-event overrides and external drag.

Drag & Resize

The MUI X Scheduler lets users reschedule an event by dragging it to a new time, and change its duration by dragging its edges. dms.EventCalendar exposes both behaviours through props and they are on by default — a calendar with no callbacks at all is already fully interactive. Every move or resize is written back to the events array (input and output) and announced through lastAction, so all you have to do is read those props.

events is both an input and an output. When the user drags or resizes an event, the component sends the entire new array back to Dash. Dates are plain ISO strings (e.g. "2024-01-15T10:00:00"), never Python datetime objects. lastAction is output-only and reports the most recent interaction — its type is one of create, update, delete, move, resize, or change.

Dragging — areEventsDraggable

areEventsDraggable (bool, default True) controls whether events can be picked up and dropped onto a new time or day. Set it to False to pin every event in place while still allowing creation and deletion. Dragging an event emits a lastAction of type move.

Resizing — areEventsResizable

areEventsResizable (default True) controls whether an event's edges can be dragged to change its duration. It accepts:

• True — both the start and end edges are resizable.
• False — the event keeps a fixed duration.
• 'start' — only the leading (start) edge can be dragged.
• 'end' — only the trailing (end) edge can be dragged.

Resizing emits a lastAction of type resize.

Live toggles

The example below wires a dmc.Switch to areEventsDraggable and a dmc.SegmentedControl to areEventsResizable, so you can feel the difference between each mode. A read-out below the calendar shows the latest lastAction, which makes it easy to tell a move apart from a resize.

# File: docs/drag_resize/drag_resize_toggles.py

"""Toggle drag-and-drop and resizing on an EventCalendar at runtime.

A `dmc.Switch` drives `areEventsDraggable` and a `dmc.SegmentedControl` drives
`areEventsResizable` (True / False / 'start' / 'end'). The read-out shows the
latest `lastAction` so you can tell a move apart from a resize.
"""
from dash import html, Input, Output, callback
import dash_mantine_components as dmc
import dash_mui_scheduler as dms

EVENTS = [
    {"id": 1, "title": "Team Meeting", "start": "2024-01-15T10:00:00", "end": "2024-01-15T11:00:00", "color": "blue"},
    {"id": 2, "title": "Project Review", "start": "2024-01-16T14:00:00", "end": "2024-01-16T15:30:00", "color": "purple"},
    {"id": 3, "title": "Client Call", "start": "2024-01-17T09:00:00", "end": "2024-01-17T10:00:00", "color": "green"},
    {"id": 4, "title": "Locked: Sprint Demo", "start": "2024-01-18T13:00:00", "end": "2024-01-18T14:00:00",
     "color": "grey", "draggable": False, "resizable": False},
]

component = dmc.Stack(
    [
        dmc.Group(
            [
                dmc.Switch(
                    id="drag_resize-draggable-switch",
                    label="areEventsDraggable",
                    checked=True,
                ),
                dmc.SegmentedControl(
                    id="drag_resize-resizable-control",
                    data=[
                        {"label": "Both", "value": "true"},
                        {"label": "Off", "value": "false"},
                        {"label": "Start edge", "value": "start"},
                        {"label": "End edge", "value": "end"},
                    ],
                    value="true",
                ),
            ],
            align="center",
            gap="lg",
        ),
        dms.EventCalendar(
            id="drag_resize-cal",
            events=EVENTS,
            defaultVisibleDate="2024-01-15",
            areEventsDraggable=True,
            areEventsResizable=True,
            height=600,
        ),
        dmc.Code(id="drag_resize-readout", block=True),
    ],
    gap="md",
)


@callback(
    Output("drag_resize-cal", "areEventsDraggable"),
    Output("drag_resize-cal", "areEventsResizable"),
    Input("drag_resize-draggable-switch", "checked"),
    Input("drag_resize-resizable-control", "value"),
)
def set_interactions(draggable, resizable):
    # Map the SegmentedControl string back to the prop's bool/'start'/'end' shape.
    resizable_value = {"true": True, "false": False, "start": "start", "end": "end"}[resizable]
    return draggable, resizable_value


@callback(
    Output("drag_resize-readout", "children"),
    Input("drag_resize-cal", "lastAction"),
)
def show_last_action(last_action):
    if not last_action:
        return "Drag an event to move it, or drag its edge to resize it — lastAction shows up here."
    event = last_action.get("event") or {}
    return (
        f"lastAction.type: {last_action.get('type')}\n"
        f"event: {event.get('title', '-')}  "
        f"{event.get('start', '-')} -> {event.get('end', '-')}"
    )

Per-event and per-resource overrides

The calendar-wide props set the default, but individual events and resources can opt in or out:

• Per event: add draggable (bool) and/or resizable (bool | 'start' | 'end')

to an event dict. A locked event might use {"draggable": False, "resizable": False} even while the rest of the calendar stays movable. (readOnly: True locks an event completely.)

• Per resource: a resource dict accepts areEventsDraggable,

areEventsResizable, and areEventsReadOnly, applying that policy to every event assigned to the resource.

These overrides are read straight off the events / resources data — there is no extra prop to enable them.

External drag — drag in and out of the calendar

Two props control whether events can cross the calendar's boundary:

• canDragEventsFromTheOutside (bool, default False) — allow an item from

outside the calendar to be dropped onto it as a new event.

• canDropEventsToTheOutside (bool, default False) — allow an event to be

dragged out of the calendar (for example, to remove it or hand it to another surface).

These enable the cross-boundary drag targets; wiring an actual external drag source (a palette of draggable items elsewhere on the page) is left to your own layout. Both default to False, so the calendar is self-contained until you opt in.

The MUI X Scheduler is in beta. Drag-and-drop and resizing work, but finer external-drag integration may change in future releases.

EventCalendar props

EventCalendar props

Source: /drag-resize