React Booking Calendar
View booking on a calendar timeline
Demo
Sandbox
Installation
Using npm:
npm install @impulsiveweb/react-booking-calendar --save
Using bower:
bower install @impulsiveweb/react-booking-calendar
Using yarn:
npm add @impulsiveweb/react-booking-calendar
Example
import { BookingSlotCalendar } from "@impulsiveweb/react-booking-calendar";
import "@impulsiveweb/react-booking-calendar/index.css";
const CalendarDemoComponent = ({}) => {
const bookingSampleData = [{"id":1,"startDate":"2022-09-09","endDate":"2022-09-19","color":"#b3dcea"},{"id":2,"startDate":"2022-09-07","endDate":"2022-09-17","color":"#13c2ac"},{"id":3,"startDate":"2022-10-05","endDate":"2022-10-15","color":"#a2caae"},{"id":4,"startDate":"2022-09-11","endDate":"2022-09-21","color":"#91a3e5"},{"id":5,"startDate":"2022-09-03","endDate":"2022-09-04","color":"#c9dba1"},{"id":6,"startDate":"2022-09-15","endDate":"2022-09-17","color":"#1499ea"},{"id":7,"startDate":"2022-10-07","endDate":"2022-10-10","color":"#679eeb"},{"id":8,"startDate":"2022-10-05","endDate":"2022-10-13","color":"#a6d4b5"},{"id":9,"startDate":"2022-09-05","endDate":"2022-09-16","color":"#f8c1a2"},{"id":10,"startDate":"2022-10-01","endDate":"2022-10-14","color":"#1ddebf"}];
return (
<div className={"demo"}>
<BookingSlotCalendar
slots={bookingSampleData}
activeMonth={new Date().getMonth() + 1}
activeYear={new Date().getFullYear()}
hideOtherMonth={true}
onMonthChange={(year, month) => {
// Do your stuff here
}}
onSlotClick={(slot) => {
// Do your stuff here
}}
/>
</div>
);
};
export default CalendarDemoComponent;
Callback
onMonthChange
Event called on click of Next and Previous botton. Values - month, year
onSlotClick
Event called on click of booking slot on calendar. Values - Booking Slot Data like {"id":1,"startDate":"2022-09-09","endDate":"2022-09-19","color":"#b3dcea"}
Developed under Impulsive Web Pvt Ltd. Impulsive Web Pvt Ltd
For further details visit us at: Impulsive Wev Private Limited