React Calendar

https://github.com/wojtekmaj/react-calendar
Admin
An ultimate calendar component for React applications, offering features like date, month, year, and...
Tokens:46,650
Snippets:487
Trust Score:10
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install react-calendar

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/configuration-guide.md

Use npm or yarn to install the package.

```bash
npm install react-calendar
# or
yarn add react-calendar
```

--------------------------------

### minDetail prop example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Example of setting the least detailed view.

```javascript
"decade"
```

--------------------------------

### locale prop example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Example of setting the locale using an IETF language tag.

```javascript
"hu-HU"
```

--------------------------------

### getBeginOfWeek usage example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Example showing how to calculate the beginning of the week for different calendar types.

```typescript
import { getBeginOfWeek } from 'react-calendar/dist/shared/dates';

// January 15, 2024 is a Monday
const date = new Date(2024, 0, 15);

// ISO 8601: week starts on Monday
getBeginOfWeek(date, 'iso8601');  // Jan 15, 2024

// Gregory: week starts on Sunday
getBeginOfWeek(date, 'gregory');  // Jan 14, 2024
```

--------------------------------

### maxDate prop example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Example of setting the maximum selectable date.

```javascript
new Date()
```

--------------------------------

### value prop examples

Source: https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/README.md

Examples of valid values for the value prop, supporting single dates or ranges.

```javascript
new Date()
```

```javascript
"2017-01-01"
```

```javascript
[new Date(2017, 0, 1), new Date(2017, 7, 1)]
```

```javascript
['2017-01-01', '2017-08-01']
```

--------------------------------

### getBeginOfDecadeYear usage example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Example showing how to get the year of the beginning of the decade.

```typescript
import { getBeginOfDecadeYear } from 'react-calendar/dist/shared/dates';

getBeginOfDecadeYear(new Date(2024, 0, 1));  // 2020
getBeginOfDecadeYear(new Date(2019, 0, 1));  // 2010
```

--------------------------------

### getDayOfWeek usage example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Example showing how to get the day of the week for different calendar types.

```typescript
import { getDayOfWeek } from 'react-calendar/dist/shared/dates';

// Monday, Jan 15, 2024
getDayOfWeek(new Date(2024, 0, 15), 'iso8601');  // 0 (Monday)
getDayOfWeek(new Date(2024, 0, 15), 'gregory');  // 1 (Monday as number)
```

--------------------------------

### OnClickWeekNumberFunc Usage Example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/types.md

Demonstrates using the onClickWeekNumber prop to log the week number and its start date.

```typescript
<Calendar
  showWeekNumbers
  onClickWeekNumber={(weekNum, firstDay, event) => {
    console.log(`Week ${weekNum} starts on ${firstDay}`);
  }}
/>
```

--------------------------------

### Complete Calendar Configuration

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/configuration-guide.md

An advanced example demonstrating various props for display, constraints, formatting, selection, navigation, styling, and callbacks.

