Calendar
The Calendar component allows the user to select a date or range of dates in a simple, straitforward and flexible UI thats based off of ReactDayPicker. It extends the properties of the ReactDayPicker component. Refer to the documentation site for a complete reference of the component's API.
import React, { useState } from "react";
import { Calendar } from "@nimbus-ds/patterns";
import { Box, Text } from "@nimbus-ds/components";
import { format } from "date-fns";
const Example: React.FC = () => {
const today = new Date();
const [selectedDate, setSelectedDate] = useState<Date | undefined>();
const [month, setMonth] = useState<Date>(today);
return (
<Box
width="100%"
display="flex"
alignItems="center"
justifyContent="center"
flexDirection="column"
gap="2"
>
<Calendar
mode="single"
showOutsideDays
selected={selectedDate}
onSelect={setSelectedDate}
toDate={today}
month={month}
onMonthChange={setMonth}
containerProps={{
height: "100%",
overflowY: "auto",
maxHeight: "400px",
}}
/>
{selectedDate ? (
<Text>Selected date is {format(selectedDate, "dd-MM-yyyy")}</Text>
) : (
<Text>Select a date</Text>
)}
</Box>
);
};
export default Example;
Instale o componente via terminal.
npm install @nimbus-ds/calendar
Additional props are passed to the <Calendar> element. See div docs for a list of props accepted by the <Calendar> element.
Calendar
Name | Type | Default | Description |
---|---|---|---|
hideBorder | boolean | Ability to hide the border of the calendar container. Useful for including the calendar inside other components such as Modal, Popover or Card. | |
stickyWeekdays | boolean | If true will stick the weekday indicators to the top of the component. Useful for when creating scrolling calendars with a display of >1 months. Only works when property numberOfMonths is set to a number greater than 1. | |
fullWidthDays | boolean | If true the buttons for individual days will span 100% of available width as opposed to the default state where they have a fixed width. Useful for when creating calendars inside containers that are wider than default. |