Swift PiecesPro
  • Library
    Screens48Finished, designed screens for real apps.Templates10Complete apps built from the screens.Build Kit24Styles, briefs and recipes for your coding agentEverything58The whole library, with search
  • Docs
  • Pro

Library

  • Screens48
  • Templates10
  • Build Kit24
  • Everything58
  • Docs
  • Pro
  • Account
Get Swift Pieces ProFree library ↗
Swift PiecesPro

Production-ready SwiftUI screens and app templates for iOS. The pieces to build the whole app.

Library

  • Screens
  • Templates
  • Build Kit
  • Everything

Product

  • Pro
  • Your account
  • Sign in

Resources

  • Docs
  • CLI
  • MCP and agents
  • Free library

Social

  • X / Twitter
  • GitHub

SWIFTPIECES PRO

© 2026 Swift Pieces. One payment, lifetime access, per-developer commercial license.

Curated withby Saivion

LibraryScreensBooking

Screen · Productivity

Booking

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.

SwiftUIiOS 17.0+slot-picker

Get Swift Pieces 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

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.

Screen · Productivity

Agenda

A day agenda under a week strip you can page, scrub and pull open into a month.

Screen · Travel

Nearby

A map of places nearby with a Maps-style sheet that scrolls, snaps and hands off to its list.

Screen · Commerce

Order

A delivery status timeline that advances live, with a courier card and a counting ETA.