```typescript
import Calendar from 'react-calendar';
import type { View } from 'react-calendar';

function FullCalendar() {
  const [date, setDate] = useState<Date | null>(new Date());
  const [view, setView] = useState<View>('month');
  const [activeStart, setActiveStart] = useState<Date>(new Date());

  const today = new Date();
  const maxDate = new Date(today.getFullYear(), today.getMonth() + 3, today.getDate());
  const minDate = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());

  return (
    <Calendar
      // Display and navigation
      activeStartDate={activeStart}
      locale="en-US"
      calendarType="iso8601"
      
      // Constraints
      minDate={minDate}
      maxDate={maxDate}
      minDetail="month"
      maxDetail="month"
      
      // Formatting
      formatDay={(locale, date) => date.getDate().toString()}
      formatMonth={(locale, date) => {
        return new Intl.DateTimeFormat(locale, { month: 'short' }).format(date);
      }}
      formatMonthYear={(locale, date) => {
        return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(date);
      }}
      formatWeekday={(locale, date) => {
        return new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(date);
      }}
      formatShortWeekday={(locale, date) => {
        return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date);
      }}
      formatYear={(locale, date) => date.getFullYear().toString()}
      formatLongDate={(locale, date) => {
        return new Intl.DateTimeFormat(locale, {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
        }).format(date);
      }}
      
      // Selection
      selectRange={false}
      value={date}
      returnValue="start"
      
      // Display options
      showNavigation={true}
      showWeekNumbers={false}
      showNeighboringMonth={true}
      showFixedNumberOfWeeks={false}
      showDoubleView={false}
      showNeighboringDecade={false}
      showNeighboringCentury={false}
      
      // Navigation labels
      navigationAriaLabel="Choose a date"
      navigationAriaLive="polite"
      navigationLabel={({ date, label, view }) => `${label} (${view})`}
      
      // Button labels
      prevLabel="←"
      nextLabel="→"
      prev2Label="⇐"
      next2Label="⇒"
      
      // Styling
      className="my-calendar"
      tileClassName={({ date, view }) => {
        if (view === 'month' && date.getDay() === 0) {
          return 'sunday';
        }
        return null;
      }}
      tileContent={({ date, view }) => {
        if (view === 'month' && date.getDate() === 1) {
          return <div className="badge">1st</div>;
        }
        return null;
      }}
      tileDisabled={({ date, view }) => {
        if (view === 'month') {
          // Disable weekends
          return date.getDay() === 0 || date.getDay() === 6;
        }
        return false;
      }}
      
      // Callbacks
      onChange={setDate}
      onActiveStartDateChange={({ action, activeStartDate, view }) => {
        console.log(`Navigated via ${action} to ${activeStartDate}`);
        setActiveStart(activeStartDate);
      }}
      onViewChange={({ view }) => {
        console.log(`View changed to ${view}`);
        setView(view);
      }}
      onClickDay={(date) => console.log('Clicked day:', date)}
      onClickMonth={(date) => console.log('Clicked month:', date)}
      onClickYear={(date) => console.log('Clicked year:', date)}
      onClickDecade={(date) => console.log('Clicked decade:', date)}
      onClickWeekNumber={(weekNum, date) => {
        console.log(`Clicked week ${weekNum} starting ${date}`);
      }}
      onDrillDown={({ activeStartDate, view }) => {
        console.log(`Drilled down to ${view}`);
      }}
      onDrillUp={({ activeStartDate, view }) => {
        console.log(`Drilled up to ${view}`);
      }}
      
      // Ref
      data-testid="my-calendar"
    />
  );
}
```

--------------------------------

### getBeginOfCenturyYear usage example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Example showing how to get the year of the beginning of the century.

```typescript
import { getBeginOfCenturyYear } from 'react-calendar/dist/shared/dates';

getBeginOfCenturyYear(new Date(2024, 0, 1));  // 2000
getBeginOfCenturyYear(new Date(1999, 0, 1));  // 1900
```

--------------------------------

### onClick prop example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/README.md

Callback function triggered when a calendar item is clicked.

```javascript
(value) => alert('New date is: ', value)
```

--------------------------------

### between usage example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Demonstrates clamping a date value between a minimum and maximum range.

```typescript
import { between } from 'react-calendar/dist/shared/utils';

const today = new Date();
const tomorrow = new Date(today.getTime() + 86400000);
const yesterday = new Date(today.getTime() - 86400000);

// Clamp to today
between(tomorrow, yesterday, today);  // today
between(yesterday, today, tomorrow);  // today
```

--------------------------------

### Quick Start with Calendar Component

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/README.md

A basic implementation of the Calendar component using React state to manage the selected date.

```typescript
import { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

type ValuePiece = Date | null;
type Value = ValuePiece | [ValuePiece, ValuePiece];

export default function App() {
  const [value, setValue] = useState<Value>(new Date());

  return (
    <div>
      <Calendar onChange={setValue} value={value} />
    </div>
  );
}
```

--------------------------------

### tileContent prop example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/README.md

Renders custom content within a calendar tile.

```javascript
({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null
```

--------------------------------

### MonthView Usage Example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/api-reference/view-components.md

A basic implementation of the MonthView component showing how to manage state and handle click events.

```typescript
import MonthView from 'react-calendar/dist/MonthView';

export function MyMonthView() {
  const [value, setValue] = useState<Date | [Date, Date] | null>(new Date());

  return (
    <MonthView
      activeStartDate={new Date(2024, 0, 1)}
      locale="en-US"
      onClick={(date) => setValue(date)}
      value={value}
    />
  );
}
```

--------------------------------

### TileContentFunc Usage Example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/types.md

Demonstrates rendering custom content inside a tile based on a condition.

```typescript
<Calendar
  tileContent={({ date, view }) => {
    if (view === 'month' && isBirthday(date)) {
      return <span className="badge">🎂</span>;
    }
    return null;
  }}
/>
```

