# Drag & Resize

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

---

.. llms_copy::Drag & Resize

.. toc::

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

.. admonition::The data boundary
    :color: blue

    `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**.

.. exec::docs.drag_resize.drag_resize_toggles


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

.. admonition::Beta
    :color: yellow

    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

.. kwargs::dash_mui_scheduler.EventCalendar


---

*Source: /drag-resize*