Calendar: Week numbers

showWeekNumber adds a week column. ISOWeek uses ISO numbering, starting on Monday. showOutsideDays={false} hides days of other months.

October 2026

	Mo	Tu	We	Th	Fr	Sa	Su
40
41
42
43
44

import { Calendar } from "@/components/ui/calendar"

export function CalendarWeekNumbers() {
  return (
    <div className="w-fit max-w-full overflow-x-auto rounded-xl border">
      <Calendar mode="range" showWeekNumber ISOWeek showOutsideDays={false} />
    </div>
  )
}

Add this example

This adds the example as components/examples/calendar/week-numbers.tsx, together with the Calendar component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/calendar-week-numbers.json

To add only the component, follow the Calendar installation.

Props in this example

The Calendar props this example sets, from the API reference.

Calendar

Prop	Type	Default
`mode`Without a mode, days are not selectable.	`"single" \| "multiple" \| "range"`	`–`
`showOutsideDays`HextaUI default.	`boolean`	`true`
`showWeekNumber`	`boolean`	`false`
`ISOWeek`	`boolean`	`false`

Every prop is in the Calendar API reference.

More Calendar examples

See them all, with keyboard support and accessibility notes, on the Calendar page.

Add this example

Props in this example

Calendar

More Calendar examples

Related components