Agenda

The agenda layout lists a week's appointments day by day, rather than placing them on a grid of hours or days. It reads well on a narrow screen, and wherever what matters is what comes next rather than where the free time is. A calendar opens in it with DefaultLayout (React: defaultLayout), and the toolbar's layout picker switches to it.

React Blazor

Schmeler and Sons' agenda

The appointments, tasks and phone calls about Schmeler and Sons. The arrows move a week at a time.

React example Blazor example React TypeScript Razor

The list

Each day that has something is a heading, with its rows under it: their time, or All day, and their subject, beside a dot in the color of how an appointment shows its time. A week with nothing in it says Nothing scheduled. Clicking a row opens it, as in the other layouts. A list has no times to drop a row on, so nothing is moved in the agenda, even in an Editable calendar.

A calendar of one layout

Name a single layout in Layouts (React: layouts) and the layout picker goes, keeping the calendar in it — a list of what's coming beside a page's other content, say. A day's heading then opens no day layout, since the calendar doesn't offer one.

React Blazor

The calendar's other layouts: Day, Work Week, Week and Month.