# Resources > Organize EventCalendar events by resource — define resources with colors, assign events, control which resources are visible, and require a resource on creation. **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 --- ### 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`. `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`. ```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`. ```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} ``` 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 | 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: /resources*