---
title: "Booking slot picker"
description: "Book a call: pick a length, a day on the calendar and a free time in your time zone, then confirm."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/booking-slot-picker
---

# Booking slot picker

Book a call: pick a length, a day on the calendar and a free time in your time zone, then confirm.

The host and event sit on top, with the length (15, 30 or 45 minutes), where it happens and a time zone Select. Below, the calendar sits beside the chosen day's free times, which stack under it in a narrow card. Weekends, past days and full days can't be picked. Times load per day with skeletons, show in the chosen time zone in 24- or 12-hour clock, and a day with nothing left at that length says so and offers the next day that has. Confirm stays off until a time is picked, shows a spinner while it books, then the booking with a Change time button. Screen readers hear each step.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/booking-slot-picker
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, avatar, button, calendar, card, scroll-area, select, separator, skeleton, spinner, toggle-group

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More scheduling blocks

All 3, with install commands: https://ui.edbn.me/docs/blocks/scheduling · https://ui.edbn.me/docs/blocks/scheduling.md

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt
