Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 18 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,37 @@
# binaryBookingCalendar

This is a React Component that contains a calendar together with date/time inputs to allow users to select a time range
in which they want to book something.
This is a React Component that contains a calendar together with date/time inputs to allow users to select a time range in which they want
to book something.

## Usage

* Install the package using ```npm install --save binary-booking-calendar``` or by manually adding it to
your ```package.json```
* Install the package using ```npm install --save binary-booking-calendar``` or by manually adding it to your ```package.json```
* Import the component: ```import Calendar from 'binary-booking-calendar/dist/binaryBookingCalendar'```
* Use it in your code with the properties explained below:


* ```bookings``` An array of already existing bookings formatted like
this: ```{begin: $utcTimeString, end: $utcTimeString}```
* ```maxBookingLength``` If bookings cannot be infinitely long, use this to set a max length in milliseconds
* ```initialView``` Either ```month```, ```3monnths``` or ```asap```
* Hint: You could make this dependent on your users' device size like
this: ```screen.width > 800 ? 'month' : 'asap'```
* ```getPrice``` A function that returns a promise which in turn returns the price for the booking timespan. This
function should take the date objects ```bookingBegin``` and ```bookingEnd``` as parameters.
* ```handleSubmit``` A function that submits the booking to your backend. This should also accept the two date objects
as well as an optional boolean indicating the booking starts now.
* ```bookings``` An array of already existing bookings formatted like this: ```{begin: $utcTimeString, end: $utcTimeString}```
* ```maxBookingLength``` If bookings cannot be infinitely long, use this to set a max length in milliseconds
* ```initialView``` Either ```month```, ```3monnths``` or ```asap```
* Hint: You could make this dependent on your users' device size like this: ```screen.width > 800 ? 'month' : 'asap'```
* ```getPrice``` A function that returns a promise which in turn returns the price for the booking timespan. This function should take
the date objects ```bookingBegin``` and ```bookingEnd``` as parameters.
* ```handleSubmit``` A function that submits the booking to your backend. This should also accept the two date objects as well as an
optional boolean indicating the booking starts now.

## Development

* Pull this repo
* Install all dependencies with `npm install`
* Start the development server and auto compilation using `npm run start`
* Your web browser should open, serving the demo application
* Note that the calendar was written to be included in an existing design, so styling of the demo app is very bare-bones.
* Your web browser should open, serving the demo application
* Note that the calendar was written to be included in an existing design, so styling of the demo app is very bare-bones.

There are a few tests included. You can run those using `npm run test`.
These tests are also run on every pull request to the main branch so make sure they all pass before creating one.

## Current state

While the calendar is in a usable state, it was written in limited time, therefore the code quality may not be the best
and there are still quite a few TODOs.
While the calendar is in a usable state, it was written in limited time, therefore the code quality may not be the best and there are still
quite a few TODOs.

At the moment, there aren't many config options, and the component is only available in German language.
Both of these are supposed to change at some point but no timeframe has been set for this yet.
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "binary-booking-calendar",
"version": "0.1.11",
"version": "0.2.0",
"license": "MIT",
"private": false,
"main": "dist/binaryBookingCalendar.js",
Expand Down