--------------------------------

### DecadeView Usage Example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/api-reference/view-components.md

A basic implementation showing how to import and use the DecadeView component with state management.

```typescript
import DecadeView from 'react-calendar/dist/DecadeView';

export function MyDecadeView() {
  const [value, setValue] = useState<Date | null>(new Date());

  return (
    <DecadeView
      activeStartDate={new Date(2020, 0, 1)}
      onClick={(date) => setValue(date)}
      value={value}
    />
  );
}
```

--------------------------------

### NavigationLabelFunc Usage Example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/types.md

Demonstrates customizing the navigation label based on the current view.

```typescript
<Calendar
  navigationLabel={({ date, view, locale }) => {
    if (view === 'month') {
      return date.toLocaleDateString(locale, { month: 'long', year: 'numeric' });
    }
    return date.getFullYear().toString();
  }}
/>
```

--------------------------------

### CenturyView Usage Example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/api-reference/view-components.md

A basic implementation of the CenturyView component showing how to manage state and handle click events.

```typescript
import CenturyView from 'react-calendar/dist/CenturyView';

export function MyCenturyView() {
  const [value, setValue] = useState<Date | null>(new Date());

  return (
    <CenturyView
      activeStartDate={new Date(2000, 0, 1)}
      onClick={(date) => setValue(date)}
      value={value}
    />
  );
}
```

--------------------------------

### OnClickFunc Usage Example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/types.md

Demonstrates using the onClickDay prop to log the clicked date.

```typescript
<Calendar
  onClickDay={(date, event) => {
    console.log('Clicked day:', date);
  }}
/>
```

--------------------------------

### getWeekNumber usage example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Example showing how to calculate the week number for different calendar types.

```typescript
import { getWeekNumber } from 'react-calendar/dist/shared/dates';

// January 15, 2024
const date = new Date(2024, 0, 15);
getWeekNumber(date, 'iso8601');  // 2
getWeekNumber(date, 'gregory');  // 3 (US calendar)
```

--------------------------------

### formatDate Usage

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Example usage of formatDate to format dates as day/month/year.

```typescript
import { formatDate } from 'react-calendar/dist/shared/dateFormatter';

formatDate('en-US', new Date(2024, 0, 15));  // "1/15/2024"
formatDate('de-DE', new Date(2024, 0, 15));  // "15.1.2024"
```

--------------------------------

### tileClassName prop examples

Source: https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/README.md

Defines class names for calendar items using strings, arrays, or functions.

```javascript
"class1 class2"
```

```javascript
["class1", "class2 class3"]
```

```javascript
({ date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null
```

--------------------------------

### Apply value prop

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Examples of valid formats for the value prop, including single dates, date strings, and arrays of dates or strings.

```javascript
new Date()
```

```javascript
2017-01-01
```

```javascript
[new Date(2017, 0, 1), new Date(2017, 7, 1)]
```

```javascript
['2017-01-01', '2017-08-01']
```

--------------------------------

### TileClassNameFunc Usage Example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/types.md

Demonstrates applying a custom CSS class to the first day of the month.

```typescript
<Calendar
  tileClassName={({ date, view }) => {
    if (view === 'month' && date.getDate() === 1) {
      return 'month-start';
    }
    return null;
  }}
/>
```

--------------------------------

### YearView Usage Example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/api-reference/view-components.md

A basic implementation showing how to import and use the YearView component with state management.

```typescript
import YearView from 'react-calendar/dist/YearView';

export function MyYearView() {
  const [value, setValue] = useState<Date | null>(new Date());

  return (
    <YearView
      activeStartDate={new Date(2024, 0, 1)}
      onClick={(date) => setValue(date)}
      value={value}
    />
  );
}
```

--------------------------------

### Custom Navigation Usage

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/api-reference/view-components.md

Example of importing and using the Navigation component within a custom React component.

```typescript
import Navigation from 'react-calendar/dist/Calendar/Navigation';

export function MyCustomCalendar() {
  const [activeStart, setActiveStart] = useState(new Date());
  const [view, setView] = useState<'month' | 'year'>('month');

  return (
    <Navigation
      activeStartDate={activeStart}
      drillUp={() => setView('year')}
      setActiveStartDate={(date, action) => setActiveStart(date)}
      view={view}
      views={['month', 'year']}
    />
  );
}
```

