Scheduler
Month-view scheduling component: renders event chips (title + color bar) inside day cells; events read/write channel plus addEvent / updateEvent / removeEvent CRUD methods; clicking a chip dispatches oas-event-click, clicking a day dispatches oas-day-click (host attaches an editor), and data changes made through the CRUD methods dispatch oas-events-change (writing via setAttribute('events', …) does not).
Basic Usage
Week start & locale (first-day-of-week + locale)
Month view + event chips (title / color bar / +N collapse)
Week / Day Views
Week view (time axis + timed event blocks; all-day row on top)
Day view (single-column time axis) + oas-view-change
Week/day views show a time axis (start-hour / end-hour, default 8–20): events with start/end are positioned as blocks by time; untimed events go to the all-day row on top; switching views via the header buttons dispatches oas-view-change. Event blocks support drag-to-move (drop on a target column/time to change date + start, keeping duration) and bottom-edge drag-resize (change end in 15-minute steps), written back with oas-events-change on settle.
Recurrence & Reminders
Recurrence rules (RRULE subset: daily/weekly/monthly + interval + until)
repeat expands occurrences from date by freq × interval (daily by day interval, weekly by week, monthly by same day-of-month), with until as the inclusive end; el.events still reads the raw entries (expansion happens only at render time).
Reminders (remind minutes; oas-remind when due)
For events with remind (minutes), the component dispatches oas-remind (detail: { id, event }) at start − remind minutes (untimed events count as 00:00). Past/removed/disconnected events never fire.
Timezone & Agenda View
Agenda view (28-day chronological list from anchor)
view="agenda" lists events grouped by day for 28 days from the anchor (recurring events expanded): timed events show start–end, untimed events are labeled all-day; clicking a row dispatches oas-event-click, clicking a day header dispatches oas-day-click.
Timezone (affects title/column headers and the today marker)
timezone accepts an IANA name (e.g. Asia/Shanghai / America/New_York / UTC) and affects date formatting in the title/column headers and the today marker (via Intl timeZone); invalid values fall back to local.
CRUD (method channel)
addEvent / updateEvent / removeEvent + oas-events-change feedback
Click Feedback (host integration)
oas-event-click / oas-day-click host integration
Clicking an event chip dispatches oas-event-click (detail: { id, event }, without triggering the day click); clicking an empty day cell dispatches oas-day-click (detail: { date }) — the host opens an editor/form there; the component ships no built-in edit form.
API
oas-scheduler
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
end-hour | Time axis end hour (> start-hour and <= 24, default 20) | string | 20 |
events | Schedule events (JSON): [{ id?, date: YYYY-MM-DD, title, color?, start?, end? }] — chips rendered in day cells (title + color bar), collapsed to +N beyond 2 | SchedulerEvent[] | [] |
first-day-of-week | First day of week (0-6); defaults to locale-derived | string | — |
locale | Localization (overrides config-provider injection and global locale) | string | — |
page-show-date | Panel month anchor (controlled): yyyy-MM-dd; re-anchors the shown month on change | string | — |
start-hour | Time axis start hour (0-23, default 8) | string | 8 |
timezone | Timezone (IANA, e.g. Asia/Shanghai; empty = local): affects title/column date formatting and the today marker (via Intl timeZone); invalid values fall back to local | string | — |
view | View: month (default) / week / day / agenda; week/day views show a time axis with positioned event blocks (untimed events go to the all-day row); agenda shows a 28-day chronological list | SchedulerView | month |
Property (JS property; see each row for attribute reflection)
| Property | Description | Type | Default |
|---|---|---|---|
events | Schedule events (SchedulerEvent[]): el.events reads (copy incl. auto ids); el.events = [...] writes (syncs the events attribute + re-renders + dispatches oas-events-change) | SchedulerEvent[] | [] |
Events
| Event | Description |
|---|---|
oas-day-click | Dispatched when an empty day cell is clicked, detail: { date } — host attaches an add form |
oas-event-click | Dispatched when an event chip is clicked, detail: { id, event } (does not trigger the day click) |
oas-events-change | Dispatched on any events change (set/addEvent/updateEvent/removeEvent), detail: |
oas-remind | Dispatched when an event reminder is due, detail: { id, event } (fires at start - remind minutes via built-in timers) |
oas-view-change | Dispatched on view switch (month/week/day/agenda), detail: { view }; not dispatched on initial attribute absorption |