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 |

Reporting Issues

If you find an issue, please report it along with any relevant details to reproduce it. Its is a great help to improving the packages

Future Release

• Date Range Selection
• Horizontal Scroll
• Customized Month To Render

Dependencies

React Infinite Calendar has very few dependencies. It relies on moment.js,prop-types. It also has the following peerDependencies: react.

Author

[Kawal Jain]

License

reactjs-infinite-calendar is available under the MIT License.