# Views

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

---

.. llms_copy::Views

.. toc::

### 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).

.. admonition::ISO strings, not datetimes
    :color: blue

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

.. exec::docs.views.views_basic


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

.. exec::docs.views.controlled_view


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


.. admonition::Controlled in + out
    :color: green

    `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

.. kwargs::dash_mui_scheduler.EventCalendar


---

*Source: /views*