bookingsync-calendar-widget 2.1.6 → 3.0.0

package/README.md

@@ -1,19 +1,19 @@
-# Calendar Widget [![CircleCI](https://circleci.com/gh/BookingSync/calendar-widget.svg?style=svg&circle-token=8c6343e12779072713c394d9be543728012efc92)](https://circleci.com/gh/BookingSync/calendar-widget)
+# Smily Calendar Widget (formerly BookingSync) [![CircleCI](https://circleci.com/gh/BookingSync/calendar-widget.svg?style=svg&circle-token=8c6343e12779072713c394d9be543728012efc92)](https://circleci.com/gh/BookingSync/calendar-widget)
 
 ## TL;DR
 ### Development
-* `npm`
-* `npm start`
-* `npm run mock-server`
-* `npm run test-ci`
+* `pnpm install`
+* `pnpm dev`
+* `pnpm run mock-server`
+* `pnpm run test-ci`
 
 ### Usage
 * load `dist/bookingsync-calendar-widget.js` script
-* add `<div data-bookingsync-calendar-widget></div>` tag to the place you would like to put the widget. 
+* add `<div data-smily-calendar-widget></div>` tag to the place you would like to put the widget.
 
 * Or as global.
 ```javascript
-const calendar = new BookingSyncCalendarWidget({ el: document.querySelector('.my-widget') });
+const calendar = new SmilyCalendarWidget({ el: document.querySelector('.my-widget') });
 ````
 
 * Or as module 
@@ -23,6 +23,10 @@ import Calendar from 'bookingsync-calendar-widget';
 const calendar = new Calendar({ el: document.querySelector('.my-widget') });
 ````
 
+Note: npm package name and dist filename remain `bookingsync-calendar-widget`.
+
+Theme note: the built-in default is now `data-theme="basic"` only. If you need the previous skew look, use `SKEW_THEME_CSS.md`.
+
 @see `index.html` for more examples.
 
 ### Setup
@@ -33,23 +37,23 @@ const calendar = new Calendar({ el: document.querySelector('.my-widget') });
 * Linting with [Airbnb eslint](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base)
 
 ## Getting started with Development
-* `npm` to get the project's dependencies.
-* `npm start` to start development server with live-reload and hot module replacement
+* `pnpm install` to get the project's dependencies.
+* `pnpm dev` to start development server with live-reload and hot module replacement
 * go to [http://localhost:8080/index.html](http://localhost:8080/index.html)
 
 Additionally you can run json-mock server
-* `npm run mock-server` it serve maps api for local development. Mocks are in `db.json` file.
+* `pnpm run mock-server` it serve maps api for local development. Mocks are in `db.json` file.
 
 ## Scripts
-* `npm start` - starts development server with live-reload and hot module replacement
-* `npm run build` - produces production version under the `dist` folder
-* `npm run test` - runs tests.
+* `pnpm dev` - starts development server with live-reload and hot module replacement
+* `pnpm run build` - produces production version under the `dist` folder
+* `pnpm run test` - runs tests.
 
 ## Config
 | __Option__ | __Description__ | __Type__ | __Default__ |
 | ---        | ---             | ---      | ---         |
 | `el` | HTMLElement to act as a container (only this one is MANDATORY) | HTMLElement | null
-| `apiHost` | API host name | String | `http://localhost:3000` for development, `https://www.bookingsync.com` for production |
+| `apiHost` | API host name | String | `http://localhost:3000` for development, `https://secure.smily.com` for production |
 | `apiNamespace` | API namespase | String | `/api/v2/public` |
 | `apiMapsRoute` | route for maps | String | `/maps.json?rental_id={params}` - `{params}` is replaced with `rentalId` |
 | `rentalURL` | URL route for maps | Function | |
@@ -61,7 +65,9 @@ Additionally you can run json-mock server
 | `allowShorterMaxStaySelection` | Force maximum selection to `opts.maxStay` | Boolean | false
 | `monthStart` | Calendar starts months, the left up most, 0 - 11 range | Number | Current month 
 | `yearStart` | Calendar start year, YYYY format (2016) | Number | Current year
-| `displayMonths` | How many months to render | Number | 2
+| `displayMonths` | Desktop/base months count | Number | 2
+| `displayMonthsMobile` | Mobile months count. If not set, uses `displayMonths` | Number | null
+| `mobileBreakpoint` | Mobile viewport max width in px (`<=` means mobile) | Number | 767
 | `selectable` | Allow to select range | Boolean | false
 | `showRates` | Show rates from availability map | Boolean | false
 | `showMinStay` | Show minimum stay per single day (be careful to use together with `showRates` or `showMaxStay`, can be too munch information) | Boolean | false
@@ -69,9 +75,9 @@ Additionally you can run json-mock server
 | `isReverseSelectable` | User selects end date first | Boolean | false
 | `isBackDisabled` | Disable back button for past months | Boolean | true
 | `isDropDown` | Act like drop down, good idea to specify `elStartAt` and `elEndAt` | Boolean | false
-| `elStartAt` | Input field to show start selected, open drop-down on focus| HTMLElement | null (will try to find `.bookingsyncCalendarWidget__start-at` if null)
-| `elEndAt` | Input field to show end selected, open drop-down on focus | HTMLElement | null (will try to find `.bookingsyncCalendarWidget__end-at` if null)
-| `elSingleInput` | Single input field to show start/end selected, open drop-down on focus | HTMLElement | null (will try to find `.bookingsyncCalendarWidget__single-input` if null)
+| `elStartAt` | Input field to show start selected, open drop-down on focus| HTMLElement | null (will try to find `.SmilyCalendar__start-at` if null)
+| `elEndAt` | Input field to show end selected, open drop-down on focus | HTMLElement | null (will try to find `.SmilyCalendar__end-at` if null)
+| `elSingleInput` | Single input field to show start/end selected, open drop-down on focus | HTMLElement | null (will try to find `.SmilyCalendar__single-input` if null)
 | `isSingleInput` | Allow to use the single input, hides start/end inputs | Boolean | null
 | `elReset` | Any element on click resets calendar selections and input values | HTMLElement | null
 | `formatDate` | Overwrite locale defined date format | String | `%m/%d/%y` (https://github.com/pineapplemachine/strtime-js/blob/HEAD/directives.md)
@@ -92,7 +98,7 @@ e.g.
 
 ```html
 <div 
-  data-bookingsync-calendar-widget
+  data-smily-calendar-widget
   data-selectable="true"
   data-format-date="%m/%d/%y">
 </div>
@@ -102,7 +108,7 @@ e.g.
 Calendar implements event Emitter, receiver can subscribe/unsubscribe to events and subscribe one-time.
 
 ```javascript
-var cal = new bookingsyncCalendarWidget({
+var cal = new SmilyCalendarWidget({
   el: document.querySelector('.calendar-wrapper'),
 });