Views

Seven interchangeable views over the same event data — month, week, day, a resource-lane timeline scheduler, week-as-rows, agenda and year. Every view takes the same [events], [viewDate] and theming inputs, so switching view is a one-line change. All are standalone, zoneless, OnPush and SSR-safe.

Month

A month grid with lane-packed events, an all-day band, and a “+N more” overflow. maxLanes caps the visible rows per day.

Loading month view…

<cal-month-view
  [events]="events"
  [viewDate]="viewDate"
  [today]="today"
  [statusColors]="statusColors"
  [maxLanes]="3"
  (eventClicked)="onEvent($event.event)"
/>

Week & day

A time-grid with an all-day band and a “now” line. Set [days] to 7 for a week or 1 for a single day; bound the visible hours with dayStartMinutes / dayEndMinutes.

Loading week view…

<!-- Week grid: 7 days, 6am-10pm window -->
<cal-time-grid
  [events]="events"
  [viewDate]="viewDate"
  [today]="today"
  [now]="now"
  [days]="7"
  [anchorToWeek]="true"
  [dayStartMinutes]="360"
  [dayEndMinutes]="1320"
  [statusColors]="statusColors"
  (eventChanged)="onChange($event)"
/>

<!-- Single day: [days]="1" -->
<cal-time-grid [events]="events" [viewDate]="viewDate" [days]="1" />

Timeline (resource scheduler)

A dispatch board: resources as lanes (flat or a collapsible tree), time across the top. Drag blocks to reschedule or reassign; drop unassigned work onto a lane.

Loading timeline…

<cal-timeline-view
  [events]="jobs"
  [resources]="resources"
  [viewDate]="viewDate"
  [now]="now"
  [dayStartMinutes]="420"
  [dayEndMinutes]="1140"
  [headerGroupings]="['day', 'hour']"
  [statusColors]="statusColors"
  (eventChanged)="onChange($event)"
/>

Week as rows

The time-grid transposed with orientation="horizontal": time flows left→right and days stack as rows. slotMinutes subdivides the grid; a short day window fills the width, a long one scrolls.

Loading week-rows…

<!-- Same time-grid, transposed: time flows left->right, days stack as rows.
     slotMinutes drives the gridline density (labels stay hourly). -->
<cal-time-grid
  orientation="horizontal"
  [events]="events"
  [viewDate]="viewDate"
  [days]="7"
  [anchorToWeek]="true"
  [dayStartMinutes]="480"
  [dayEndMinutes]="1080"
  [slotMinutes]="30"
  [statusColors]="statusColors"
/>

Agenda

A compact chronological list grouped by day — ideal for narrow screens. hideEmptyDays drops days with no events.

Loading agenda…

<cal-agenda-view
  [events]="events"
  [viewDate]="viewDate"
  [today]="today"
  [days]="30"
  [hideEmptyDays]="true"
  [statusColors]="statusColors"
/>

Year

Twelve mini-months with per-day event heat, for a whole-year overview. Emits daySelected / monthSelected for drill-down.

Loading year view…

<cal-year-view
  [events]="events"
  [viewDate]="viewDate"
  [today]="today"
  [statusColors]="statusColors"
  (monthSelected)="onMonth($event.date)"
/>