React Booking Calendar

A responsive customizable React booking calendar.

DEMO

Installation

npm install --save react-booking-calendar

Usage

import React from 'react';
import BookingCalendar from 'react-booking-calendar';

const bookings = [
  new Date(2016, 7, 1),
  new Date(2016, 7, 2),
  new Date(2016, 7, 3),
  new Date(2016, 7, 9),
  new Date(2016, 7, 10),
  new Date(2016, 7, 11),
  new Date(2016, 7, 12),
];

const MyBookingCalendar = () => (
  <BookingCalendar bookings={bookings} />
);

Result:

Options

| Prop | Type | Default | Description | | :--------------- | :---------- | :------ | :----------------------------------------------------- | | bookings | array | [] | Dates that will be rendered on the calendar as booked. | | clickable | bool | false | Make days clickable. | | disableHistory | bool | false | Disable navigating before current month. | | selected | Date | today | Default selected day if clickable is set. |

Styling

CSS class taxonomy:

.booking-calendar {
  .header {
    .header-content {
      .icon-previous {}
      .icon-next {}
      .month-label {}
    }
  }

  .week {
    &.names {
      .day-box .day {}
    }

    .day-box .day {
      &.different-month {}
      &.selected {}
      &.today {}
      &.booked-day:before {}
      &.booked-night:after {}
    }
  }
}

Development

• Development server: npm start
• Continuously run tests on file changes: npm run watch-test
• Run tests: npm test
• Build: npm run build

Todos

• [ ] Add tests

Changelog

1.0.3

• Removed Bower dependencies

1.0.2

• Changed bookings prop type definition
• Fixed header vertical positioning

1.0.1

• Removed console log statements

1.0.0

• Initial version