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.

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.

---

.. llms_copy::Responsive

.. toc::

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:

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:

.. exec::docs.responsive.now_indicator :code: false

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.

.. admonition::How this works :color: blue

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.

``python 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):

```python

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, ) ) ```

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

.. kwargs::dash_mui_scheduler.EventCalendar

---

*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: