Skip to main content

​
Overview

The Calendar component provides date selection with support for single date and date range selection modes.

​
Basic Usage

import { Calendar } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function CalendarBasic() {
  const [date, setDate] = useState<Date>();

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

​
Date Range

import { Calendar } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function CalendarRange() {
  const [range, setRange] = useState<{ from?: Date; to?: Date }>();

  return (
    <Calendar
      mode="range"
      selected={range}
      onSelect={setRange}
    />
  );
}

import { Calendar } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function CalendarWithFooter() {
  const [date, setDate] = useState<Date>();

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      showFooter={true}
      onCancel={() => console.log('Cancelled')}
      onApply={() => console.log('Applied')}
    />
  );
}

​
Props