Editing

Create and edit events in dash-mui-scheduler — the edit dialog, event creation config, and read-only calendars or events.

Editing events

dms.EventCalendar is interactive out of the box. With no callback at all, a user can create, drag, resize, and delete events — Dash's own setProps round-trip persists each change into the events prop. The component treats events as both input and output: on every create, move, resize, or delete it writes the full new array back. Dates inside events are always ISO strings (e.g. "2024-01-15T10:00:00" for wall time, or a trailing Z for UTC) — never Python datetime objects.

Add a callback only when you want to observe what changed: read events for the new state, or read lastAction — an output-only dict shaped {type, event, event_timestamp} where type is one of create, update, delete, move, resize, or change.

The edit dialog

Clicking an existing event opens the built-in edit dialog where the title, time, color, and description can be changed; saving writes the updated event back into events. Interacting with an empty slot starts event creation (see below). You do not wire any of this up yourself — it is part of the component.

The MUI X Scheduler is in beta. The edit dialog's exact fields and styling may change in future releases. The Dash data boundary described here (events in/out, lastAction, ISO strings) is stable.

Configuring event creation

The eventCreation prop controls how new events are drawn:

• eventCreation=True (default) — creation is enabled with the default gesture.
• eventCreation=False — creation is disabled entirely; users can still

move or resize existing events (unless those are locked too).

• eventCreation={"interaction": "double-click", "duration": 45} — an object

where interaction is "click" or "double-click", and duration is the new event's length in minutes.

In the example below, double-clicking an empty slot creates a 45-minute event. The lastAction output is echoed underneath so you can see each change.

# File: docs/editing/event_creation.py

from dash import Input, Output, callback
import dash_mantine_components as dmc
import dash_mui_scheduler as dms

# Dates are ISO strings (wall time, no "Z"). The component writes the
# full new array back to `events` on every create / move / resize / delete.
events = [
    {
        "id": "kickoff",
        "title": "Project kickoff",
        "start": "2024-01-15T10:00:00",
        "end": "2024-01-15T11:30:00",
        "color": "indigo",
    },
    {
        "id": "review",
        "title": "Design review",
        "start": "2024-01-17T14:00:00",
        "end": "2024-01-17T15:00:00",
        "color": "teal",
    },
]

component = dmc.Stack(
    [
        dmc.Text(
            "Double-click an empty slot to create a 45-minute event. "
            "Existing events stay draggable and resizable.",
            size="sm",
            c="dimmed",
        ),
        dms.EventCalendar(
            id="editing-creation-cal",
            events=events,
            # interaction: 'click' | 'double-click'; duration is in minutes.
            eventCreation={"interaction": "double-click", "duration": 45},
            defaultVisibleDate="2024-01-15",
            defaultView="week",
            height=600,
        ),
        dmc.Code(id="editing-creation-action", block=True),
    ],
    gap="sm",
)


@callback(
    Output("editing-creation-action", "children"),
    Input("editing-creation-cal", "lastAction"),
)
def show_action(last_action):
    if not last_action:
        return "No action yet — double-click an empty slot to create an event."
    event = last_action.get("event") or {}
    return f"{last_action.get('type')}: {event.get('title', '(none)')}"

Read-only: whole calendar vs. one event

Locking works at two levels:

• Globally — readOnly=True on the calendar disables all creating,

moving, resizing, and deleting. The calendar becomes a pure display.

• Per event — add "readOnly": True to a single event dict to freeze

just that event while the rest of the calendar stays editable.

The example shows both: a fully read-only calendar on the left, and an editable calendar on the right where only the red all-hands event is locked.

# File: docs/editing/editing_readonly.py

import dash_mantine_components as dmc
import dash_mui_scheduler as dms

# Even with readOnly=False, one event is locked via its own `readOnly` key.
events = [
    {
        "id": "standup",
        "title": "Daily standup",
        "start": "2024-01-15T09:00:00",
        "end": "2024-01-15T09:30:00",
        "color": "blue",
    },
    {
        "id": "frozen",
        "title": "Locked: company all-hands (readOnly)",
        "start": "2024-01-16T13:00:00",
        "end": "2024-01-16T14:00:00",
        "color": "red",
        "readOnly": True,
    },
    {
        "id": "demo",
        "title": "Sprint demo",
        "start": "2024-01-18T11:00:00",
        "end": "2024-01-18T12:00:00",
        "color": "green",
    },
]

component = dmc.Stack(
    [
        dmc.Text(
            "Left: a fully read-only calendar (readOnly=True) — no create, move, "
            "resize, or delete. Right: an editable calendar where only the red "
            "all-hands event is locked via its per-event readOnly key.",
            size="sm",
            c="dimmed",
        ),
        dmc.SimpleGrid(
            cols={"base": 1, "md": 2},
            spacing="md",
            children=[
                dms.EventCalendar(
                    id="editing-readonly-cal",
                    events=events,
                    readOnly=True,
                    defaultVisibleDate="2024-01-15",
                    defaultView="week",
                    height=580,
                ),
                dms.EventCalendar(
                    id="editing-perevent-cal",
                    events=events,
                    defaultVisibleDate="2024-01-15",
                    defaultView="week",
                    height=580,
                ),
            ],
        ),
    ],
    gap="sm",
)

To keep events editable but stop new ones from being drawn, set eventCreation=False rather than readOnly=True. readOnly locks everything; eventCreation=False locks creation alone.

EventCalendar props

EventCalendar props

Source: /editing