Reactjs-infinite-calendar NPM

ReactJs Infinite Calendar

ReactJs Infinite Calendar is a library for generating Infinite scroll with single and multiple select.

Features

Infinite scroll – Just keep scrollin', just keep scrollin'
Flexible – Min/max date, disabled dates, selected dates, etc.
Extensible – Multiple date selection, Single Date Selection
Customizeable – Customize Css according to your theme.
Mobile-friendly – Silky smooth scrolling on mobile

Getting Started

Installation

npm install reactjs-infinite-calendar

Usage

Step 1

npm install reactjs-infinite-calendar

Step 2

import InfinitCalendar from "reactjs-infinite-calendar";

Step 3

    <InfinitCalendar
        calendarHeight={600}
        calendarWidth={500}
         renderMinDate={new Date(2022, 0, 1)}
        renderMaxDate={new Date(2022, 11, 31)}
        inifinityScroll={true}
        isMultipleSelect={true}
        selectedDates={["02-09-2022"]}
        handleDateSelect={(date) => {
            console.log(date);
        }}
        disabledDates={["01-09-2022"]}
    />

Prop Types

Property	Type	Default	Description
calendarWidth	Number	`450`	Width of the calendar, in pixels
calendarHeight	Number	`600`	Height of the calendar, in pixels
renderMinDate	Date		The minimum month that can be scrolled to, If inifinite scroll is true, then its disabled all dates before renderMinDate
renderMaxDate	Date		The maximum date that can be scrolled to, If inifinite scroll is true, then its disabled all dates after renderMaxDate
visibleDate	Date		The date is to be visible when calendar initinal render
inifinityScroll	Bool	true	Allow calendar to scroll inifinte times.
isMultipleSelect	Bool	false	Allow to select multiple dates
disabledDates	Array	[]	Array of dates that should be disabled. For example: `["13-02-2022"]`
selectedDates	Array	[]	Array of dates that should be selected. for example "13-02-2022"
handleDateSelect	Function		Callback invoked after date is selected.
calendarContainerClass	String	''	Class thats add to the main container of Calendar.
calendarHeaderContainerClass	String	''	Class thats add to ther header container of Calendar.
calendarDateContainerClass	String	''	Class thats add to the date container of Calendar