Calendar

1.1.0

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

NameTypeDefaultDescription

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.