Week Agenda
Week view with a vertical time column, five day columns, CSS-positioned event blocks, and a current-time line.
Week view with a vertical time column, five day columns, CSS-positioned event blocks, and a current-time line.
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
Week Agenda is the scheduling workhorse view: a vertical time column from 8am to 6pm beside five day columns for Jun 9 through 13, 2026. Events are positioned with pure CSS top and height derived from the hour row height. The Daily standup block repeats across all five days at 9:00 am for 15 minutes; the Design review on Tuesday runs 10:00 to 11:00 with Priya Nair, Riley Parker, and Avery Stone; the Sprint retrospective on Thursday fills 3:00 to 4:00 in Board room B. The current-time line, a dot and horizontal rule, sits at 10:30 on the Friday column.
Events are one flat array filtered by dayIdx. The time line is a single CSS-positioned div, not a clock hook, so the block previews correctly without client state.
Reach for this block as the primary week view inside a calendar product, wired to your events array and a real current-time tick. Add a router transition to the month view header for orientation.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the team weekly schedule grid. Other week agenda uses:
Tip: keep HOUR_HEIGHT a named constant; every positioning calculation derives from it and a single change rescales the whole grid.