Full Calendar - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/full-calendar

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { FullCalendar } from "@/components/ui/full-calendar"

<FullCalendar events={events} />

Examples

With Users

Calendar with user assignment.

Day View

Single day view.

Week View

Week view.

API Reference

Prop	Type	Default	Description
`events`*	`Event[]`	—	Calendar events.

February 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Pre-production meeting

Location scout

Casting callbacks

Production Day 1

Production Day 2

Production Day 3

Wrap party

Edit review

Installation

pnpm dlx shadcn@latest add @saturation-ui/full-calendar

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { FullCalendar } from "@/components/ui/full-calendar"

<FullCalendar events={events} />

Examples

With Users

February 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

SCCamera test

MJLocation scout

EDScript review

SCLighting setup

MJSound check

EDRehearsal

SCShoot Day 1

MJDailies review

Calendar with user assignment.

Day View

Thursday, February 5, 2026

7 AM

8 AM

9 AM

10 AM

11 AM

12 PM

1 PM

2 PM

3 PM

4 PM

5 PM

6 PM

Morning standup

9:00 AM - 9:30 AM

Location scout meeting

10:00 AM - 11:30 AM

Lunch break

12:00 AM - 1:00 PM

Camera test

2:00 PM - 4:00 PM

Production review

4:30 PM - 5:30 PM