|
1 | 1 | # binaryBookingCalendar |
2 | 2 |
|
3 | | -This is a React Component that contains a calendar together with date/time inputs to allow users to select a time range |
4 | | -in which they want to book something. |
| 3 | +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 |
| 4 | +to book something. |
5 | 5 |
|
6 | 6 | ## Usage |
7 | 7 |
|
8 | | -* Install the package using ```npm install --save binary-booking-calendar``` or by manually adding it to |
9 | | - your ```package.json``` |
| 8 | +* Install the package using ```npm install --save binary-booking-calendar``` or by manually adding it to your ```package.json``` |
10 | 9 | * Import the component: ```import Calendar from 'binary-booking-calendar/dist/binaryBookingCalendar'``` |
11 | 10 | * Use it in your code with the properties explained below: |
12 | | - |
13 | | - |
14 | | -* ```bookings``` An array of already existing bookings formatted like |
15 | | - this: ```{begin: $utcTimeString, end: $utcTimeString}``` |
16 | | -* ```maxBookingLength``` If bookings cannot be infinitely long, use this to set a max length in milliseconds |
17 | | -* ```initialView``` Either ```month```, ```3monnths``` or ```asap``` |
18 | | - * Hint: You could make this dependent on your users' device size like |
19 | | - this: ```screen.width > 800 ? 'month' : 'asap'``` |
20 | | -* ```getPrice``` A function that returns a promise which in turn returns the price for the booking timespan. This |
21 | | - function should take the date objects ```bookingBegin``` and ```bookingEnd``` as parameters. |
22 | | -* ```handleSubmit``` A function that submits the booking to your backend. This should also accept the two date objects |
23 | | - as well as an optional boolean indicating the booking starts now. |
| 11 | + * ```bookings``` An array of already existing bookings formatted like this: ```{begin: $utcTimeString, end: $utcTimeString}``` |
| 12 | + * ```maxBookingLength``` If bookings cannot be infinitely long, use this to set a max length in milliseconds |
| 13 | + * ```initialView``` Either ```month```, ```3monnths``` or ```asap``` |
| 14 | + * Hint: You could make this dependent on your users' device size like this: ```screen.width > 800 ? 'month' : 'asap'``` |
| 15 | + * ```getPrice``` A function that returns a promise which in turn returns the price for the booking timespan. This function should take |
| 16 | + the date objects ```bookingBegin``` and ```bookingEnd``` as parameters. |
| 17 | + * ```handleSubmit``` A function that submits the booking to your backend. This should also accept the two date objects as well as an |
| 18 | + optional boolean indicating the booking starts now. |
24 | 19 |
|
25 | 20 | ## Development |
26 | 21 |
|
27 | 22 | * Pull this repo |
28 | 23 | * Install all dependencies with `npm install` |
29 | 24 | * Start the development server and auto compilation using `npm run start` |
30 | | - * Your web browser should open, serving the demo application |
31 | | - * Note that the calendar was written to be included in an existing design, so styling of the demo app is very bare-bones. |
| 25 | + * Your web browser should open, serving the demo application |
| 26 | + * Note that the calendar was written to be included in an existing design, so styling of the demo app is very bare-bones. |
| 27 | + |
| 28 | +There are a few tests included. You can run those using `npm run test`. |
| 29 | +These tests are also run on every pull request to the main branch so make sure they all pass before creating one. |
32 | 30 |
|
33 | 31 | ## Current state |
34 | 32 |
|
35 | | -While the calendar is in a usable state, it was written in limited time, therefore the code quality may not be the best |
36 | | -and there are still quite a few TODOs. |
| 33 | +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 |
| 34 | +quite a few TODOs. |
37 | 35 |
|
38 | 36 | At the moment, there aren't many config options, and the component is only available in German language. |
39 | 37 | Both of these are supposed to change at some point but no timeframe has been set for this yet. |
0 commit comments