react-booking-calendar

1.0.3 • Public • Published

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

Package Sidebar

Install

npm i react-booking-calendar

Weekly Downloads

12

Version

1.0.3

License

MIT

Last publish

Collaborators

  • kbambir