js-calendar-strip

Crafted with passion by Ravi

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.