# Navigation > Navigate the dash-mui-scheduler EventCalendar through time by setting visibleDate, with Prev / Today / Next buttons computed in Python. **Site index:** [https://muischeduler.2plot.dev/llms.txt](https://muischeduler.2plot.dev/llms.txt) — every page on this site, as Markdown. **Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites. **Sibling sites:** 13 more in The 2plot network — listed in the site index above. **Sitemap:** https://muischeduler.2plot.dev/sitemap.xml --- ### Navigation Every scheduler component shows a single window of time — a day, a week, a month. Which window is on screen is governed by one prop: **`visibleDate`**, an ISO date **string** such as `"2024-01-15"`. To move forwards or backwards in time you simply hand the component a *new* `visibleDate`. In the React MUI X Scheduler you would call methods on an `apiRef` to jump around. Dash has no imperative ref — you navigate **declaratively** by setting `visibleDate`. Compute the next date in Python (with `datetime` / `timedelta`), return it as an ISO string, and the calendar re-renders on that window. Dates crossing the boundary are always plain strings, never Python `datetime` objects. ### Default visible date — `defaultVisibleDate` `defaultVisibleDate` is the **uncontrolled** way to pick the opening window. Set it once and the component manages the visible date from then on — the built-in navigation arrows move it and Dash never hears about the changes. Use this when you only need to land the user on the right week at load time: ```python dms.EventCalendar( id="my-cal", events=events, defaultVisibleDate="2024-01-15", defaultView="week", ) ``` Because the events in these docs cluster around the week of **15 Jan 2024**, seeding the visible date there means they are on screen the moment the page loads. ### Controlling the visible date — `visibleDate` `visibleDate` is the **controlled** counterpart and it is wired **IN and OUT**: - **IN** — whatever ISO string you pass becomes the window the component shows. - **OUT** — when the user clicks the component's own ‹ › arrows (or the Today button in its toolbar), the component writes the new ISO date *back* to Dash. Pick `visibleDate` (not `defaultVisibleDate`) whenever Python needs to drive or observe the date — for example to build your own navigation chrome, sync two calendars, or display the current window elsewhere on the page. Don't mix the two on the same component: a controlled `visibleDate` wins. ### Prev / Today / Next in Python The example below replaces the toolbar arrows with three `dmc.Button`s. Each click reads the current `visibleDate`, computes a new one with Python's `datetime` module, and returns it: - **Prev** / **Next** parse the current ISO string with `date.fromisoformat`, shift it by `timedelta(weeks=1)`, and re-serialise with `.isoformat()`. - **Today** returns `date.today().isoformat()`. A `dmc.Text` below the buttons reads `visibleDate` back out, so you can watch the value change whether you click your own buttons *or* the calendar's built-in arrows — both feed the same controlled prop. The navigate callback takes `visibleDate` as an `Input` as well as an `Output`. That lets the *same* prop carry the calendar's built-in arrow presses through to Python: when the trigger is the calendar itself we just echo the value back, otherwise we compute the shifted date. The callback is `prevent_initial_call=True` so the seeded `"2024-01-15"` is left untouched on load. ```python # File: docs/navigation/navigation_buttons.py from datetime import date, timedelta from dash import Input, Output, callback import dash_mantine_components as dmc import dash_mui_scheduler as dms # `visibleDate` is an ISO date STRING (e.g. "2024-01-15"). It is controlled # IN *and* OUT: we hand the calendar a value, and the calendar also writes the # date back when the user navigates with the built-in arrows. Because there is # no apiRef in Dash, you move through time purely by *setting* visibleDate. events = [ { "id": "1", "title": "Sprint planning", "start": "2024-01-15T09:00:00", "end": "2024-01-15T10:30:00", "color": "blue", }, { "id": "2", "title": "Design review", "start": "2024-01-16T13:00:00", "end": "2024-01-16T14:00:00", "color": "purple", }, { "id": "3", "title": "Retro", "start": "2024-01-18T15:00:00", "end": "2024-01-18T16:00:00", "color": "green", }, ] # Seed the controlled value so the calendar opens on the week of the events. INITIAL_DATE = "2024-01-15" component = dmc.Stack( [ dmc.Group( [ dmc.Button("‹ Prev", id="navigation-prev", variant="default"), dmc.Button("Today", id="navigation-today", variant="light"), dmc.Button("Next ›", id="navigation-next", variant="default"), ], gap="xs", ), dmc.Text(id="navigation-readout", size="sm", c="dimmed"), dms.EventCalendar( id="navigation-cal", events=events, visibleDate=INITIAL_DATE, defaultView="week", height=600, ), ], gap="sm", ) @callback( Output("navigation-cal", "visibleDate"), Input("navigation-prev", "n_clicks"), Input("navigation-next", "n_clicks"), Input("navigation-today", "n_clicks"), Input("navigation-cal", "visibleDate"), prevent_initial_call=True, ) def navigate(prev_clicks, next_clicks, today_clicks, visible_date): from dash import ctx trigger = ctx.triggered_id # The calendar's own arrows already updated visibleDate -> nothing to do. if trigger == "navigation-cal": return visible_date if trigger == "navigation-today": return date.today().isoformat() # Parse the current ISO date string, shift by one week, re-serialize. current = date.fromisoformat((visible_date or INITIAL_DATE)[:10]) if trigger == "navigation-prev": return (current - timedelta(weeks=1)).isoformat() if trigger == "navigation-next": return (current + timedelta(weeks=1)).isoformat() return visible_date @callback( Output("navigation-readout", "children"), Input("navigation-cal", "visibleDate"), ) def show_visible_date(visible_date): return f"Current visibleDate: {visible_date or INITIAL_DATE}" ``` ### EventCalendar props `visibleDate`, `defaultVisibleDate`, `view`, and `defaultView` follow the same controlled / uncontrolled pattern. The full prop reference: #### `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: /navigation*