@demark-pro/react-booking-calendar
Version:
A responsive customizable React Booking calendar with overbooking protection
55 lines (40 loc) • 1.42 kB
Markdown
<img width="394" alt="React Booking Calendar screenshot" src="https://github.com/demark-pro/react-booking-calendar/assets/87781788/44d84296-c404-4a40-8f5f-1c4f3530bbe4">
React Booking Calendar is a React library for monthly and scrollable booking
calendars with built-in overbooking protection.
Documentation and examples:
[](https://demark-pro.github.io/react-booking-calendar/)
```bash
npm install @demark-pro/react-booking-calendar
```
`react` and `react-dom` are peer dependencies.
```tsx
import { useState } from "react";
import { Calendar } from "@demark-pro/react-booking-calendar";
import "@demark-pro/react-booking-calendar/dist/react-booking-calendar.css";
export function BookingCalendar() {
const [selected, setSelected] = useState([null, null]);
return (
<Calendar
selected={selected}
reserved={[
{
startDate: new Date(2030, 4, 12, 14, 0),
endDate: new Date(2030, 4, 14, 10, 0),
},
]}
onChange={setSelected}
/>
);
}
```
- `Calendar`
- `ScrollableCalendar`
- `getProtectedTime`
- `getProtectedInterval`
For styling, custom components, and full API reference, use the documentation
site:
[](https://demark-pro.github.io/react-booking-calendar/)