Responsive

Mobile-aware UX for the Event Calendar — a responsive event drawer, an auto-collapsing side panel, and panning the time grid to the current time.

Overview

These props are Dash-wrapper additions on top of the MUI X Scheduler. They make EventCalendar (and EventCalendarPremium) behave better on phones and small screens, and let the day/week grid open already scrolled to "now".

Prop	Default	What it does
`eventDialogVariant`	`"drawer"`	Presents the event editor as a responsive drawer instead of a floating dialog.
`responsiveSidePanel`	`True`	Side panel starts open on wide screens, collapsed on phones.
`mobileBreakpoint`	`768`	Pixel width below which the mobile layout kicks in.
`scrollToCurrentTime`	`False`	Pan the day/week grid so the current-time line is centered on first render.

The event drawer

The Scheduler renders its event editor as a floating, draggable dialog that is positioned next to the event you clicked — which tends not to "snap" anywhere and reads poorly on a phone. With eventDialogVariant="drawer" (the default), the wrapper restyles that editor into a drawer:

Desktop (≥ mobileBreakpoint): a right-anchored, full-height panel.
Mobile (< mobileBreakpoint): a bottom sheet taking 80% of the viewport

height, with the form body scrolling and the title/Save/Delete pinned.

Click any event in the calendar below (try it at a narrow window width too) to see the drawer:

Set eventDialogVariant="dialog" to restore the library's original floating dialog. If your app has a fixed header, set eventDialogTopOffset to its height (in px) so the desktop drawer starts below it and lines up with your sidebar instead of covering the header — this documentation site uses 70.

The MUI X Scheduler beta does not expose a slot to swap the editor, so this is a CSS restyle of the built-in dialog (which is portaled to <body> with stable MuiEventCalendar-eventDialog* classes) — not a separate dmc.Drawer. It keeps all of the Scheduler's own validation and recurrence UI while fixing the placement and mobile layout. A fully custom editor would require forking the component and is intentionally avoided while the Scheduler is in beta.

The side panel

responsiveSidePanel decides the side panel's initial state from the viewport width: open at mobileBreakpoint and above, collapsed below it. This only sets the initial state — the user can still toggle it, and you can override it entirely by pinning isSidePanelOpen in preferences / defaultPreferences.

dms.EventCalendar(
    id="cal",
    events=events,
    responsiveSidePanel=True,   # default
    mobileBreakpoint=768,       # phones (< 768px) start collapsed
)

Panning to the current time

In the day and week views the grid normally opens at midnight. Set scrollToCurrentTime=True and the grid scrolls so the red current-time line is centered on first render (and again when you switch into a time view). It works together with showCurrentTimeIndicator (on by default):

# File: docs/responsive/now_indicator.py

import datetime

from dash import html
import dash_mui_scheduler as dms

_today = datetime.date.today()


def _iso(day, hour, minute=0):
    return datetime.datetime.combine(
        day, datetime.time(hour, minute)
    ).strftime("%Y-%m-%dT%H:%M:%S")


events = [
    {"id": "rni-1", "title": "Morning sync", "start": _iso(_today, 9), "end": _iso(_today, 9, 30), "color": "blue"},
    {"id": "rni-2", "title": "Focus block", "start": _iso(_today, 11), "end": _iso(_today, 12, 30), "color": "teal"},
    {"id": "rni-3", "title": "1:1", "start": _iso(_today, 15), "end": _iso(_today, 15, 45), "color": "purple"},
]

# `scrollToCurrentTime` pans the week grid so the red "now" line is centered on
# first render — no more scrolling up from midnight. It pairs with the default
# `showCurrentTimeIndicator`.
component = html.Div(
    dms.EventCalendar(
        id="responsive-now-cal",
        events=events,
        defaultView="week",
        defaultVisibleDate=_today.isoformat(),
        scrollToCurrentTime=True,
        showCurrentTimeIndicator=True,
        height=600,
    )
)

