Calendar

A Calendar component lays a month out as a grid and lets a date be picked from it. Unlike a date picker it is always open, which suits a booking screen, an availability view or anywhere the surrounding dates are part of the decision.

Demo

Rendered live, with the same build of the library you install.

Pick a date, September 2026

30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3

Usage

Source
Calendar.tsx
import { useState } from 'react';
import { getLocalTimeZone, today } from '@internationalized/date';
import { NCalendar } from '@nayan-ui/react';


const Calendar = () => {
  const [value, setValue] = useState<any>(today(getLocalTimeZone()));


  return (
    <div>
      <NCalendar value={value} onChange={setValue} aria-label="Pick a date" />
    </div>
  );
};


export default Calendar;

Attributes

13 props
NameTypeDefaultDetails
valueanyOptionalThe value prop.
defaultValueanyOptionalThe defaultValue prop.
onChange(value: any) => voidOptionalThe onChange prop.
minValueanyOptionalThe minValue prop.
maxValueanyOptionalThe maxValue prop.
isDateUnavailable(date: any) => booleanOptionalDates the user cannot pick, e.g. `date => date.day === 1`.
disabledbooleanfalseThe disabled prop.
visibleMonthsnumberOptionalMonths shown side by side.
labelReactNodeOptionalThe label prop.
classNamestring''The className prop.
headerClassNamestring''The headerClassName prop.
gridClassNamestring''The gridClassName prop.
aria-labelstring'Calendar'The aria-label prop.

Tags

Other components solving nearby problems.