# Playground

> Drive the major Event Calendar props live with Dash Mantine Components inputs.

---

.. llms_copy::Playground

.. toc::

### Try the props live

Every control below is a plain **Dash Mantine Components** input wired to an
`EventCalendar` prop with a normal Dash callback — change one and the calendar
updates instantly. It doubles as a demonstration of how `dash-mui-scheduler`
**pairs with DMC**: the calendar follows the Mantine color scheme (toggle dark
mode in the header), and DMC `Select` / `Switch` / `SegmentedControl` inputs map
cleanly onto the scheduler's props.

.. exec::docs.playground.playground
    :code: false

.. admonition::How it is wired
    :color: blue

    Each input drives a prop through a callback — e.g. a `dmc.SegmentedControl`
    sets `view`, a `dmc.Select` sets `eventColor` / `displayTimezone`, and the
    six preference `dmc.Switch`es are collected into the `preferences` dict.
    `view` is two-way bound, so clicking the calendar's own view buttons keeps
    the control in sync. The `lastAction` output feeds the readout under the
    calendar.

### Source


```python
# File: docs/playground/playground.py

import datetime

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

# A live playground: every Dash Mantine Components input below is wired to a
# major EventCalendar prop, so you can see exactly how each one behaves. This is
# also a demonstration of how dash-mui-scheduler pairs with DMC — the calendar
# follows the Mantine color scheme, and DMC inputs drive its props.

# Anchor events to *today* (with UTC "Z" instants) so the Display controls have
# something to act on:
#   - the current-time line is visible (we are looking at this week),
#   - `displayTimezone` shifts the rendered times (Z instants are re-projected),
#   - and with NO per-event `color`, `eventColor` recolours every event live
#     (a per-event color would otherwise override the component default).
_TODAY = datetime.date.today()


def _ev(eid, title, day_offset, hour, minute, dur_min):
    start = datetime.datetime.combine(
        _TODAY + datetime.timedelta(days=day_offset), datetime.time(hour, minute)
    )
    end = start + datetime.timedelta(minutes=dur_min)
    fmt = "%Y-%m-%dT%H:%M:%SZ"  # trailing Z = UTC instant
    return {"id": eid, "title": title, "start": start.strftime(fmt), "end": end.strftime(fmt)}


EVENTS = [
    _ev("1", "Standup", 0, 13, 0, 30),
    _ev("2", "Design review", 0, 15, 30, 60),
    _ev("3", "Workshop", 1, 14, 0, 90),
    _ev("4", "1:1", 2, 16, 0, 30),
    _ev("5", "Retro", -1, 17, 0, 60),
]

COLORS = ["red", "pink", "purple", "indigo", "blue", "teal", "green", "lime", "amber", "orange", "grey"]
WEEKDAYS = [
    {"label": "Sunday", "value": "0"}, {"label": "Monday", "value": "1"}, {"label": "Tuesday", "value": "2"},
    {"label": "Wednesday", "value": "3"}, {"label": "Thursday", "value": "4"}, {"label": "Friday", "value": "5"},
    {"label": "Saturday", "value": "6"},
]
TIMEZONES = ["default", "UTC", "America/New_York", "Europe/Paris", "Asia/Tokyo"]


def _labeled(label, control):
    return dmc.Stack([dmc.Text(label, size="sm", fw=600), control], gap=4)


_controls = dmc.SimpleGrid(
    cols={"base": 1, "md": 2},
    spacing="lg",
    children=[
        dmc.Fieldset(
            legend="View & creation",
            children=dmc.Stack([
                _labeled("View", dmc.SegmentedControl(id="pg-view", value="week", fullWidth=True, data=[
                    {"label": "Day", "value": "day"}, {"label": "Week", "value": "week"},
                    {"label": "Month", "value": "month"}, {"label": "Agenda", "value": "agenda"}])),
                _labeled("Event editor", dmc.SegmentedControl(id="pg-dialog", value="drawer", data=[
                    {"label": "Drawer", "value": "drawer"}, {"label": "Dialog", "value": "dialog"}])),
                dmc.Switch(id="pg-creation", label="Allow event creation", checked=True),
            ], gap="sm"),
        ),
        dmc.Fieldset(
            legend="Interaction",
            children=dmc.Stack([
                dmc.Switch(id="pg-drag", label="Events draggable", checked=True),
                _labeled("Resizable", dmc.SegmentedControl(id="pg-resize", value="true", data=[
                    {"label": "Both", "value": "true"}, {"label": "Start", "value": "start"},
                    {"label": "End", "value": "end"}, {"label": "Off", "value": "false"}])),
                dmc.Switch(id="pg-readonly", label="Read-only", checked=False),
            ], gap="sm"),
        ),
        dmc.Fieldset(
            legend="Display",
            children=dmc.Stack([
                dmc.Select(id="pg-color", label="Default event color", value="teal", data=COLORS, allowDeselect=False),
                dmc.Select(id="pg-tz", label="Display timezone", value="default", data=TIMEZONES, allowDeselect=False),
                dmc.Switch(id="pg-nowline", label="Current-time line", checked=True),
                dmc.Switch(id="pg-scrollnow", label="Scroll to current time on load", checked=False),
            ], gap="sm"),
        ),
        dmc.Fieldset(
            legend="Preferences",
            children=dmc.Stack([
                dmc.Group([
                    dmc.Switch(id="pg-ampm", label="12-hour clock", checked=True),
                    dmc.Switch(id="pg-weekends", label="Weekends", checked=True),
                ], gap="lg"),
                dmc.Group([
                    dmc.Switch(id="pg-weeknum", label="Week numbers", checked=False),
                    dmc.Switch(id="pg-sidepanel", label="Side panel", checked=True),
                ], gap="lg"),
                dmc.Switch(id="pg-emptyagenda", label="Empty days in agenda", checked=True),
                dmc.Select(id="pg-weekstart", label="Week starts on", value="0", data=WEEKDAYS, allowDeselect=False),
            ], gap="sm"),
        ),
    ],
)

component = dmc.Stack(
    [
        dmc.Paper(_controls, withBorder=True, p="md", radius="md"),
        dms.EventCalendar(
            id="playground-cal",
            events=EVENTS,
            defaultVisibleDate=_TODAY.isoformat(),
            height=620,
            view="week",
            eventColor="teal",
            displayTimezone="default",
            areEventsDraggable=True,
            areEventsResizable=True,
            readOnly=False,
            eventCreation=True,
            showCurrentTimeIndicator=True,
            scrollToCurrentTime=False,
            eventDialogVariant="drawer",
            preferences={"ampm": True, "weekStartsOn": 0, "showWeekends": True,
                         "showWeekNumber": False, "isSidePanelOpen": True, "showEmptyDaysInAgenda": True},
        ),
        dmc.Code(id="pg-readout", block=True),
    ],
    gap="md",
)


# --- View (two-way: control <-> the calendar's own view buttons) ------------
@callback(Output("playground-cal", "view"), Input("pg-view", "value"), prevent_initial_call=True)
def set_view(value):
    return value


@callback(Output("pg-view", "value"), Input("playground-cal", "view"), prevent_initial_call=True)
def read_view(value):
    return value


# --- Display / interaction / editor settings --------------------------------
@callback(
    Output("playground-cal", "eventColor"),
    Output("playground-cal", "displayTimezone"),
    Output("playground-cal", "showCurrentTimeIndicator"),
    Output("playground-cal", "scrollToCurrentTime"),
    Output("playground-cal", "areEventsDraggable"),
    Output("playground-cal", "areEventsResizable"),
    Output("playground-cal", "readOnly"),
    Output("playground-cal", "eventCreation"),
    Output("playground-cal", "eventDialogVariant"),
    Input("pg-color", "value"),
    Input("pg-tz", "value"),
    Input("pg-nowline", "checked"),
    Input("pg-scrollnow", "checked"),
    Input("pg-drag", "checked"),
    Input("pg-resize", "value"),
    Input("pg-readonly", "checked"),
    Input("pg-creation", "checked"),
    Input("pg-dialog", "value"),
)
def settings(color, tz, nowline, scroll_now, drag, resize, read_only, creation, dialog):
    resize_val = {"true": True, "false": False, "start": "start", "end": "end"}[resize]
    return color, tz, nowline, scroll_now, drag, resize_val, read_only, creation, dialog


# --- Preferences ------------------------------------------------------------
@callback(
    Output("playground-cal", "preferences"),
    Input("pg-ampm", "checked"),
    Input("pg-weekstart", "value"),
    Input("pg-weekends", "checked"),
    Input("pg-weeknum", "checked"),
    Input("pg-sidepanel", "checked"),
    Input("pg-emptyagenda", "checked"),
)
def preferences(ampm, week_start, weekends, week_number, side_panel, empty_agenda):
    return {
        "ampm": ampm,
        "weekStartsOn": int(week_start),
        "showWeekends": weekends,
        "showWeekNumber": week_number,
        "isSidePanelOpen": side_panel,
        "showEmptyDaysInAgenda": empty_agenda,
    }


# --- Live readout -----------------------------------------------------------
@callback(
    Output("pg-readout", "children"),
    Input("playground-cal", "events"),
    Input("playground-cal", "lastAction"),
)
def readout(events, last_action):
    count = len(events or [])
    if not last_action:
        return f"{count} events · interact with the calendar to see the last action"
    title = (last_action.get("event") or {}).get("title")
    suffix = f" — {title}" if title else ""
    return f"{count} events · last action: {last_action.get('type')}{suffix}"
```

    :defaultExpanded: false
    :withExpandedButton: true

### All Event Calendar props

.. kwargs::dash_mui_scheduler.EventCalendar


---

*Source: /playground*