20% offProwith

Buy now
Detent

App screenPro

Calendar

shadcn add @detent-pro/calendar
Detent Calendar

Wire it up

All optional. With none, it plays exactly as it does here and hands over to whoever touches it.

Usage
<Calendar
  events={events}
  people={people}
  busy={busy}
  onBook={(event) => {}}
  onEventChange={(event) => {}}
  onAsk={(text) => {}}
/>

Your data

events

This week’s events: title, day from Monday, start and end in minutes, calendar, and who’s invited. Standups repeat every week.

CalEvent[]
Default—
people

Who you can ask for time with. Their names are what the assistant listens for.

{ name, hue }[]
Default—
busy

When those people are busy. The assistant schedules around it.

{ who, day, start, end }[]
Default—
assistant

What the AI is called, everywhere the screen names it.

string
Default'Detent'
product

The product’s name beside its mark.

string
Default'Detent'

What it tells you

onBook

Called with the event a person books from a suggestion.

(event: CalEvent) => void
Default—
onEventChange

Called with an event a person adds, renames or moves. The script doesn’t call it.

(event: CalEvent) => void
Default—
onAsk

Called with what a person asks the assistant.

(text: string) => void
Default—

Every block also takes accent, the one colour everything in it derives from; autoplay, which plays the demo until someone touches it; and className.

More in App screens

All blocks