React Availability Calendar
npm install reactjs-availability-calendar[![NPM version][npm-image]][npm-url]
![npm-typescript]
[![License][github-license]][github-license-url]
Lightweight Availability/Bookings Calendar Built with React & TypeScript

!ReactJS-Availability-Calendar
``bash`
npm install reactjs-availability-calendar
or
`bash`
yarn add reactjs-availability-calendar
Add Calendar to your component:
`js
import React from 'react'
import Calendar from 'reactjs-availability-calendar'
export default function App() {
const bookings = [
{
from: new Date('2022-07-03'),
to: new Date('2022-07-30'),
middayCheckout: true,
},
{
from: '2022-04-08',
to: '2022-04-13',
middayCheckout: true,
},
{
from: '2022-09-03T19:20:35.593Z',
to: '2022-09-22T19:20:35.593Z',
middayCheckout: false,
},
]
return (
)
}
`
Please copy and self host the default CSS linked below.
Default CSS
Minified Default CSS
`
`
Type: Array of Bookings\
Default: []\
Example:
``
[{
from: '2022-04-08T00:00:00.000Z',
to: '2022-04-10T00:00:00.000Z',
middayCheckout: true,
}]Dates` should be in valid ISO 8601 format. Learn more\
Notes: For best results,
Description: Dates to be shown as unavailable on the calendar
Type: Number\
Default: 12\
Options: 12 | 4 | 2 | 1\
Description: Number of Months to show
Type: Bool\
Default: true\
Description: Render active Calendar Year
Type: Bool\
Default: true\
Description: Render navigation buttons to move forward and previous Calendar Years
Type: Bool\
Default: true\
Description: Render Key for the different Calendar States
[npm-url]: https://www.npmjs.com/package/reactjs-availability-calendar
[npm-image]: https://img.shields.io/npm/v/reactjs-availability-calendar
[github-license]: https://img.shields.io/github/license/simpletut/reactjs-availability-calendar
[github-license-url]: https://github.com/simpletut/reactjs-availability-calendar/blob/main/LICENSE
[npm-typescript]: https://img.shields.io/npm/types/reactjs-availability-calendar