Availability grid
A week by time-slot grid where you drag or use the keyboard to paint your availability over a heat layer of others', with the best slots starred and a timezone label.
Preview
Design review: when are you free?
12 slots · drag to paint · times in CET
Best times
Mon 16Tue 17Wed 18Thu 19Fri 20
09:00
09:30
10:00
10:30
11:00
11:30
12:00
12:30
13:00
13:30
14:00
14:30
15:00
15:30
16:00
16:30
Tue 17 11:00–11:306 of 6 freeYouAnToWeInMa
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| days | string[] | — | Column labels, one per day. |
| startHour / endHour | number | 9 / 17 | Time range of the grid. |
| slotMinutes | number | 30 | Slot length in minutes. |
| value | string[] | — | Controlled slot keys "day-slot" (e.g. "1-4"). |
| defaultValue | string[] | [] | Uncontrolled starting slots. |
| onValueChange | (slots: string[]) => void | — | Called while painting and toggling. |
| others | { name: string; slots: string[] }[] | [] | Everyone else's availability, drawn as heat. |
| best | number | 3 | How many best slots to star. |
| timeZoneLabel | string | — | Label for the times, e.g. "CET". |
| label | string | "Your availability" | Heading; also names the grid. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.