Event calendar
A week scheduler with an hour grid, side-by-side overlapping events, an all-day row, a now-line from a fixed now, drag-to-create, keyboard movement between events and a month view with dots.
Preview
Nov 2 – 8, 2026
Mon2
Tue3
Wed4
Thu5
Fri6
Sat7
Sun8
all-day
Arrow keys move between events. Drag on an empty slot to create an event.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| events / defaultEvents | CalendarEvent[] | [] | { id, title, start, end, allDay?, tone?, location? }. Tones: neutral, accent, success, warning, danger, info. |
| onEventsChange | (events) => void | — | Called after an event is created by dragging. |
| now | Date | — | Fixed reference for today and the now-line (keeps SSR stable). |
| defaultDate | Date | now | Any day in the week to open on. |
| view / defaultView | "week" | "month" | "week" | Week time grid or month dots. |
| onViewChange | (view) => void | — | Called when the view switch changes. |
| dayStartHour / dayEndHour | number | 8 / 19 | First and last hour of the time grid. |
| weekStartsOn | 0–6 | 1 | First weekday column (Monday). |
| hourHeight | number | 44 | Pixels per hour row. |
| onCreate | ({ start, end }) => CalendarEvent | null | — | Enables drag-to-create; return the event to add. |
| onEventSelect | (event) => void | — | Click, Enter or Space on an event. |
| locale | string | "en-US" | Intl locale for dates and times. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.