--------------------------------

### TileDisabledFunc Usage Example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/types.md

Demonstrates disabling weekend tiles in the month view.

```typescript
<Calendar
  tileDisabled={({ date, view }) => {
    if (view === 'month') {
      // Disable weekends
      return date.getDay() === 0 || date.getDay() === 6;
    }
    return false;
  }}
/>
```

--------------------------------

### formatMonth Usage

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Example usage of formatMonth to format only the month name.

```typescript
import { formatMonth } from 'react-calendar/dist/shared/dateFormatter';

formatMonth('en-US', new Date(2024, 0, 15));  // "January"
formatMonth('fr-FR', new Date(2024, 0, 15));  // "janvier"
```

--------------------------------

### formatMonthYear Usage

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Example usage of formatMonthYear to format month and year.

```typescript
import { formatMonthYear } from 'react-calendar/dist/shared/dateFormatter';

formatMonthYear('en-US', new Date(2024, 0, 15));  // "January 2024"
formatMonthYear('de-DE', new Date(2024, 0, 15));  // "Januar 2024"
```

--------------------------------

### Apply tileDisabled prop

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Example function for the tileDisabled prop to determine if a specific day should be disabled.

```javascript
({ activeStartDate, date, view }) => date.getDay() === 0
```

--------------------------------

### value prop examples

Source: https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/README.md

Sets the calendar value using a single date, an array of dates, or string representations.

```javascript
new Date()
```

```javascript
[new Date(2017, 0, 1), new Date(2017, 7, 1)]
```

```javascript
'2017-01-01'
```

```javascript
['2017-01-01', '2017-08-01']
```

--------------------------------

### Render Tile in MonthView

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/api-reference/tile-component.md

Example of how the Tile component is utilized within a view component like Days.tsx to render individual calendar days.

```typescript
<Tile
  activeStartDate={activeStartDate}
  date={dayDate}
  formatAbbr={formatLongDate}
  locale={locale}
  maxDate={maxDate}
  maxDateTransform={(d) => getDayEnd(d)}
  minDate={minDate}
  minDateTransform={(d) => getDayStart(d)}
  onClick={onClick}
  onMouseOver={onMouseOver}
  tileClassName={tileClassName}
  tileContent={tileContent}
  tileDisabled={tileDisabled}
  view="month"
>
  {formattedDay}
</Tile>
```

--------------------------------

### formatWeekday Usage

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Example usage of formatWeekday to format full weekday names.

```typescript
import { formatWeekday } from 'react-calendar/dist/shared/dateFormatter';

formatWeekday('en-US', new Date(2024, 0, 15));  // "Monday"
formatWeekday('fr-FR', new Date(2024, 0, 15));  // "lundi"
```

--------------------------------

### inputRef prop usage

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Examples of how to pass a ref to the main div rendered by the Calendar component using functions, createRef, or useRef.

```javascript
(ref) => { this.myCalendar = ref; }
```

```javascript
this.ref = createRef();
…
inputRef={this.ref}
```

```javascript
const ref = useRef();
…
inputRef={ref}
```

--------------------------------

### Apply tileClassName prop

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Examples of passing string, array, or function values to the tileClassName prop to apply custom CSS classes to calendar items.

```javascript
"class1 class2"
```

```javascript
["class1", "class2 class3"]
```

```javascript
({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null
```

--------------------------------

### Apply tileContent prop

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Examples of passing string, React element, or function values to the tileContent prop to render custom content inside calendar items.

```javascript
"Sample"
```

```javascript
<TileContent />
```

```javascript
({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null
```

--------------------------------

### Add custom content with tileContent

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/api-reference/calendar-component.md

Use the tileContent prop to inject custom elements into calendar tiles. This example highlights the 15th day of the month in the month view.

```typescript
<Calendar
  tileContent={({ date, view }) => {
    if (view === 'month' && date.getDate() === 15) {
      return <div className="highlight">Special Day</div>;
    }
    return null;
  }}
  value={value}
  onChange={onChange}
/>
```

--------------------------------

### Define Date Transform Functions

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/api-reference/tile-component.md

Examples of minDateTransform and maxDateTransform functions used to convert dates to the start or end boundaries of specific calendar periods.

