Calendar Component

The Calendar component is a React component designed to display a calendar interface for selecting dates. It allows you to choose a date within a specified range and provides options for confirming or canceling the selection.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the Calendar component in your React application, follow these steps:

npm install @bolttech/frontend-foundations @bolttech/molecules-calendar

or

yarn add @bolttech/frontend-foundations @bolttech/molecules-calendar

Once you have the required dependencies installed, you can start using the Calendar component in your React application.

Usage

The Calendar component provides a user-friendly calendar interface for date selection. It allows you to choose a date within a specified range. You can customize the locale, minimum and maximum dates, and more using its props.

To use the component, import it and include it in your JSX:

import React, { useState } from 'react';
import { Calendar } from '@bolttech/molecules-calendar';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations'; // You can import your Calendar component here

function App() {
  const [selectedDate, setSelectedDate] = useState('');

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Calendar value={selectedDate} onChange={handleDateChange} min="2023-01-01" max="2023-12-31" />
      <p>Selected Date: {selectedDate}</p>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Calendar component accepts the following props:

| Prop | Type | Description | | --------------------- | -------- | ---------------------------------------------------------------------------------------------------------- | | id | string | The ID attribute for the calendar container. | | dataTestId | string | The data-testid attribute for testing purposes. | | locale | string | The locale used for month and day names. Default is 'en'. | | showOtherMonthsDays | boolean | Boolean representing if the calendar should display the days of the previous and next month on empty slots | | min | string | The minimum selectable date (ISO 8601 format, e.g., '2023-01-01'). | | max | string | The maximum selectable date (ISO 8601 format, e.g., '2023-12-31'). | | value | string | The currently selected date (ISO 8601 format). | | cancel | string | The text for the cancel button. Default is 'Cancel'. | | confirm | string | The text for the confirm button. Default is 'Confirm'. | | onCancel | function | The callback function triggered when the cancel button is clicked. | | onChange | function | The callback function triggered when a date is selected. |

Example

Here's an example of using the Calendar component:

<Calendar value={selectedDate} onChange={handleDateChange} min="2023-01-01" max="2023-12-31" />

This will render a calendar interface with selectable dates between January 1, 2023, and December 31, 2023.

Contributing

Contributions to the Calendar component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.