Install

$ npm install js-calendar-strip
# OR
$ yarn add js-calendar-strip

Usage

The js-calendar-strip package is a versatile calendar strip component designed for seamless integration into web applications. It offers a compact, intuitive display of dates with easily accessible navigation controls. Developers can effortlessly generate and customize date ranges, making it an ideal solution for applications requiring date-based interactions.

Key Features:

• Calendar Strip Display: Presents a visually intuitive strip of dates for easy reference.
• Next and Previous Buttons: Allows users to navigate forward and backward to view different date ranges.
• Customization Options: Offers a range of styling and design options for tailoring the calendar strip to suit specific application aesthetics.
• Date Disabling: Provides the functionality to selectively disable specific dates, offering fine-grained control over user interactions.

import React, { useState } from 'react';
import JsCalendarStrip from 'js-calendar-strip';

const Example = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());

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

  return (
    <div>
      <JsCalendarStrip
        selectedDate={selectedDate}
        onDateChange={handleSelectDate}
      />
    </div>
  );
};

Props

| Prop | Description | Type | Default | | ----------------------------- | ------------------------------------------------------------------------------------- | -------- | ------------ | | selectedDate | Holds the currently chosen date . | | Today's Date | | onDateChange | Callback function triggered when a user selects a new date . | Function | | | startDate | Sets the initial date from where the calendar needs to begin . | Date | | | endDate | Final date visible in the calendar . | Date | | disableDates | Allows the inclusion of a list of dates that are not selectable within the calendar . | Array | | style | Style for the main container of the calendar . | | | headerStyle | Style for the header text of the calendar . | | | dateNumberStyle | Style for the date number of the calendar strip . | | | dayNameStyle | Style for the day name of the calendar strip . | | | selectedDayNameStyle | Style for the selected day name of the calendar strip . | | | selectedDateNumberStyle | Style for the selected date number of the calendar strip . | | | selectedDateStyle | Style for the selected date of the calendar strip . | | | | hoverStyle | Hover Style for the calendar strip . | | | | disableStyle | Style for the disable date of the calendar strip . | |

License

Licensed under the MIT License.