```typescript
// For month view (day tiles)
minDateTransform = (d) => getDayStart(d)   // Start of day
maxDateTransform = (d) => getDayEnd(d)     // End of day

// For year view (month tiles)
minDateTransform = (d) => getMonthStart(d)  // Start of month
maxDateTransform = (d) => getMonthEnd(d)    // End of month

// For decade view (year tiles)
minDateTransform = (d) => getYearStart(d)   // Start of year
maxDateTransform = (d) => getYearEnd(d)     // End of year
```

--------------------------------

### Project File Structure

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/INDEX.md

A visual representation of the packages/react-calendar directory structure, highlighting key source files and their approximate sizes.

```text
packages/react-calendar/
├── src/
│   ├── Calendar.tsx               (1150 lines)
│   ├── MonthView.tsx              (113 lines)
│   ├── YearView.tsx               (14 lines)
│   ├── DecadeView.tsx             (14 lines)
│   ├── CenturyView.tsx            (14 lines)
│   ├── Tile.tsx                   (128 lines)
│   ├── Calendar/
│   │   └── Navigation.tsx         (250+ lines)
│   └── shared/
│       ├── types.ts               (65 lines)
│       ├── dateFormatter.ts       (84 lines)
│       ├── dates.ts               (150+ lines)
│       ├── utils.ts               (155 lines)
│       └── const.ts               (58 lines)
└── package.json
```

--------------------------------

### Package.json Configuration

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/module-structure.md

Configuration settings for module and CommonJS environments.

```json
{
  "type": "module",
  "main": "./dist/index.js",
  "source": "./src/index.ts",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": "./dist/index.js",
    "./*": "./*"
  }
}
```

--------------------------------

### Recommended Main Package Import

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/module-structure.md

The standard way to import the Calendar component and its sub-components for most use cases.

```typescript
// Best for most use cases
import Calendar, { MonthView, YearView, Navigation } from 'react-calendar';
import type { CalendarProps, Value } from 'react-calendar';
```

--------------------------------

### formatYear Usage

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Example usage of formatYear to format only the year.

```typescript
import { formatYear } from 'react-calendar/dist/shared/dateFormatter';

formatYear('en-US', new Date(2024, 0, 15));  // "2024"
```

--------------------------------

### formatDay Usage

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Example usage of formatDay to format only the day of the month.

```typescript
import { formatDay } from 'react-calendar/dist/shared/dateFormatter';

formatDay('en-US', new Date(2024, 0, 15));  // "15"
```

--------------------------------

### Import Navigation Component

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/API-INDEX.md

Shows the two ways to import the Navigation component.

```typescript
import { Navigation } from 'react-calendar';
// or
import Navigation from 'react-calendar/dist/Calendar/Navigation';
```

--------------------------------

### formatShortWeekday Usage

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Example usage of formatShortWeekday to format abbreviated weekday names.

```typescript
import { formatShortWeekday } from 'react-calendar/dist/shared/dateFormatter';

formatShortWeekday('en-US', new Date(2024, 0, 15)); // "Mon"
formatShortWeekday('es-ES', new Date(2024, 0, 15)); // "lun"
```

--------------------------------

### isValueWithinRange usage example

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Demonstrates checking if a specific date is within a provided range.

```typescript
import { isValueWithinRange } from 'react-calendar/dist/shared/utils';

const date = new Date(2024, 0, 15);
const start = new Date(2024, 0, 1);
const end = new Date(2024, 0, 31);

isValueWithinRange(date, [start, end]);  // true
```

--------------------------------

### Import MonthView Component

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/API-INDEX.md

Shows the two ways to import the MonthView component.

```typescript
import { MonthView } from 'react-calendar';
// or
import MonthView from 'react-calendar/dist/MonthView';
```

--------------------------------

### formatLongDate Usage

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

Example usage of formatLongDate to format dates with long month names.

```typescript
import { formatLongDate } from 'react-calendar/dist/shared/dateFormatter';

formatLongDate('en-US', new Date(2024, 0, 15));  // "January 15, 2024"
formatLongDate('es-ES', new Date(2024, 0, 15));  // "15 de enero de 2024"
```

--------------------------------

### Import CSS styles

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/configuration-guide.md

Import the default stylesheet to ensure the calendar renders correctly.

```typescript
import 'react-calendar/dist/Calendar.css';
```

--------------------------------

### Import CenturyView Component

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/API-INDEX.md

Shows the two ways to import the CenturyView component.

```typescript
import { CenturyView } from 'react-calendar';
// or
import CenturyView from 'react-calendar/dist/CenturyView';
```

