# Week calendar

A week calendar where you drag to create, move, and resize events, with color coded calendars, day and agenda views, and swipes on phones.

- ID: `week-calendar`
- Import: `animui/week-calendar`
- Category: block
- Runtime exports: `WeekCalendar`
- Declaration: `types/pro/week-calendar.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: calendar, date-picker, time-picker, popover, availability-picker

```tsx
import { WeekCalendar } from 'animui/week-calendar';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info week-calendar` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface WeekCalendarProps {
  events?: string | number | boolean | ReactNode;
  defaultEvents?: string | number | boolean | ReactNode;
  onEventsChange?: () => void;
  onCreate?: () => void;
  onUpdate?: () => void;
  onDelete?: () => void;
  calendars?: string | number | boolean | ReactNode;
  defaultDate?: string | number | boolean | ReactNode;
  defaultView?: string | number | boolean | ReactNode;
  onViewChange?: () => void;
  weekStartsOn?: string | number | boolean | ReactNode;
  startHour?: string | number | boolean | ReactNode;
  endHour?: string | number | boolean | ReactNode;
  timeZone?: string | number | boolean | ReactNode;
  locale?: string | number | boolean | ReactNode;
  className?: string;
}

export declare const WeekCalendar: ComponentType<WeekCalendarProps>;

export default WeekCalendar;
```