Calendar Page
A contained calendar app with a compact mini month and calendars list on the left and our week/month event calendar on the right, with new-event and visibility toggles.
Preview
November 2026
Nov 2 – 4, 2026
Mon2
Tue3
Wed4
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 |
|---|---|---|---|
| calendars | { id, label, tone, visible? }[] | — | Calendars in the left rail with a colour dot and a visibility checkbox. |
| defaultEvents | (CalendarEvent & { calendarId })[] | — | Events for our EventCalendar; tone comes from the calendar. |
| now | Date | — | Today in the mini month and the now line in the week. |
| title | ReactNode | "Calendar" | Top bar heading. |
| defaultView | "week" | "month" | "week" | View shown first. |
| visibleDays | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 5 | Days in the week view from Monday; 5 is a work week, 3 fits narrow frames. |
| defaultCalendarsOpen | boolean | false | Open the My calendars list under the mini month at first. |
| onEventsChange | (events) => void | — | Called after creating, moving or resizing events. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.