--------------------------------

### File Distribution

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/module-structure.md

The directory structure of the npm package distribution.

```text
react-calendar/
├── dist/
│   ├── index.js (compiled component)
│   ├── index.d.ts (type definitions)
│   ├── Calendar.js
│   ├── Calendar.css
│   ├── MonthView.js
│   ├── YearView.js
│   ├── DecadeView.js
│   ├── CenturyView.js
│   ├── Tile.js
│   ├── Calendar/
│   │   ├── Navigation.js
│   │   └── ...
│   ├── MonthView/
│   │   ├── Days.js
│   │   ├── Weekdays.js
│   │   └── ...
│   └── shared/
│       ├── dateFormatter.js
│       ├── dates.js
│       ├── types.d.ts
│       └── ...
├── src/
│   └── [TypeScript sources]
└── package.json
```

--------------------------------

### Advanced Calendar Configuration

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/api-reference/calendar-component.md

Illustrates advanced features including min/max date constraints, view management, week number display, and custom tile disabling logic.

```typescript
import { useState } from 'react';
import Calendar from 'react-calendar';

type ValuePiece = Date | null;
type Value = ValuePiece | [ValuePiece, ValuePiece];

export function AdvancedCalendar() {
  const [date, setDate] = useState<Value>(new Date());
  const [view, setView] = useState<'month' | 'year' | 'decade' | 'century'>('month');

  const today = new Date();
  const nextYear = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate());

  return (
    <Calendar
      maxDate={nextYear}
      maxDetail="year"
      minDate={today}
      minDetail="month"
      onChange={setDate}
      onViewChange={({ view: nextView }) => setView(nextView)}
      selectRange={false}
      showWeekNumbers
      tileDisabled={({ date: tileDate }) => {
        // Disable weekends
        return tileDate.getDay() === 0 || tileDate.getDay() === 6;
      }}
      value={date}
      view={view}
    />
  );
}
```

--------------------------------

### Minimal Calendar Configuration

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/configuration-guide.md

A basic implementation of the Calendar component using the onChange and value props.

```typescript
import Calendar from 'react-calendar';

function App() {
  const [date, setDate] = useState<Date | null>(new Date());

  return <Calendar onChange={setDate} value={date} />;
}
```

--------------------------------

### Configure prevAriaLabel prop

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Sets the aria-label attribute for the 'previous' button.

```text
"Previous"
```

--------------------------------

### Common Import Patterns for React-calendar

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/API-INDEX.md

Demonstrates standard ways to import the main Calendar component, specific view components, TypeScript types, CSS styles, and internal utilities.

```typescript
// Main component
import Calendar from 'react-calendar';

// Multiple components
import Calendar, { MonthView, YearView } from 'react-calendar';

// Specific component
import MonthView from 'react-calendar/dist/MonthView';

// Types
import type { CalendarProps, Value, View } from 'react-calendar';

// Styles
import 'react-calendar/dist/Calendar.css';

// Utilities (internal - not recommended)
import { formatDate } from 'react-calendar/dist/shared/dateFormatter';
```

--------------------------------

### useDateFormatter custom hook

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/date-utilities.md

A custom React hook that wraps date formatting functions with a specific locale. Includes usage example for formatting a date.

```typescript
import { useState } from 'react';
import { formatDate, formatMonthYear, formatWeekday } from 'react-calendar/dist/shared/dateFormatter';

export function useDateFormatter(locale?: string) {
  return {
    formatDate: (date: Date) => formatDate(locale, date),
    formatMonthYear: (date: Date) => formatMonthYear(locale, date),
    formatWeekday: (date: Date) => formatWeekday(locale, date),
  };
}

// Usage
const formatter = useDateFormatter('en-US');
console.log(formatter.formatDate(new Date(2024, 0, 15)));  // "1/15/2024"
```

--------------------------------

### Import DecadeView Component

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/API-INDEX.md

Shows the two ways to import the DecadeView component.

```typescript
import { DecadeView } from 'react-calendar';
// or
import DecadeView from 'react-calendar/dist/DecadeView';
```

--------------------------------

### Configure prevLabel prop

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Sets the content of the 'previous' button. Can be a string or a React element.

```jsx
"‹"
```

```jsx
<PreviousIcon />
```

--------------------------------

### Configure selectRange prop

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Enables range selection mode, returning an array of two dates.

```text
true
```

--------------------------------

