# Calendar > A complete screen built from AppShell, Button, EventCard, IconButton and 4 more components. Pattern · Pro kit · [Live page](https://ui.twentyfirst.media/pro/patterns/CalendarScreen/) ## Code ```tsx import * as React from "react"; import { AppShell, Button, EventCard, IconButton, PageHeader, Panel, Stagger, Tabs, } from "@twentyfirstmedia/pro"; const DAYS = ["Mon 13", "Tue 14", "Wed 15", "Thu 16", "Fri 17"]; const EV = [ { d: 0, s: 9, e: 10, t: "Standup", tint: "sky", who: "Team", }, { d: 0, s: 13, e: 14.5, t: "Hiring panel", tint: "lilac", who: "Design", }, { d: 1, s: 10.5, e: 12, t: "Team sync", tint: "sky", who: "Growth + Design", }, { d: 1, s: 15, e: 16, t: "Partner call", tint: "mint", who: "Northwind", }, { d: 2, s: 9, e: 10, t: "Standup", tint: "sky", who: "Team", }, { d: 2, s: 14, e: 15.5, t: "Design review", tint: "lilac", who: "Billing flow", }, { d: 3, s: 11, e: 12.5, t: "Pricing review", tint: "butter", who: "Moved from Wed", }, { d: 3, s: 16, e: 17, t: "Incident retro", tint: "blush", who: "Webhooks #88", }, { d: 4, s: 9, e: 10, t: "Standup", tint: "sky", who: "Team", }, { d: 4, s: 15.5, e: 17, t: "Q2 invoices due", tint: "butter", who: "Finance", }, ]; const START = 8, END = 18, ROW = 48; function App() { const hours = []; for (let i = START; i <= END; i++) hours.push(i); return (

April 2026

{["M", "T", "W", "T", "F", "S", "S"].map((d, i) => ( {d} ))} {([null, null] as (number | null)[]) .concat( Array.from( { length: 30, }, (_, i) => i + 1, ), ) .map((n, i) => { const on = n != null && n >= 13 && n <= 17, today = n === 16; return ( {n || ""} ); })}

Moved from Wednesday so Growth can join. What delayed EU webhooks and how we stop it. } >

, , ]} />

{DAYS.map((d, i) => (

{d}

))}

{hours.slice(0, -1).map((hr) => (

{(hr < 10 ? "0" : "") + hr + ":00"}

))}

{DAYS.map((d, di) => (

{EV.filter((e) => e.d === di).map((e, i) => (

{e.t}

{e.who}

))}

); } export default function Preview() { return ; } ``` ## Props ### AppShell | Prop | Type | Notes | | --- | --- | --- | | `active?` | `string` | | | `brand?` | `ReactNode` | The product name, or a node (a logo mark with the name; collapsed sidebars show it whole). | | `tag?` | `string` | | | `nav?` | `NavItem[]` | | | `user?` | `{ name: string; email?: string }` | | | `onNavigate?` | `(label: string) => void` | | | `topExtra?` | `ReactNode` | | | `sheetStyle?` | `CSSProperties` | | | `contentKey?` | `string \| number` | | | `side?` | `ReactNode` | | | `dock?` | `boolean` | | | `dockItems?` | `DockProps["items"]` | | | `railTop?` | `RailItem[]` | | | `railBottom?` | `RailItem[]` | | | `navigation?` | `"top" \| "sidebar"` | `top` (default): navigation in the top bar, tools in the side rail. `sidebar`: a labelled sidebar on the frame, with groups, nesting and a drawer on phones. | | `sidebarGroups?` | `SidebarGroup[]` | With `navigation="sidebar"`: groups instead of the flat `nav` list. | | `sidebar?` | `Partial>` | With `navigation="sidebar"`: more sidebar props (collapsed, storageKey, shortcut, linkAs …). | | `workspaces?` | `WorkspaceSwitcherProps` | With `navigation="sidebar"`: the workspace switcher at the top instead of the brand. | | `userMenu?` | `(MenuItem \| "-")[]` | The account menu's entries (with `navigation="sidebar"` at the foot of the sidebar). | | `children?` | `ReactNode` | | | `className?` | `string` | Extra class on the root element. | | `style?` | `CSSProperties` | Inline style on the root element. | ### Button | Prop | Type | Notes | | --- | --- | --- | | `variant?` | `"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"` | | | `size?` | `"md" \| "sm"` | | | `icon?` | `IconName` | | | `iconRight?` | `IconName` | | | `disabled?` | `boolean` | | | `type?` | `"button" \| "submit" \| "reset"` | | | `onClick?` | `(e: MouseEvent) => void` | | | `children?` | `ReactNode` | | | `asChild?` | `boolean` | Render the single child element (a link, a router Link) with the button's look instead of a