Screen · Productivity

Agenda SwiftUI Screen

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

A paging week strip with a gliding selection pill, hold-to-scrub, a cross-fading month header, event dots and a vertical drag that expands it into a month grid.

  • SwiftUI
  • iOS 17.0+
  • calendar-strip
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 paging week strip with a gliding selection pill
  • Hold to scrub days while the month header cross-fades
  • Event dots, and a drag that expands the strip into a month
  • The Agenda screen from the preview with a day timeline

In the Build Kit

Candy (style), Productivity (brief). Your agent builds around this screen in the same design.

Used in

Productivity App (template)

02

Implementation notes

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

Swipe to page between weeks; the strip settles with a soft haptic, the month header cross-fades, and the selection keeps its weekday in the new week. Tap a day and the pill glides to it with matchedGeometryEffect. Hold, then drag across days to scrub the selection with a tick per day. Drag down and the week row grows into its month grid while the other rows fade in around it; drag up to collapse back onto the selected week. Today is ringed in the tint, and events puts up to three dots under a day.

Notes

  • States: week, expanding (fractional progress while dragging), month. In month mode paging moves by month and leaves the selection alone.
  • Every pane is the same six-row month grid clipped to rowHeight * (1 + 5 * progress) and offset so the focused week stays at the top, which is what makes expand and collapse continuous instead of a swap.
  • Paging is a custom three-pane carousel rather than a ScrollView, so the horizontal page, the vertical expand and the hold-to-scrub can share one surface without fighting the scroll view. A drag is classified by its first movement; predictedEndTranslation commits flicks, and the carousel re-centers without animation after each page.
  • Haptics: selection on every selection change (tap or scrub), soft impact on page settle.
  • Days are labeled buttons with Today and event counts as their value; the strip exposes Next, Previous and Show month/week actions. Reduce Motion shortens the pill glide and paging to short ease-outs.
  • CalendarStripExample at the end of CalendarStrip.swift is the screen shown in the preview; copy it as a starting point.