# `PhiaUi.Components.CalendarTimePicker`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/calendar/calendar_time_picker.ex#L1)

Calendar + scrollable time slot picker for date-and-time selection.

Combines a `calendar/1` grid (left) with a scrollable list of time slots
(right) so users can pick both a date and a time in a single panel.
Zero JavaScript — the time list uses CSS `overflow-y-auto`. Calendar
keyboard navigation is provided by the `PhiaCalendar` hook (same as
`calendar/1`).

## State management

The parent LiveView owns all state and handles events:

- `calendar-prev-month` / `calendar-next-month` — month navigation (from inner calendar)
- `on_date_change` event — fired when a day is clicked
- `on_time_change` event — fired when a time slot is clicked, sends `%{"time" => "HH:MM"}`
- `on_cancel` / `on_confirm` — Cancel/Done button events

## Example

    <.calendar_time_picker
      id="booking-time"
      current_month={@current_month}
      date_value={@selected_date}
      time_value={@selected_time}
      on_date_change="date-picked"
      on_time_change="time-picked"
      on_cancel="cancel-picker"
      on_confirm="confirm-picker"
    />

## Time slots

Slots are generated server-side from `start_hour` to `end_hour` with `step`
minutes between each slot. Default: 9 AM–9 PM, 30-minute intervals.

# `calendar_time_picker`

## Attributes

* `id` (`:string`) (required) - Unique DOM id prefix.
* `current_month` (`:any`) (required) - Currently displayed month (`Date.t()`).
* `date_value` (`:any`) - Selected date (`Date.t()`) or nil. Defaults to `nil`.
* `time_value` (`:string`) - Selected time in `"HH:MM"` format or nil. Defaults to `nil`.
* `start_hour` (`:integer`) - First time slot hour (0–23). Defaults to `9`.
* `end_hour` (`:integer`) - Last time slot hour (exclusive, 0–24). Defaults to `21`.
* `step` (`:integer`) - Minutes between time slots. Defaults to `30`.
* `on_date_change` (`:string`) - Event for day click. Defaults to `"calendar-change"`.
* `on_time_change` (`:string`) - Event for time slot click. Defaults to `"calendar-time-change"`.
* `on_cancel` (`:string`) - Cancel button event. Defaults to `"calendar-time-cancel"`.
* `on_confirm` (`:string`) - Done button event. Defaults to `"calendar-time-confirm"`.
* `show_actions` (`:boolean`) - Show Cancel / Done buttons. Defaults to `true`.
* `class` (`:string`) - Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*