Event List Day
Day schedule list with an all-day item pinned at top, ruled timed event rows, and an explicit free-time gap row.
Day schedule list with an all-day item pinned at top, ruled timed event rows, and an explicit free-time gap row.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Event List Day is the ruled day schedule for Friday, Jun 13. The header reads 7 items, 2 hours free. An all-day row for Acme All-Hands Prep Day is pinned at the top, badged All day, with five attendee avatars including Avery Stone and Jordan Lee. Timed events follow as ruled rows: Daily standup 9:00 am to 9:15 am at meet.acme.com/standup, Design review: billing flow 10:00 am to 11:00 am, and Eng sync 11:30 am to 12:15 pm. A free-time gap row reads 1:00 pm to 3:00 pm, 2 hours free in muted italic. The Sprint retrospective in Board room B and the 1:1 with Avery close out the day.
Events are one flat array with a kind discriminator. The free-time gap row is rendered honestly because absence of meetings is itself schedulable information.
Reach for this block as the day detail view inside a calendar product, shown when the user taps a date in the month or mini calendar. Wire EVENTS to your events endpoint filtered by date and sorted by start time.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the personal daily schedule list. Other event list day uses:
Tip: label free gaps explicitly; a list that only shows meetings trains users to think the day is fuller than it is.