### Handle onActiveStartDateChange event

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Callback function triggered when the user navigates between views. The action parameter indicates the navigation type.

```javascript
({ action, activeStartDate, value, view }) => alert('Changed view to: ', activeStartDate, view)
```

--------------------------------

### Import YearView Component

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/API-INDEX.md

Shows the two ways to import the YearView component.

```typescript
import { YearView } from 'react-calendar';
// or
import YearView from 'react-calendar/dist/YearView';
```

--------------------------------

### Display a simple calendar

Source: https://github.com/wojtekmaj/react-calendar/wiki/Recipes

A basic implementation of the Calendar component using React state to manage the selected date.

```js
import React, { useState } from 'react';
import Calendar from 'react-calendar';

function MyApp() {
  const [value, setValue] = useState(new Date());

  function onChange(nextValue) {
    setValue(nextValue);
  }

  return (
    <Calendar
      onChange={onChange}
      value={value}
    />
  );
}
```

--------------------------------

### Peer Dependencies

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/module-structure.md

Required React and React DOM versions for the package.

```json
{
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
```

--------------------------------

### Main Entry Point index.ts

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/module-structure.md

The primary entry point for the package, exporting the main Calendar component, specific views, and relevant TypeScript types.

```typescript
// packages/react-calendar/src/index.ts

import Navigation from './Calendar/Navigation.js';
import Calendar from './Calendar.js';
import CenturyView from './CenturyView.js';
import DecadeView from './DecadeView.js';
import MonthView from './MonthView.js';
import YearView from './YearView.js';

export type { CalendarProps } from './Calendar.js';
export type {
  CalendarType,
  NavigationLabelFunc,
  OnArgs,
  OnClickFunc,
  OnClickWeekNumberFunc,
  TileArgs,
  TileClassNameFunc,
  TileContentFunc,
  TileDisabledFunc,
} from './shared/types.js';

export {
  Calendar,
  CenturyView,
  DecadeView,
  MonthView,
  Navigation,
  YearView,
};

export default Calendar;
```

--------------------------------

### Configure returnValue prop

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Determines the date format passed to onChange and onClick functions.

```text
"range"
```

--------------------------------

### Set defaultView prop

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Determines the initial calendar view. Options include 'month', 'year', 'decade', or 'century'. Use view for controlled components.

```javascript
"year"
```

--------------------------------

### Configure nextLabel prop

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Sets the content of the next button on the navigation pane. Can be a string or a React element.

```jsx
"›"
```

```jsx
<NextIcon />
```

--------------------------------

### Configure ARIA Labels and Live Regions

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/configuration-guide.md

Use these props to improve accessibility by providing descriptive labels for navigation elements and setting live region behavior.

```typescript
<Calendar
  navigationAriaLabel="Choose a date for the appointment"
  navigationAriaLive="polite"
  prevAriaLabel="Previous month"
  nextAriaLabel="Next month"
  prev2AriaLabel="Previous year"
  next2AriaLabel="Next year"
/>
```

--------------------------------

### goToRangeStartOnSelect prop

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Determines whether to navigate to the beginning of the range when selecting the end of the range.

```javascript
true
```

```javascript
false
```

--------------------------------

### View-Aware Type Narrowing

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/types.md

Demonstrates how to handle logic based on the current calendar view.

```typescript
function MyCalendar({ view }: { view: View }) {
  if (view === 'month') {
    // Handle month-specific logic
  } else if (view === 'year') {
    // Handle year-specific logic
  }
}
```

--------------------------------

### Configure prev2Label prop

Source: https://github.com/wojtekmaj/react-calendar/blob/main/README.md

Sets the content of the 'previous on higher level' button. Can be a string or a React element.

```jsx
"«"
```

```jsx
<DoublePreviousIcon />
```

--------------------------------

### Utility Functions

Source: https://github.com/wojtekmaj/react-calendar/blob/main/_autodocs/API-INDEX.md

General purpose utility functions for range checking and CSS class generation.

```APIDOC
## Utility Functions

- `between(value, min?, max?)`: Clamp value between min/max.
- `isValueWithinRange(value, range)`: Check if value in range.
- `isRangeWithinRange(greaterRange, smallerRange)`: Check if range contains range.
- `doRangesOverlap(range1, range2)`: Check if ranges overlap.
- `getTileClasses(args)`: Get CSS classes for tile.
```
Tokens:
Raw