# Resources

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

---

.. llms_copy::Resources

.. toc::

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

| key | type | meaning |
| --- | --- | --- |
| `id` | str | unique resource id, referenced by `event["resource"]` (required) |
| `title` | str | label shown in the UI (required) |
| `eventColor` | palette name | color for this resource's events (default `teal`) |
| `children` | list | nested child resources |
| `areEventsDraggable` | bool | override drag for this resource's events |
| `areEventsResizable` | bool | override resize for this resource's events |
| `areEventsReadOnly` | bool | make this resource's events read-only |

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

.. admonition::The data boundary
    :color: blue

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

.. exec::docs.resources.resources_basic


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

.. exec::docs.resources.resource_visibility


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


.. admonition::Controlled means in *and* out
    :color: green

    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

.. kwargs::dash_mui_scheduler.EventCalendar


---

*Source: /resources*