@demark-pro/react-booking-calendar v3.0.5

Demo

Online demo!

Getting started

How can I use another locale?

If you want to use a different locale, you need to pass the dateFnsOptions parameter to the locale. Read more date-fns

Installation

Add React-Booking-Calendar to your project by executing npm i @demark-pro/react-booking-calendar --save.

Usage

Here's an example of usage with range:

import React, { useState } from "react";
import Calendar from "@demark-pro/react-booking-calendar";

const reserved = [
  {
    startDate: new Date(2023, 3, 22),
    endDate: new Date(2016, 4, 05),
  },
];

const MyBookingCalendar = () => {
  const [selectedDates, setSelectedDates] = useState([]);
  const handleChange = (e) => setSelectedDates(e);

  return (
    <Calendar
      selected={selectedDates}
      onChange={handleChange}
      onOverbook={(e, err) => alert(err)}
      components={{
        DayCellFooter: ({ innerProps }) => (
          <div {...innerProps}>My custom day footer</div>
        ),
      }}
      disabled={(date, state) => !state.isSameMonth}
      reserved={reserved}
      variant="events"
      dateFnsOptions={{ weekStartsOn: 1 }}
      range={true}
    />
  );
};

Styles

If you provide the classNamePrefix prop to Calendar, all inner elements will be given a className with the provided prefix.

InfiniteСalendar example

<InfiniteCalendar classNamePrefix="calendar" />

and CSS...

.calendar__dayCell-footer {
  color: "red";
}

Options

Utils

getFreeTimeofDate

(date: Date | number, reserved: Reserved[])

Returns free check-in and check-out time { startDate: Date, endDate: Date }