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_changeevent — fired when a day is clickedon_time_changeevent — 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.
Summary
Functions
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 tonil.time_value(:string) - Selected time in"HH:MM"format or nil. Defaults tonil.start_hour(:integer) - First time slot hour (0–23). Defaults to9.end_hour(:integer) - Last time slot hour (exclusive, 0–24). Defaults to21.step(:integer) - Minutes between time slots. Defaults to30.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 totrue.class(:string) - Defaults tonil.