@impulsiveweb/react-booking-calendar

React Booking Calendar

View booking on a calendar timeline

Demo

View Demo

Sandbox

Play on 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