Availability picker
ProFind a meeting time across people and see the choice come together.
Live block · sample data
- Picking a meeting time that works for several attendees.
- Booking flows that show a few days and open slots with a confirmation step.
- Use calendar or date-picker to pick a single date.
- Use time-picker for a free time input.
- Use event-invite to show and respond to an invite.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this to let people choose a time that fits a group. Connect confirmation to your scheduling service.
example.tsx
import { AvailabilityPicker } from "@/components/arc/blocks/availability-picker/availability-picker"; export function Schedule() { return ( <AvailabilityPicker onConfirm={({ date, time }) => bookMeeting({ date, time })} /> );}AvailabilityPicker
A day strip and time slot list for a group meeting, with attendee avatars and a confirmation step. Days, slots, and attendees are sample data.
PropTypeDefaultDescription
onConfirm(selection: { date: string; time: string }) => void–Called with the chosen day label and time when confirmed.- Days and times are labeled groups of buttons with aria-pressed.
- The selected day and the final selection are aria-live regions.
- Time slots slide in from the direction of the day change.
- The selected slot highlight moves with a shared layoutId on a responsive spring.
- Reduced motion removes the horizontal offset and uses zero durations.
- The five days sit in a fixed five-column grid and time slots in two columns at every width.
- Below 700px attendee names hide; below 490px day cards shrink and the heading icon and date header hide.
- Slot lists swap with AnimatePresence on day change; there are no timers or observers.
- Load availability before render, since the block does no fetching.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for picking a meeting time across several people.
- Replace the days, slots, and attendees with availability from your calendar service; times are labeled Zürich time.
- onConfirm receives display strings, so map them back to real timestamps.
The full library index for assistants is at /llms.txt.
