For the complete documentation index, see llms.txt.

Availability Picker

There is no single VennAvailabilityPicker export. Instead, @vennio/react gives you two composable primitives:

• TimeSlotPicker — a presentational component that renders slots. Does not fetch any data.
• useSlots — a hook that fetches available slots for a Venn Link.

Combine them to build a fully custom availability picker.

TimeSlotPicker

Renders available time slots grouped by date as a grid. Slot data must be supplied via props — the component does not fetch anything itself.

Props

Prop	Type	Description
slots	Slot[]	Array of slot objects to display
selectedSlot	Slot | null	Currently selected slot
onSelect	(slot: Slot) => void	Called when a slot is clicked
primaryColor	string	Accent colour for the selected state
className	string	Additional CSS class names
loading	boolean	Shows a loading skeleton when true
emptyMessage	string	Message shown when slots is empty

useSlots hook

Fetches available slots for a Venn Link by calling GET /v1/venn-links/:shortCode/availability.

Options

Option	Type	Default	Description
shortCode	string	—	Required. The Venn Link shortcode
baseUrl	string	From provider	Override the API base URL
apiKey	string	From provider	Override the API key
autoFetch	boolean	true	Fetch on mount automatically

Return value

Key	Type	Description
slots	Slot[]	Available slots
loading	boolean	True while fetching
error	string | null	Error message if fetch failed
refetch	() => void	Manually trigger a new fetch

Composition example

import { TimeSlotPicker, useSlots } from '@vennio/react'
import { useState } from 'react'

export function AvailabilityPicker({ shortCode }) {
  const { slots, loading, error } = useSlots({ shortCode })
  const [selected, setSelected] = useState(null)
  return (
    <TimeSlotPicker
      slots={slots}
      selectedSlot={selected}
      onSelect={setSelected}
      loading={loading}
      emptyMessage={error || 'No times available'}
    />
  )
}

Using the full booking flow

If you want slot selection, a customer details form, and a confirmation screen all in one component, use BookingCalendar instead. TimeSlotPicker + useSlots is for cases where you need full control over the UI.

Gotchas

• TimeSlotPicker is presentational — there is no built-in date navigation. If you want to let users browse different weeks or date ranges, implement date filtering yourself and pass the filtered slots.
• useSlots does not auto-refetch. Call refetch() manually if the user changes timezone or if significant time has passed since the initial fetch.
• Slot times are ISO 8601 strings. Format them for display using date-fns or Intl.DateTimeFormat — the component does not localise times automatically.