104Get started
HextaUI

Calendar: Fixed today

Pass today to pin the highlighted day, for tests or another time zone. animate={false} turns off month transitions.

February 2026
"use client"

import * as React from "react"
import type { DateRange } from "react-day-picker"

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

export function CalendarFixedToday() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: new Date(2026, 1, 9),
    to: new Date(2026, 1, 17),
  })

  return (
    <div className="w-fit max-w-full overflow-x-auto rounded-xl border">
      <Calendar
        mode="range"
        today={new Date(2026, 1, 11)}
        defaultMonth={new Date(2026, 1)}
        selected={range}
        onSelect={setRange}
        animate={false}
      />
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/calendar-fixed-today.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

PropTypeDefault
modeWithout a mode, days are not selectable.
"single" | "multiple" | "range"–
selectedMatches the mode.
Date | Date[] | DateRange–
onSelect
(selected, triggerDate, modifiers, event) => void–
defaultMonth
Date–
animateMonth slide and height transitions. HextaUI default.
booleantrue
todayDefaults to the client’s today, kept in sync across midnight and hydration.
Date–

Every prop is in the Calendar API reference.

More Calendar examples

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

Related components