bookingsync-calendar-widget 3.0.0 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -54
- package/dist/bookingsync-calendar-widget.js +1329 -3175
- package/dist/bookingsync-calendar-widget.min.js +1 -1
- package/package.json +18 -21
- package/src/calendar.js +574 -46
- package/src/config.js +1 -0
- package/src/index.js +0 -3
- package/src/locales.js +80 -10
- package/src/positioning.js +382 -0
- package/src/styles/calendar.scss +249 -16
- package/src/templates.js +63 -6
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
const calendar = new SmilyCalendarWidget({ el: document.querySelector('.my-widget') });
|
|
17
17
|
````
|
|
18
18
|
|
|
19
|
-
* Or as module
|
|
19
|
+
* Or as module
|
|
20
20
|
```javascript
|
|
21
21
|
import Calendar from 'bookingsync-calendar-widget';
|
|
22
22
|
|
|
@@ -42,70 +42,88 @@ Theme note: the built-in default is now `data-theme="basic"` only. If you need t
|
|
|
42
42
|
* go to [http://localhost:8080/index.html](http://localhost:8080/index.html)
|
|
43
43
|
|
|
44
44
|
Additionally you can run json-mock server
|
|
45
|
-
* `pnpm run mock-server`
|
|
45
|
+
* `pnpm run mock-server` serves the maps API for local development. Mocks are in `db.json`.
|
|
46
46
|
|
|
47
47
|
## Scripts
|
|
48
48
|
* `pnpm dev` - starts development server with live-reload and hot module replacement
|
|
49
49
|
* `pnpm run build` - produces production version under the `dist` folder
|
|
50
|
-
* `pnpm run test` - runs tests
|
|
50
|
+
* `pnpm run test` - runs tests
|
|
51
|
+
|
|
52
|
+
## Positioning
|
|
53
|
+
The widget no longer bundles Popper. For dropdown and invalid-range tooltip positioning it will use the first runtime it finds:
|
|
54
|
+
|
|
55
|
+
1. `window.Popper` with a Popper 2 style `createPopper()`
|
|
56
|
+
2. `window.FloatingUIDOM`, `window.FloatingUI`, or `window.floatingUI` with `computePosition()`
|
|
57
|
+
3. a built-in fallback
|
|
58
|
+
|
|
59
|
+
The built-in fallback is intentionally basic. It supports `top` / `bottom` / `left` / `right` placement, `-start` / `-end` alignment, tooltip arrow positioning, and repositioning on `resize` and `scroll`. It does not implement collision-aware behavior such as flip, shift, or advanced hide handling. If you need that, expose Popper or Floating UI in the page runtime.
|
|
51
60
|
|
|
52
61
|
## Config
|
|
53
62
|
| __Option__ | __Description__ | __Type__ | __Default__ |
|
|
54
63
|
| --- | --- | --- | --- |
|
|
55
|
-
| `el` |
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
64
|
+
| `el` | Calendar container element. This is the only required option. | HTMLElement | `null` |
|
|
65
|
+
| `lang` | Locale key such as `en-US` or `fr-FR`. Invalid values fall back to `en-US`. | String | `en-US` |
|
|
66
|
+
| `theme` | Theme name stored in `data-theme`. The bundled stylesheet currently ships `basic` only. | String | `basic` |
|
|
67
|
+
| `apiHost` | API host name. | String | `http://localhost:3000` in development, `https://secure.smily.com` otherwise |
|
|
68
|
+
| `apiNamespace` | API namespace prefix. | String | `/api/v2/public` |
|
|
69
|
+
| `apiMapsRoute` | Maps route template used by the default `rentalUrl()` implementation. | String | `/maps.json?{apiRentalId}{apiCurrency}` |
|
|
70
|
+
| `rentalUrl(ids)` | Function used to build the maps URL. By default it derives the URL from `apiHost`, `apiNamespace`, `apiMapsRoute`, `apiRentalId`, and `apiCurrency`. | Function | built-in implementation |
|
|
71
|
+
| `rentalId` | Rental identifier used when loading availability maps. | String or Number | `null` |
|
|
72
|
+
| `currency` | Target currency for rate conversion and display. | String | `null` |
|
|
73
|
+
| `startOfWeek` | First weekday index, `0` for Sunday through `6` for Saturday. If omitted, the locale value is used. | Number | locale default |
|
|
74
|
+
| `minStay` | Minimum selectable range in nights. | Number | `1` |
|
|
75
|
+
| `maxStay` | Maximum selectable range in nights. | Number | `Infinity` |
|
|
76
|
+
| `allowShorterMinStaySelection` | Ignore per-day minimum-stay constraints and use `minStay` only. | Boolean | `false` |
|
|
77
|
+
| `allowLongerMaxStaySelection` | Ignore per-day maximum-stay constraints and use `maxStay` only. | Boolean | `false` |
|
|
78
|
+
| `monthStart` | First visible month, `0` through `11`. If omitted, the current month is used. | Number | current month |
|
|
79
|
+
| `yearStart` | First visible year. If omitted, the current year is used. | Number | current year |
|
|
80
|
+
| `displayMonths` | Number of visible months on desktop. | Number | `2` |
|
|
81
|
+
| `displayMonthsMobile` | Number of visible months on mobile. If omitted, `displayMonths` is used. | Number | `null` |
|
|
82
|
+
| `mobileBreakpoint` | Mobile viewport max width in px. `<=` this breakpoint is treated as mobile. | Number | `767` |
|
|
83
|
+
| `showPaginationMobile` | Keep the month pagination controls visible in mobile mode. | Boolean | `true` |
|
|
84
|
+
| `monthsPaginationJump` | Number of months to move when the forward/back controls are used. | Number | `1` |
|
|
85
|
+
| `selectable` | Enable range selection. | Boolean | `false` |
|
|
86
|
+
| `showRates` | Show rates from the availability map. | Boolean | `false` |
|
|
87
|
+
| `showMinStay` | Show minimum-stay text per day cell. | Boolean | `false` |
|
|
88
|
+
| `showMaxStay` | Show maximum-stay text per day cell. | Boolean | `false` |
|
|
89
|
+
| `isReverseSelectable` | Start selection from the end date instead of the start date. | Boolean | `false` |
|
|
90
|
+
| `isBackDisabled` | Prevent month navigation into the past. | Boolean | `true` |
|
|
91
|
+
| `enableAllDays` | Make past days and months selectable even when maps are not loaded. | Boolean | `false` |
|
|
92
|
+
| `isDropDown` | Render the widget as a dropdown anchored to an input or trigger element. | Boolean | `false` |
|
|
93
|
+
| `dropPlacement` | Preferred dropdown placement passed to the active positioning engine. | String | `bottom-start` |
|
|
94
|
+
| `elStartAt` | Start-date input. Also used as the dropdown opener when `isDropDown` is enabled. | HTMLElement | `null`, then `.SmilyCalendar__start-at` if found |
|
|
95
|
+
| `elEndAt` | End-date input. Also used as the dropdown opener when `isDropDown` is enabled. | HTMLElement | `null`, then `.SmilyCalendar__end-at` if found |
|
|
96
|
+
| `elSingleInput` | Single combined input used for dropdown mode. | HTMLElement | `null`, then `.SmilyCalendar__single-input` if found |
|
|
97
|
+
| `isSingleInput` | Use the single input and hide the start/end inputs. | Boolean | `null` |
|
|
98
|
+
| `singleInputDateFormat` | Date format used when filling the combined single input. | String | locale date format |
|
|
99
|
+
| `singleInputSeparator` | Separator inserted between start and end dates in the single input. | String | `→` |
|
|
100
|
+
| `elReset` | Element that clears the current selection when clicked. | HTMLElement | `null` |
|
|
101
|
+
| `formatDate` | Date format used for parsing and formatting visible input values. | String | locale date format |
|
|
102
|
+
| `hiddenElFormat` | If set, duplicates the start/end inputs into hidden fields formatted with this pattern. | String | `null` |
|
|
103
|
+
| `disableAvailabityMap` | Treat every mapped day as available. | Boolean | `false` |
|
|
104
|
+
| `currentDate` | Date used as "today" for disabling and clamping logic. | Date | `new Date()` |
|
|
88
105
|
|
|
89
106
|
## Callbacks
|
|
90
107
|
|
|
91
|
-
* `onSelectStart(ISO String, Date)`
|
|
92
|
-
* `onSelectEnd(ISO String, Date)`
|
|
93
|
-
* `onSelectionCompleted(ISO String, ISO String)`
|
|
108
|
+
* `onSelectStart(ISO DateTime String, ISO Date String)`
|
|
109
|
+
* `onSelectEnd(ISO DateTime String, ISO Date String)`
|
|
110
|
+
* `onSelectionCompleted(ISO DateTime String, ISO DateTime String)`
|
|
111
|
+
* `onClearSelection([yyyy, m, dd] | null, [yyyy, m, dd] | null)`
|
|
94
112
|
|
|
95
|
-
|
|
96
|
-
All options can be passed as `data-` attributes to HTMLElement calendar placeholders, with
|
|
113
|
+
See `index.html` for more examples.
|
|
114
|
+
All options can be passed as `data-` attributes to HTMLElement calendar placeholders, with camelCase options converted to kebab-case.
|
|
97
115
|
e.g.
|
|
98
116
|
|
|
99
117
|
```html
|
|
100
|
-
<div
|
|
118
|
+
<div
|
|
101
119
|
data-smily-calendar-widget
|
|
102
120
|
data-selectable="true"
|
|
103
|
-
data-format-date="%m/%d/%
|
|
121
|
+
data-format-date="%m/%d/%Y">
|
|
104
122
|
</div>
|
|
105
123
|
```
|
|
106
124
|
|
|
107
125
|
## Events
|
|
108
|
-
Calendar implements event Emitter, receiver can subscribe
|
|
126
|
+
Calendar implements event Emitter, receiver can subscribe, unsubscribe, and subscribe one-time.
|
|
109
127
|
|
|
110
128
|
```javascript
|
|
111
129
|
var cal = new SmilyCalendarWidget({
|
|
@@ -122,22 +140,22 @@ cal.on('selection-start', function(a, b) {
|
|
|
122
140
|
cal.once('selection-end', function(a, b) {
|
|
123
141
|
console.log('selection-end', a, b)
|
|
124
142
|
});
|
|
125
|
-
|
|
143
|
+
|
|
126
144
|
cal.off('selection-end', function(a, b) {
|
|
127
145
|
console.log('selection-end', a, b)
|
|
128
|
-
});
|
|
146
|
+
});
|
|
129
147
|
```
|
|
130
148
|
|
|
131
149
|
| __Event__ | __Description__ | __Params__ |
|
|
132
150
|
| --- | --- | --- |
|
|
133
|
-
| `init`
|
|
134
|
-
| `maps-loaded` | Availability, rates and minimum stay maps are loaded and added to calendar | {Object} raw response from the server |
|
|
151
|
+
| `init` | Finished initializing, data is NOT loaded | |
|
|
152
|
+
| `maps-loaded` | Availability, rates and minimum stay maps are loaded and added to calendar | `{Object}` raw response from the server |
|
|
135
153
|
| `maps-error` | Error when loading maps | |
|
|
136
154
|
| `loading-show` | Loading indicator shows | |
|
|
137
155
|
| `loading-hide` | Loading indicator hides | |
|
|
138
|
-
| `selection-start` | User selected start date | {String} {
|
|
139
|
-
| `selection-end` | User selected end date | {String} {
|
|
140
|
-
| `selection-reset` | Selection reset | {Array}
|
|
141
|
-
| `selection-completed` | User selects end date when start date was already selected | {Array}
|
|
142
|
-
| `drop-open` | Calendar-drop open | |
|
|
143
|
-
| `drop-close` | Calendar-drop close | |
|
|
156
|
+
| `selection-start` | User selected start date | `{String}`, `{String}`: ISO datetime, ISO date |
|
|
157
|
+
| `selection-end` | User selected end date | `{String}`, `{String}`: ISO datetime, ISO date |
|
|
158
|
+
| `selection-reset` | Selection reset | `{Array}`, `{Array}`: selection start, selection end (`[yyyy, m, dd]`) |
|
|
159
|
+
| `selection-completed` | User selects end date when start date was already selected | `{Array}`, `{Array}`: selection start, selection end (`[yyyy, m, dd]`) |
|
|
160
|
+
| `drop-open` | Calendar-drop open | |
|
|
161
|
+
| `drop-close` | Calendar-drop close | |
|