# Week calendar

> A week view with calendars, a now line, and click-to-create events.

Block · Pro · https://lodeui.com/blocks/week-calendar

## When to use

- Scheduling, booking and team calendars.

## When not to use

- Month overviews.

## Installation

```bash
npx shadcn@latest add @lode/week-calendar
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { WeekCalendar } from "@/components/blocks/week-calendar";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <WeekCalendar />
    </main>
  );
}
```

Built from: Button, Checkbox

## API reference

### WeekCalendar

A week view with a now line, calendar filters, click-to-create and delete. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through events, slots and filters |
| Enter | Create the event after typing its name |
| Esc | Cancel the new event |

## Accessibility

- Slots and events are labelled buttons.
- Calendar filters are labelled checkboxes.

## Motion

- New events grow into place; deleted ones fade out.

## Responsive behavior

- The grid scrolls horizontally on phones; the filter list moves above it.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Store times as ISO strings; the block works in local time.

## Related

- [Checkbox](https://lodeui.com/components/checkbox) — A checkbox whose tick draws itself, with an indeterminate state.
- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.