Calendar

Usage

import { Calendar } from '@acronis-platform/shadcn-uikit';

Single date

Select a single date from the calendar.

July 2026

Selected date: 7/21/2026

View source

import * as React from 'react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';

export function CalendarSingle() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());

  return (
    <div>
      <div className="flex justify-center rounded-lg border p-4">
        <Calendar mode="single" selected={date} onSelect={setDate} />
      </div>
      {date && (
        <p className="mt-4 text-sm text-gray-600">
          Selected date: <strong>{date.toLocaleDateString()}</strong>
        </p>
      )}
    </div>
  );
}

Multiple dates

Select multiple individual dates.

July 2026

View source

import * as React from 'react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';

export function CalendarMultiple() {
  const [multipleDate, setMultipleDate] = React.useState<Date[]>([]);

  return (
    <div>
      <div className="flex justify-center rounded-lg border p-4">
        <Calendar
          mode="multiple"
          selected={multipleDate}
          onSelect={(dates) => setMultipleDate(dates ?? [])}
        />
      </div>
      {multipleDate.length > 0 && (
        <div className="mt-4">
          <p className="text-sm font-medium text-gray-700">Selected dates:</p>
          <div className="mt-2 flex flex-wrap gap-2">
            {multipleDate.map((d, i) => (
              <span
                key={i}
                className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-800"
              >
                {d.toLocaleDateString()}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

Date range

Select a range of dates with start and end.

July 2026

View source

import * as React from 'react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';

type DateRange = { from: Date | undefined; to?: Date | undefined };

export function CalendarRange() {
  const [rangeDate, setRangeDate] = React.useState<DateRange>({
    from: undefined,
    to: undefined,
  });

  return (
    <div>
      <div className="flex justify-center rounded-lg border p-4">
        <Calendar
          mode="range"
          selected={rangeDate}
          onSelect={(range) =>
            setRangeDate(range ?? { from: undefined, to: undefined })
          }
        />
      </div>
      {rangeDate.from && (
        <p className="mt-4 text-sm text-gray-600">
          Selected range:{' '}
          <strong>
            {rangeDate.from.toLocaleDateString()}
            {rangeDate.to && ` - ${rangeDate.to.toLocaleDateString()}`}
          </strong>
        </p>
      )}
    </div>
  );
}

Dual month

Display two months side by side for range selection.

July 2026

August 2026

View source

import * as React from 'react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';

type DateRange = { from: Date | undefined; to?: Date | undefined };

export function CalendarDualMonth() {
  const [rangeDate, setRangeDate] = React.useState<DateRange | undefined>({
    from: undefined,
    to: undefined,
  });

  return (
    <div className="flex justify-center rounded-lg border p-4">
      <Calendar
        mode="range"
        numberOfMonths={2}
        selected={rangeDate}
        onSelect={(range) =>
          setRangeDate(range || { from: undefined, to: undefined })
        }
      />
    </div>
  );
}

Navigate months and years using dropdown selectors.

July 2026

View source

import * as React from 'react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';

export function CalendarDropdown() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());

  return (
    <div className="flex justify-center rounded-lg border p-4">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        captionLayout="dropdown"
        startMonth={new Date(1900, 0)}
        endMonth={new Date(2100, 11)}
      />
    </div>
  );
}

Disabled dates

Specific dates or date ranges can be disabled.

July 2026

View source

import * as React from 'react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';

export function CalendarDisabled() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());

  return (
    <div className="flex justify-center rounded-lg border p-4">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        disabled={(date) => date < new Date()}
      />
    </div>
  );
}

Week numbers

Display ISO week numbers alongside the calendar.

July 2026

	Su	Mo	Tu	We	Th	Fr	Sa
27
28
29
30
31

View source

import * as React from 'react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';

export function CalendarWeekNumbers() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());

  return (
    <div className="flex justify-center rounded-lg border p-4">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        showWeekNumber
      />
    </div>
  );
}

Custom start month

Set the initial month the calendar displays.

January 1990

View source

import * as React from 'react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';

export function CalendarCustomStart() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());

  return (
    <div className="flex justify-center rounded-lg border p-4">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        defaultMonth={new Date(1990, 0)}
      />
    </div>
  );
}

Hide outside days

Hide days from adjacent months.

July 2026

View source

import * as React from 'react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';

export function CalendarNoOutside() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());

  return (
    <div className="flex justify-center rounded-lg border p-4">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        showOutsideDays={false}
      />
    </div>
  );
}

Fixed weeks

Always display six weeks per month for consistent height.

July 2026

View source

import * as React from 'react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';

export function CalendarFixedWeeks() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());

  return (
    <div className="flex justify-center rounded-lg border p-4">
      <Calendar mode="single" selected={date} onSelect={setDate} fixedWeeks />
    </div>
  );
}

Custom week start

Change which day of the week the calendar starts on.

July 2026

View source

import * as React from 'react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';

export function CalendarWeekStart() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());

  return (
    <div className="flex justify-center rounded-lg border p-4">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        weekStartsOn={0}
      />
    </div>
  );
}

Min and max dates

Restrict selectable dates to a specific range.

July 2026

Only dates within the next 3 months can be selected.

View source

import * as React from 'react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';

export function CalendarMinMax() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());

  return (
    <div>
      <div className="flex justify-center rounded-lg border p-4">
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
          disabled={[
            { before: new Date() },
            { after: new Date(new Date().setMonth(new Date().getMonth() + 3)) },
          ]}
        />
      </div>
      <p className="mt-4 text-sm text-gray-500">
        Only dates within the next 3 months can be selected.
      </p>
    </div>
  );
}

API Reference

Calendar

Prop

Type

The Calendar component also extends all react-day-picker DayPicker props (e.g., mode, selected, onSelect, disabled, numberOfMonths).

Edit on GitHub

Calendar

On this page