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.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
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.