Calendar

@coinbase/cds-web@8.34.1

Calendar is a flexible, accessible date grid component for selecting dates, supporting keyboard navigation, disabled/highlighted dates, and custom rendering.

Import

import { Calendar } from '@coinbase/cds-web/dates/Calendar'

SourceView source codeStorybookView Storybook

---

Related components

• DatePicker

---

󰏖

View as Markdown

Basic usage

Loading...

󰙡

Live Code

() => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  return <Calendar selectedDate={selectedDate} onPressDate={setSelectedDate} />;
};

Disabled Dates

Loading...

󰙡

Live Code

() => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  // Disable today and tomorrow
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate() + 1);
  return (
    <Calendar
      selectedDate={selectedDate}
      onPressDate={setSelectedDate}
      disabledDates={[today, tomorrow]}
      disabledDateError="This date is not selectable."
    />
  );
};

Highlighted Dates

Loading...

󰙡

Live Code

() => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  // Highlight the 10th, 15th, and 20th of the current month
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth();
  const highlightedDates = [
    new Date(year, month, 10),
    new Date(year, month, 15),
    new Date(year, month, 20),
  ];
  return (
    <Calendar
      selectedDate={selectedDate}
      onPressDate={setSelectedDate}
      highlightedDates={highlightedDates}
    />
  );
};