Views

Switch, restrict, and control the day, week, month, and agenda views of the dash-mui-scheduler EventCalendar.

Calendar views

dms.EventCalendar ships four built-in views: day, week, month, and agenda. By default all four are available and the calendar opens on "week". A standalone calendar already lets the user switch views with its built-in view switcher — you only need a callback when you want to restrict, preset, or programmatically drive the view from elsewhere in your layout.

The two props that govern this are view (the currently active view) and views (the list of views the user is allowed to choose from).

view is a plain string — one of "day", "week", "month", "agenda". Keep defaultVisibleDate an ISO date string (here "2024-01-15") so the seeded events land on screen at load.

Available views

The four view names are fixed:

• "day" — a single day, hour by hour.
• "week" — seven day columns (the default).
• "month" — a month grid.
• "agenda" — a chronological list of upcoming events.

You set the starting view with defaultView (uncontrolled) or view (controlled). defaultView defaults to "week".

Restricting views

Pass views=[...] to limit which view buttons the calendar renders. Anything omitted from the list is hidden from the switcher. Combine it with defaultView to choose which of the allowed views shows first — just make sure defaultView is one of the values in views.

# File: docs/views/views_basic.py

from dash import html, Input, Output, State, 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
# `events` array back to Dash on every create / move / resize / delete.
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": "1:1", "start": "2024-01-17T11:00:00", "end": "2024-01-17T11:30:00", "color": "green"},
]

ALL_VIEWS = ["day", "week", "month", "agenda"]

# `views` controls which view buttons the calendar offers. The CheckboxGroup
# below drives it live — uncheck a view and its button disappears from the
# calendar's toolbar. `view` (controlled) is kept on a value that still exists.
component = html.Div(
    [
        dmc.CheckboxGroup(
            id="views-restrict-group",
            label="View buttons to offer",
            description="Toggle which views appear in the calendar's toolbar.",
            value=ALL_VIEWS,
            mb="md",
            children=dmc.Group(
                [dmc.Checkbox(label=v.capitalize(), value=v) for v in ALL_VIEWS],
                mt="xs",
            ),
        ),
        dms.EventCalendar(
            id="views-restrict-cal",
            events=events,
            views=ALL_VIEWS,
            view="week",
            defaultVisibleDate="2024-01-15",
            height=560,
        ),
    ]
)


@callback(
    Output("views-restrict-cal", "views"),
    Output("views-restrict-cal", "view"),
    Input("views-restrict-group", "value"),
    State("views-restrict-cal", "view"),
    prevent_initial_call=True,
)
def restrict_views(selected, current_view):
    # Keep the canonical order; always leave at least one view available.
    views = [v for v in ALL_VIEWS if v in selected] or ["week"]
    # If the active view was just removed, fall back to the first remaining one.
    view = current_view if current_view in views else views[0]
    return views, view

Controlling the active view

To drive the view from your own controls, treat view as a controlled prop: it is both an input and an output. The example below wires a dmc.SegmentedControl to the calendar's view prop. The first callback pushes the segmented control's value into the calendar; the second reads view back out — so when the user clicks the calendar's own view buttons, the segmented control follows along. Both callbacks use prevent_initial_call=True to avoid a fight on load.

# File: docs/views/controlled_view.py

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

events = [
    {
        "id": "1",
        "title": "Standup",
        "start": "2024-01-15T09:00:00",
        "end": "2024-01-15T09:15:00",
        "color": "teal",
    },
    {
        "id": "2",
        "title": "Workshop",
        "start": "2024-01-16T14:00:00",
        "end": "2024-01-16T16:00:00",
        "color": "orange",
    },
    {
        "id": "3",
        "title": "Retro",
        "start": "2024-01-18T15:00:00",
        "end": "2024-01-18T16:00:00",
        "color": "pink",
    },
]

# `view` is controlled IN + OUT. The SegmentedControl writes it, and the
# calendar writes it back when the user clicks a built-in view button —
# the second callback keeps the SegmentedControl in sync.
component = dmc.Stack(
    [
        dmc.SegmentedControl(
            id="views-controlled-segmented",
            value="week",
            data=[
                {"label": "Day", "value": "day"},
                {"label": "Week", "value": "week"},
                {"label": "Month", "value": "month"},
                {"label": "Agenda", "value": "agenda"},
            ],
        ),
        dms.EventCalendar(
            id="views-controlled-cal",
            events=events,
            view="week",
            defaultVisibleDate="2024-01-15",
            height=600,
        ),
    ],
    gap="sm",
)


@callback(
    Output("views-controlled-cal", "view"),
    Input("views-controlled-segmented", "value"),
    prevent_initial_call=True,
)
def set_view(value):
    return value


@callback(
    Output("views-controlled-segmented", "value"),
    Input("views-controlled-cal", "view"),
    prevent_initial_call=True,
)
def read_view(view):
    return view

view has an uncontrolled twin, defaultView. Use defaultView for a fixed starting view you never read back, and view when you need two-way binding like the example above. Don't set both.

EventCalendar props

EventCalendar props

Source: /views