Calendar
A calendar component that allows users to select a single date.
Available from eds-core/1.11.0
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { Calendar } from '@adaptavant/eds-core';
Default
The Calendar component accepts value and onValueChange props, allowing you to control its state.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
const [selectedDate, setSelectedDate] = React.useState();
return (
<Stack className="gap-4">
<Calendar onValueChange={setSelectedDate} value={selectedDate} />
<Text>
{selectedDate
? `You selected ${selectedDate.toDateString()}.`
: 'Please pick a day.'}
</Text>
</Stack>
);
Size
Customise the size of the Calendar via the size prop.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
<Box className="flex gap-5">
{/* Small */}
<Calendar size="small" />
{/* Standard */}
<Calendar />
</Box>
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. In this example, the weekends and today's date are disabled which prevents users from selecting these dates.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
function isWeekend(date) {
const day = date.getDay();
return day === 0 || day === 6;
}
function isToday(date) {
const today = new Date();
today.setHours(0, 0, 0, 0);
date.setHours(0, 0, 0, 0);
return today.getTime() === date.getTime();
}
const [selectedDate, setSelectedDate] = React.useState();
return (
<Stack className="gap-4">
<Calendar
isDateUnavailable={(date) => isWeekend(date) || isToday(date)}
onValueChange={setSelectedDate}
value={selectedDate}
/>
<Text>
{selectedDate
? `You selected ${selectedDate.toDateString()}.`
: 'Please pick a day.'}
</Text>
</Stack>
);
First day of week
Use the weekStartsOn prop to change the first day of the week. Accepts a value from 0 (Sunday) to 6 (Saturday).
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
<Stack className="gap-4">
<Calendar weekStartsOn={1} /> {/* Monday */}
</Stack>
Min and Max value
Use the minValue and maxValue props to define a specific date range for the calendar. This limits users to selecting dates only within the designated range and prevents navigation to months outside the specified months.
Note: The below calendar restricts date selection to the current year using minValue and maxValue props. Users cannot navigate to months outside this range, ensuring the dates from other years are disabled.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
function startOfMonth(date) {
const start = new Date(date.getFullYear(), date.getMonth(), 1);
return start;
}
function endOfMonth(date) {
const end = new Date(date.getFullYear(), date.getMonth() + 1, 0);
return end;
}
const [selectedDate, setSelectedDate] = React.useState();
return (
<Stack className="gap-4">
<Calendar
maxValue={endOfMonth(new Date(new Date().getFullYear(),11))} // December, Current Year
minValue={startOfMonth(new Date(new Date().getFullYear(),0))} // January, Current Year
onValueChange={(date) => {
setSelectedDate(date);
}}
value={selectedDate}
/>
<Text>
{selectedDate
? `You selected ${selectedDate.toDateString()}`
: 'Please pick a day.'}
</Text>
</Stack>
);
Without Today Button
Set hasTodayButton to show/hide the today date button. By default, it is set to true.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
const [selectedDate, setSelectedDate] = React.useState();
return (
<Stack className="gap-4">
<Calendar onValueChange={setSelectedDate} value={selectedDate} hasTodayButton={false} />
<Text>
{selectedDate
? `You selected ${selectedDate.toDateString()}.`
: 'Please pick a day.'}
</Text>
</Stack>
);
Time zones
Use the tzModifier prop to configure the calendar to a specific timezone
When setting a default selected date, always use our getTZAdjustedDate helper, which ensures that the provided date is correctly aligned with the timezone you’ve chosen for the calendar.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
const tzModifier = 'America/Los_Angeles';
const tzAdjustedTodayDate = getTZAdjustedDate(new Date(), tzModifier);
const [selectedDate, setSelectedDate] = React.useState(tzAdjustedTodayDate);
return (
<Stack className="gap-2">
<Calendar
onValueChange={(date) => {
if (date) {
setSelectedDate(date);
}
}}
tzModifier={tzModifier}
value={selectedDate}
/>
</Stack>
);
API Reference
Calendar
| Prop | Type | Description | Default |
|---|---|---|---|
copyLabels? | object | Calendar copy labels for accessibility, tooltips and localization. Use this to provide translated or custom text for various calendar elements. | _ |
copyLabels.disabledDayLabel? | string | Aria label and tooltip content for the days that are not available. | No availability |
copyLabels.disabledMonthLabel? | string | Aria label and tooltip content for the months that are not available. | No availability |
copyLabels.goTodayLabel? | string | Aria label and tooltip content for the button that navigates to today. | Today |
copyLabels.nextMonthLabel? | string | Aria label and tooltip content for the button that navigates to the next month. | Next month |
copyLabels.nextYearLabel? | string | Aria label and tooltip content for the button that navigates to the next year. | Next year |
copyLabels.previousMonthLabel? | string | Aria label and tooltip content for the button that navigates to the previous month. | Previous month |
copyLabels.previousYearLabel? | string | Aria label and tooltip content for the button that navigates to the previous year. | Previous year |
hasMonthPicker? | boolean | Determines whether Calendar has month grid or not. | true |
isDateUnavailable? | function | A callback function invoked for each date in the calendar. | |
| _ | |||
localeCode? | 'ar' | 'bg' | 'cs' | 'da' | 'de' | 'el' | 'en' | 'es' | 'et' | 'fi' | 'fr' | 'he' | 'hr' | 'hu' | 'is' | 'it' | 'ja' | 'ko' | 'lt' | 'lv' | 'nl' | 'no' | 'pl' | 'pt' | 'ro' | 'ru' | 'sl' | 'sq' | 'sr' | 'sv' | 'tr' | 'uk' | 'zh' | Locale code (ISO 639-1) for date localization. | en |
maxValue? | Date | The maximum allowed date that a user may select. | _ |
minValue? | Date | The minimum allowed date that a user may select. | _ |
onValueChange? | function | Handler that is called when the value changes. | _ |
onVisibleMonthChange? | function | Handler that is called when the currently visible month changes. | _ |
onVisibleYearChange? | function | Handler that is called when the currently visible year changes. | _ |
size? | small | standard | The size of the calendar. | standard |
tzModifier? | string | The timezone modifier for the calendar to consider the "today" date. | |
Intl.DateTimeFormat().resolvedOptions().timeZone | |||
value? | Date | The current value (controlled). | _ |
visibleMonth? | Date | Controls the currently focused date within the calendar. | _ |
weekStartsOn? | 0 | 1 | 2 | 3 | 4 | 5 | 6 | The index of the first day of the week. Accepts a value from 0 (Sunday) to 6 (Saturday). Overrides the locale's default setting. | _ |
hasTodayButton? | boolean | Show/Hide the today button in the calendar. | true |
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.
Calendar parts
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
<Stack className="gap-4">
<Calendar
classNames={{
caption: 'border-2 bg-caution',
captionWrapper: 'rounded-none bg-caution-secondary',
captionLabel: 'font-mono',
captionYear: 'font-mono',
captionIconEnd: 'bg-neutral-tertiary rounded-full',
navButtonNext: 'bg-neutral-tertiary rounded-none hover:scale-110',
navButtonPrevious: 'bg-neutral-tertiary rounded-none hover:scale-110',
head: 'bg-positive',
headRow: 'p-2 m-2 bg-positive-hover',
headCell: 'bg-positive-secondary',
tableBody: 'border mt-2',
headCellContent: 'font-mono text-positive',
nav: 'p-1 bg-neutral-tertiary-hover',
monthGrid: 'border p-1',
table: 'border',
cellButton: 'hover:scale-125 bg-constant-black',
cellText: 'font-mono text-constant-white',
}}
/>
</Stack>
| Stylable Parts | Description |
|---|---|
| caption | The main caption area containing the month, year and navigation buttons. |
| captionIconEnd | Icon element placed at the end of the caption |
| captionLabel | The label that displays the name of the month in the caption |
| captionWrapper | A wrapper for the caption content, enclosing the caption icon, label, and year |
| captionYear | The element displaying the year in the caption |
| head | The table header row containing day names |
| headCell | The cell containing each day's name |
| headCellContent | The content within each headCell |
| headRow | The table row containing day names |
| monthGrid | The container holding all the month cells in the month view |
| nav | The navigation container for the navigation buttons that change months or years |
| navButtonNext | The button for navigating to the next month or year |
| navButtonPrevious | The button for navigating to the previous month or year |
| row | A row within the month view, containing a week's worth of day cells |
| table | The table containing the day names and day cells |
| tableBody | The table body containing rows of day cells |
| cell | Represents the single day cell or month cell |
| cellButton | The button inside day cell or month cell |
| cellText | The text inside day cell or month cell |