Calendar Year
Open in

Calendar Year

A calendar year component with a grid of days and months.

An optional "scrollToCurrentMonth" prop can be used to make it automatically scroll to the current month upon loading.

Year: 2025

January

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

February

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

March

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

April

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

May

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

June

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

July

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

August

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

September

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

October

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

November

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

December

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

Features

  • Full year calendar view with month-by-month layout
  • Composable architecture with separate components for months, weeks, and days
  • Multiple day variants (default, outline, destructive, accent, success, and more)
  • Automatic calendar generation with timezone support
  • Optional auto-scroll to current month on mount
  • Support for blocked, disabled, and custom day states
  • Integrated tooltips for day information
  • Today indicator with ring highlight
  • Customizable click handlers for each day
  • Built with dayjs for robust date handling
  • Fully typed with TypeScript

Component Props

CalendarYear

  • className - string
  • children - React.ReactNode

CalendarYearContent

  • scrollToCurrentMonth - boolean - Automatically scroll to current month (default: false)
  • timezone - string - Timezone for date calculations (default: "Europe/Lisbon")
  • className - string
  • children - React.ReactNode

CalendarYearMonth

  • name - string (required) - Month name
  • monthIndex - number (required) - Month index (0-11)
  • className - string
  • children - React.ReactNode

CalendarYearWeekdayHeader

  • labels - string[] (required) - Array of weekday labels
  • className - string

CalendarYearWeek

  • className - string
  • children - React.ReactNode

CalendarYearDay

  • date - string (required) - Date in YYYY-MM-DD format
  • state - "blocked" | "disabled" - Day state
  • variant - "default" | "default-success" | "accent" | "destructive" | "outline" | "outline-destructive" | "outline-accent" | "outline-success" | "secondary" | "ghost" (default: "outline")
  • disabled - boolean - Whether the day is disabled
  • tooltip - string - Tooltip text for the day
  • timezone - string - Timezone for date calculations (default: "Europe/Lisbon")
  • onClick - () => void - Click handler
  • className - string

Helper Function

generateYearCalendar(year, timezone?)

Utility function to generate calendar structure for a full year. Returns an array of months with rows of days.

  • year - number (required) - Year to generate calendar for
  • timezone - string - Timezone for calculations (default: "Europe/Lisbon")
  • Returns: CalendarMonth[] - Array of month structures with date information