- Notifications
You must be signed in to change notification settings - Fork5
Lightweight Availability/Bookings Calendar Built with React & TypeScript
License
simpletut/reactjs-availability-calendar
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Lightweight Availability/Bookings Calendar Built with React & TypeScript
npm install reactjs-availability-calendar
or
yarn add reactjs-availability-calendar
AddCalendar to your component:
importReactfrom'react'importCalendarfrom'reactjs-availability-calendar'exportdefaultfunctionApp(){constbookings=[{from:newDate('2022-07-03'),to:newDate('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(<Calendarbookings={bookings}/>)}
Please copy and self host the default CSS linked below.
Default CSS
Minified Default CSS
<link href="path/to/your/styles.css" rel="stylesheet">Type: Array of Bookings
Default: []
Example:
[{ from: '2022-04-08T00:00:00.000Z', to: '2022-04-10T00:00:00.000Z', middayCheckout: true,}]Notes: For best results,Dates should be in valid ISO 8601 format.Learn more
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
About
Lightweight Availability/Bookings Calendar Built with React & TypeScript
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.