# Calendar 8
> A plain month grid with a selected-day list — no shell, no filters, no dialogs
A shadcn/ui block from the [@shadcnstore](https://www.shadcnstore.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnstore/calendar-8).
- Page, with a live preview: https://shadcn.exchange/r/shadcnstore/calendar-8
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnstore/calendar-8-light-fea6891879a4a45d.png
- Registry item: https://shadcnstore.com/r/calendar-8.json
- Listed: 2026-10-13, source last changed 2026-10-13
## Install
```bash
npx shadcn@latest add https://shadcnstore.com/r/calendar-8.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Dependencies
- npm packages: `lucide-react`
- Registry items: `button`, `card`, `empty`, `item`
## Files
### `storage/app/registry-sources/application/calendar/calendar-8/page.tsx`
```tsx
import { Calendar8 } from '@/components/blocks/application/calendar/calendar-8/components/calendar-8'
export default function Page() {
return (
)
}
```
### `storage/app/registry-sources/application/calendar/calendar-8/calendar-8.tsx`
```tsx
'use client'
import { useMemo, useState } from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { cn } from '@/lib/utils'
import { compactTime, simpleEvents, toDateString, type SimpleEvent } from "@/components/data/calendar-8-data"
import { Calendar8DayPanel } from './calendar-8-day-panel'
const monthFormat = new Intl.DateTimeFormat('en-US', { month: 'long', year: 'numeric' })
const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
/** Two chips is what a cell this size holds; the rest roll into a "+n more" line. */
const MAX_CHIPS = 2
const startOfDay = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate())
const addDays = (date: Date, days: number) => {
const next = new Date(date)
next.setDate(next.getDate() + days)
return next
}
/**
* Weeks start on Monday, which is what most of the world outside the US expects. The row count is
* derived rather than fixed at six, so a short month never renders a whole empty trailing week.
*/
function monthGrid(anchor: Date) {
const first = new Date(anchor.getFullYear(), anchor.getMonth(), 1)
const offset = (first.getDay() + 6) % 7
const dayCount = new Date(anchor.getFullYear(), anchor.getMonth() + 1, 0).getDate()
const weeks = Math.ceil((offset + dayCount) / 7)
const start = addDays(first, -offset)
return Array.from({ length: weeks * 7 }, (_, index) => addDays(start, index))
}
/**
* The plain month view: a grid, a day panel, and nothing else.
*
* Deliberately not an application shell. No sidebar, no mini month, no calendar filters, no search,
* no attendees, no create dialog — those are what the paid calendar blocks are for. This one is the
* piece you drop into a page that just needs to show a month.
*/
export function Calendar8() {
const today = useMemo(() => startOfDay(new Date()), [])
const [anchor, setAnchor] = useState(() => new Date(today.getFullYear(), today.getMonth(), 1))
const [selected, setSelected] = useState(today)
const events = useMemo(() => {
const map = new Map()
for (const event of simpleEvents) {
const date = toDateString(addDays(today, event.dayOffset))
const list = map.get(date) ?? []
list.push(event)
map.set(date, list)
}
for (const list of map.values()) {
list.sort((left, right) => left.start - right.start)
}
return map
}, [today])
const days = useMemo(() => monthGrid(anchor), [anchor])
const todayStr = toDateString(today)
const selectedStr = toDateString(selected)
const shiftMonth = (delta: number) => setAnchor(new Date(anchor.getFullYear(), anchor.getMonth() + delta, 1))
const goToToday = () => {
setAnchor(new Date(today.getFullYear(), today.getMonth(), 1))
setSelected(today)
}
return (