Calendar

The Calendar component renders a month view with day cells, supporting single date selection, outside-day visibility, and month navigation. It uses date-fns for date calculations and is styled with Tailwind classes matching the design system.

Preview

Installation

npx novaui-cli add calendar

Dependencies

The Calendar requires the following peer dependency:

• date-fns >= 3

Import

import { Calendar } from 'novaui-components'

Basic Usage

import { useState } from 'react'
import { Calendar } from 'novaui-components'

export function BasicCalendar() {
  const [date, setDate] = useState<Date | undefined>(new Date())

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
    />
  )
}

Hide Outside Days

export function CalendarNoOutsideDays() {
  const [date, setDate] = useState<Date | undefined>(new Date())

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      showOutsideDays={false}
    />
  )
}

Props API

Calendar Props

Best Practices

1. Use with a popover or dialog — wrap the Calendar in a popover for date-picker behavior
2. Show outside days for context — users often need to see the surrounding dates for orientation
3. Highlight today — the calendar automatically highlights today's date with bg-accent
4. Provide month navigation — the built-in prev/next buttons make it easy to browse months

Related Components

• Input — pair with a text input for a full date picker