Calendar with week numbers

Here is shadcn calendar with week numbers

"use client"

import * as React from "react"

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

export function Calendar15() {
  const [date, setDate] = React.useState<Date | undefined>(
    new Date(2025, 5, 12)
  )

  return (
    <Calendar
      mode="single"
      defaultMonth={date}
      selected={date}
      onSelect={setDate}
      className="rounded-lg border shadow-sm"
      showWeekNumber
    />
  )
}

Published

6/9/2025

Similar components

Explore more

Part of shadcn/ui — browse the full library on 21st.dev.

Calendar components239 Date Picker components250 shadcn/ui components1043 Date components122 Minimal components5706

Dependencies

Tags

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Dependencies

Tags

Calendar with week numbers

Published

Similar components

Explore more