Calendar_Deprecated

A calendar component that allows users to select a single date.

This version of component is deprecated. We will present a new <Calendar /> component soon.

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Calendar_Deprecated } from '@adaptavant/eds-core';

Default​

The Calendar component accepts a value and onValueChange prop, allowing you to control its state.

const [date, setDate] = React.useState(new Date());

return (
  <Calendar_Deprecated
    onValueChange={setDate}
    value={date}
  />
);
View in Playroom

Disabled days​

You can disable dates from being selected by using the isDateUnavailable prop, which takes a function that receives a date and returns true if that value should be disabled.

const [date, setDate] = React.useState(new Date());

function isWeekend(date) {
  const day = date.getDay();
  return day === 0 || day === 6;
}

return (
  <Calendar_Deprecated
    isDateUnavailable={isWeekend}
    onValueChange={setDate}
    value={date}
  />
);
View in Playroom

First day of week​

Use the weekStartsOn prop to change the first day of the week:

const [date, setDate] = React.useState(new Date());

return (
  <Calendar_Deprecated
    onValueChange={setDate}
    value={date}
    weekStartsOn={1}
  />
);
View in Playroom

With Container​

Calendar can be wrapped in a fully customised container.

const [date, setDate] = React.useState(new Date());

return (
  <Stack className="rounded-12px inline-flex gap-2 border-tertiary p-3 shadow-30">
    <Calendar_Deprecated
      onValueChange={setDate}
      value={date}
    />
  </Stack>
);
View in Playroom

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.