dms.EventCalendar(
    id="cal",
    events=events,
    defaultView="week",
    scrollToCurrentTime=True,        # pan to now on load
    showCurrentTimeIndicator=True,   # the red "now" line (default)
)

In month and agenda views there is no time grid, so the prop is simply ignored.

Props

`EventCalendar` props

prop	type	description
`id`	string; optional	The id used to identify this component in Dash callbacks.
`areEventsDraggable`	boolean; optional	Allow drag-to-reschedule. Default True.
`areEventsResizable`	boolean \	a value equal to: 'start', 'end'; optional	Allow resize (bool, or restrict to "start"/"end"). Default True.
`canDragEventsFromTheOutside`	boolean; optional	Allow external events to be dragged in. Default False.
`canDropEventsToTheOutside`	boolean; optional	Allow events to be dragged out of the calendar. Default False.
`className`	string; optional	CSS class applied to the wrapping div.
`defaultPreferences`	dict; optional	Uncontrolled initial preferences (same shape as `preferences`). `defaultPreferences` is a dict with keys: - ampm (boolean; optional) - weekStartsOn (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional) - showWeekends (boolean; optional) - showWeekNumber (boolean; optional) - isSidePanelOpen (boolean; optional) - showEmptyDaysInAgenda (boolean; optional)
`defaultView`	a value equal to: 'day', 'week', 'month', 'agenda'; optional	Uncontrolled initial view. Default "week".
`defaultVisibleDate`	string; optional	Uncontrolled initial visible date (ISO string). Default today.
`defaultVisibleResources`	dict; optional	Uncontrolled initial resource visibility map. Default {} (all visible).
`displayTimezone`	string; optional	Timezone used to render events: an IANA name ("America/New_York"), or "default" / "locale" / "UTC". Render-only — events keep their own data timezone. Default "default".
`eventColor`	a value equal to: 'red', 'pink', 'purple', 'indigo', 'blue', 'teal', 'green', 'lime', 'amber', 'orange', 'grey'; optional	The default color palette used for all events. Overridden per resource (`eventColor`) and per event (`color`). Default "teal".
`eventCreation`	dict; optional	Configures event creation. `False` disables it; `True` enables it with defaults; an object sets the interaction and default duration (minutes). `eventCreation` is a boolean \	dict with keys: - interaction (a value equal to: 'click', 'double-click'; optional) - duration (number; optional)
`eventDialogTopOffset`	number; optional	On desktop, inset the event drawer this many px from the top — e.g. set it to your fixed app header's height so the drawer lines up with a sidebar instead of covering the header. Default 0.
`eventDialogVariant`	a value equal to: 'drawer', 'dialog'; default 'drawer'	How the event editor is presented. "drawer" (default) restyles the built-in dialog into a responsive drawer — right-anchored on desktop, an 80%-height bottom sheet on mobile (below `mobileBreakpoint`), with a scrollable body and pinned header/actions. "dialog" keeps the library's default floating, draggable dialog.
`events`	list of dicts; optional	The events to render. Each event is a dict with at least `id`, `title`, `start` and `end` (ISO strings). This is BOTH an input and an output: the calendar writes the full array back on every create / edit / move / resize / delete. `events` is a list of dicts with keys: - id (string \	number; required): Unique id (string or number). - title (string; required): Event title. - start (string; required): Start date-time, ISO string. "Z" suffix = UTC instant. - end (string; required): End date-time, ISO string. "Z" suffix = UTC instant. - description (string; optional): Optional longer description (shown in the event dialog). - timezone (string; optional): IANA timezone the wall-time start/end are interpreted in. - resource (string \	number; optional): Id of the resource this event belongs to. - rrule (string \	dict; optional): Recurrence rule — an RFC-5545 RRULE string ("FREQ=WEEKLY;INTERVAL=2;BYDAY=TH") or an object {freq, interval, byDay, byMonthDay, byMonth, count, until}. Recurrence is a Premium feature (use EventCalendarPremium). - exDates (list of strings; optional): Exception dates (ISO strings) excluded from the recurrence. - allDay (boolean; optional): Whether the event spans the whole day. - readOnly (boolean; optional): Whether the event cannot be edited / dragged / resized. - color (a value equal to: 'red', 'pink', 'purple', 'indigo', 'blue', 'teal', 'green', 'lime', 'amber', 'orange', 'grey'; optional): Event color (overrides resource + component color). - draggable (boolean; optional): Per-event drag override. - resizable (boolean \	a value equal to: 'start', 'end'; optional): Per-event resize override (bool or which edge). - className (string; optional): Custom CSS class for the event element. - extractedFromId (string \	number; optional): Id of the event this one was split from.
`height`	number \	string; default 600	Height of the wrapping container (the calendar fills it). Default 600.
`lastAction`	dict; optional	Convenience OUTPUT describing the most recent change to `events`: {type: "create"\	"update"\	"delete"\	"move"\	"resize"\	"change", event: the affected event (or None), event_timestamp}. `lastAction` is a dict with keys: - type (string; optional) - event (dict; optional) - event_timestamp (number; optional)
`localeText`	dict; optional	Override UI label strings (a partial map of translation keys).
`mobileBreakpoint`	number; default 768	Width (px) below which the UI switches to its mobile layout. Default 768.
`preferences`	dict; optional	Controlled user preferences. Also an OUTPUT. {ampm, weekStartsOn (0=Sun..6=Sat), showWeekends, showWeekNumber, isSidePanelOpen, showEmptyDaysInAgenda}. `preferences` is a dict with keys: - ampm (boolean; optional) - weekStartsOn (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional) - showWeekends (boolean; optional) - showWeekNumber (boolean; optional) - isSidePanelOpen (boolean; optional) - showEmptyDaysInAgenda (boolean; optional)
`preferencesMenuConfig`	dict; optional	Which items appear in the preferences menu, or `False` to hide the menu. `preferencesMenuConfig` is a a value equal to: false \	dict with keys: - toggleWeekendVisibility (boolean; optional) - toggleWeekNumberVisibility (boolean; optional) - toggleAmpm (boolean; optional) - toggleEmptyDaysInAgenda (boolean; optional) - toggleWeekStartsOn (boolean; optional)
`readOnly`	boolean; optional	Global read-only mode (disables create / drag / resize / dialog).
`resources`	list of dicts; optional	Resources events can be assigned to (supports nested `children`).
`responsiveSidePanel`	boolean; default True	When True (default), the side panel starts open on wide screens and collapsed below `mobileBreakpoint` on first render — unless you pin `isSidePanelOpen` via `preferences` / `defaultPreferences`.
`scrollToCurrentTime`	boolean; default False	In the day / week views, scroll the time grid on first render (and on view change) so the current-time indicator is centered in view. Pairs with `showCurrentTimeIndicator`. Default False.
`shouldEventRequireResource`	boolean; optional	Require every event to be assigned to a resource. Default False.
`showCurrentTimeIndicator`	boolean; optional	Show the current-time indicator line in time views. Default True.
`sx`	dict; optional	MUI `sx` styling object applied to the calendar (object form only).
`view`	a value equal to: 'day', 'week', 'month', 'agenda'; optional	Controlled active view. Also an OUTPUT (updated on view change).
`views`	list of a value equal to: 'day', 'week', 'month', 'agenda's; optional	Which views are offered. Default ["day","week","month","agenda"].
`visibleDate`	string; optional	Controlled visible date (ISO string). Drives which date range is shown. Also an OUTPUT — written back (ISO string) when the user navigates.
`visibleResources`	dict; optional	Controlled resource visibility map {resourceId: bool}. Also an OUTPUT.

Source: /responsive

Note for AI agents: This is the static, prerendered view of an interactive Dash application served because we detected a non-JS user agent. Full prose docs:

/responsive/llms.txt — LLM-friendly documentation
/sitemap.xml
/robots.txt