Every screen, flow, block and app template in SwiftPieces Pro, for good.All of Pro, $199 once.$199 once.Get Pro

Screen · Productivity

Booking SwiftUI Screen

A date rail bound to a grid of time slots that reloads for the day you pick.

An appointment booking screen: a date rail where each day shows how much is left, a grid of time slots that restaggers when the day changes, taken slots genuinely disabled, a selection that survives the day change when the time still exists, and a sticky confirm bar.

  • SwiftUI
  • iOS 17.0+
  • slot-picker
Get SwiftPieces Pro

$199 once, every piece included. See how installing works · Sign in

01

What's included

SwiftUI source you own, built on Apple frameworks only.

  • A date rail where each day carries its remaining availability
  • A slot grid that reloads and restaggers when the day changes
  • Taken slots are disabled for VoiceOver, not just struck through
  • The selection survives a day change when that time is still free

In the Build Kit

Ember (style). Your agent builds around this screen in the same design.

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

Each day cell on the rail carries how many slots are still open, and a fully booked day is struck through and cannot be tapped. Picking a day reloads the grid below it: the times cross-fade and stagger back in, taken times stay in place struck through and disabled, and the chosen time survives the change whenever the new day offers it. When it does not, the selection clears itself, so the sticky confirm bar can never send a booking for a slot that no longer exists.

Notes

  • A slot's identity is its minute of day, not an absolute date, which is what lets 2:00 PM on Thursday carry over to 2:00 PM on Friday. SlotPickerSlot.date(on:calendar:) turns it back into the date you send.
  • The rail is deliberately plain: a horizontal scroll, no paging, no scrub, no month expand. Availability is its only job, so the grid stays the hero. Reach for Calendar Strip when you need to browse a calendar instead.
  • Supply the same times every day and flip isAvailable rather than dropping them, so a busy day still reads as a day with times on it.
  • The stagger lives in each time chip, not in the grid: a new generation drops the chip back to hidden and animates it in after a delay taken from its position, so a reload restages correctly even when the grid reuses rows.
  • Taken times are genuinely disabled, not just struck through, and VoiceOver reads "2:00 PM, unavailable". Day cells report the date and the number of slots left, and both the rail and the grid are containers with 44pt targets.
  • The grid is adaptive: three columns at the default text size, dropping to one at accessibility sizes, so it reflows instead of clipping. Reduce Motion reveals every time at once.
  • SlotPickerExample at the end of SlotPicker.swift is the screen shown in the preview; copy it as a starting point.

03

Keep building

Pieces that work well next to this one.