Resources

Organize EventCalendar events by resource — define resources with colors, assign events, control which resources are visible, and require a resource on creation.

Resources

A resource is a thing you schedule against — a person, a room, a machine, a team. In dms.EventCalendar you declare resources once, then tag each event with a resource id. The calendar colors events by their resource and lets you show or hide a subset of resources without touching the underlying events array.

Resources are passed as a list of dicts through the resources prop. A resource dict accepts:

The 11 palette names for eventColor are: red, pink, purple, indigo, blue, teal, green, lime, amber, orange, grey.

events is both an input and an output. Dates are ISO strings (e.g. "2024-01-15T10:00:00"). Each event links to a resource through its resource key, which must match a resource id. When a user creates, moves, resizes, or deletes an event, the component writes the whole new array back to events — no callback required for that round-trip.

Defining resources and assigning events

Give each resource an id, a title, and an eventColor. Then set event["resource"] to the resource's id. The calendar paints each event with its resource color automatically — you do not need to set a per-event color.

# File: docs/resources/resources_basic.py

from dash import html
import dash_mui_scheduler as dms

# Resources are the categories you schedule against. Each one carries its own
# eventColor; events inherit that color by pointing `resource` at the id.
resources = [
    {"id": "design", "title": "Design", "eventColor": "purple"},
    {"id": "engineering", "title": "Engineering", "eventColor": "blue"},
    {"id": "marketing", "title": "Marketing", "eventColor": "amber"},
]

# Dates are ISO strings. Each event names its resource via the `resource` key,
# which must match one of the resource ids above.
events = [
    {
        "id": "1",
        "title": "Wireframe review",
        "start": "2024-01-15T09:00:00",
        "end": "2024-01-15T10:30:00",
        "resource": "design",
    },
    {
        "id": "2",
        "title": "API sprint planning",
        "start": "2024-01-15T11:00:00",
        "end": "2024-01-15T12:00:00",
        "resource": "engineering",
    },
    {
        "id": "3",
        "title": "Launch campaign sync",
        "start": "2024-01-16T14:00:00",
        "end": "2024-01-16T15:00:00",
        "resource": "marketing",
    },
    {
        "id": "4",
        "title": "Component build",
        "start": "2024-01-17T10:00:00",
        "end": "2024-01-17T13:00:00",
        "resource": "engineering",
    },
]

component = html.Div(
    dms.EventCalendar(
        id="resources-basic-cal",
        events=events,
        resources=resources,
        defaultView="week",
        defaultVisibleDate="2024-01-15",
        height=600,
    )
)

Resource colors

Color comes from the resource's eventColor. Any event whose resource points at that resource inherits the color, which keeps a whole category visually consistent. An individual event can still override with its own color key, but leaving it off lets the resource drive the palette — change the resource color in one place and every matching event follows.

Showing and hiding resources

visibleResources is a mapping of resource id to a boolean. A resource is shown unless it is explicitly set to False, so you only list the ones you want to hide (or list all of them and flip values). It comes in two forms:

• defaultVisibleResources — uncontrolled: an initial value the component then

manages on its own.

• visibleResources — controlled in and out: drive it from a callback and read

user changes back.

The example below wires a dmc.ChipGroup to visibleResources. Each chip toggles one resource on or off; the calendar updates immediately and the events for hidden resources disappear without being removed from events.

# File: docs/resources/resource_visibility.py

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

resources = [
    {"id": "room-a", "title": "Room A", "eventColor": "teal"},
    {"id": "room-b", "title": "Room B", "eventColor": "orange"},
    {"id": "room-c", "title": "Room C", "eventColor": "indigo"},
]

events = [
    {
        "id": "1",
        "title": "Standup",
        "start": "2024-01-15T09:00:00",
        "end": "2024-01-15T09:30:00",
        "resource": "room-a",
    },
    {
        "id": "2",
        "title": "Design crit",
        "start": "2024-01-15T13:00:00",
        "end": "2024-01-15T14:00:00",
        "resource": "room-b",
    },
    {
        "id": "3",
        "title": "Client call",
        "start": "2024-01-16T11:00:00",
        "end": "2024-01-16T12:00:00",
        "resource": "room-c",
    },
    {
        "id": "4",
        "title": "Retro",
        "start": "2024-01-17T15:00:00",
        "end": "2024-01-17T16:00:00",
        "resource": "room-a",
    },
]

# Start with every room visible. `visibleResources` is a {resource_id: bool} map.
all_ids = [r["id"] for r in resources]

component = html.Div(
    dmc.Stack(
        [
            dmc.Text("Toggle rooms — hidden rooms keep their events in `events`."),
            dmc.ChipGroup(
                id="resources-visibility-chips",
                multiple=True,
                value=all_ids,
                children=dmc.Group(
                    [dmc.Chip(r["title"], value=r["id"]) for r in resources]
                ),
            ),
            dms.EventCalendar(
                id="resources-visibility-cal",
                events=events,
                resources=resources,
                defaultView="week",
                defaultVisibleDate="2024-01-15",
                # Controlled in + out: the callback drives which rooms show.
                visibleResources={rid: True for rid in all_ids},
                height=600,
            ),
        ],
        gap="sm",
    )
)


@callback(
    Output("resources-visibility-cal", "visibleResources"),
    Input("resources-visibility-chips", "value"),
)
def toggle_resources(checked):
    checked = checked or []
    # Explicitly mark each room True/False so unchecked rooms hide.
    return {rid: (rid in checked) for rid in all_ids}

Because visibleResources is controlled, a user toggling resources through the calendar's own side panel would also flow back into your callback's input. Keep a single source of truth (here, the ChipGroup value) so the two stay in sync.

Requiring a resource

Set shouldEventRequireResource=True to force every event to belong to a resource. With it on, the create flow will not let a user save an event without picking a resource — useful when "unassigned" is not a valid state (for example, a room-booking calendar where every booking needs a room).

Props reference

EventCalendar props

Source: /resources