mi-location-booking
The <mi-location-booking> element can be used to perform and cancel location bookings given a bookable MapsIndoors location.
Example usage:
<!-- HTML -->
<mi-location-booking></mi-location-booking>
// JavaScript
// The custom element expects a MapsIndoors location
mapsindoors.services.LocationsService.getLocation(myLocationId)
.then(location => {
document.querySelector('mi-location-booking').location = location;
});
location attribute
A location attribute is available on the <mi-location-booking> that should be used to set the MapsIndoors location to book. The attribute is required.
bookingTitle attribute
A bookingTitle attribute is available on the <mi-location-booking> element which can be used to set the title for the created bookings. Default value is "Booked".
duration attribute
A duration attribute is available on the <mi-location-booking> element which can be used to indicate wether booking should be performed for 30 or 60 minutes. Possible values are 30 and 60. Default value is 30.
startHour attribute
A startHour attribute is available on the <mi-location-booking> element which can be used to set the earliest hour of the day that bookings are possible. Accepts a 24 hour value. Default value is 8.
stopHour attribute
A startHour attribute is available on the <mi-location-booking> element which can be used to set the hour of the day where bookings are no longer possible. Accepts a 24 hour value. Default value is 18.
show attribute
A show attribute is available on the <mi-location-booking> element which can be used to control how many time slots to show. Default value is 4.
translations attribute
A translations attribute is available on the <mi-location-booking> element which can used to pass a object with translation strings.
The translation object should have translation for the following properties:
| Properties | Default value |
|---|---|
| book | Book |
| cancel | Cancel |
| booked | Booked |
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
bookingTitle |
booking-title |
The title of the created bookings. Defaults to "Booked". | string |
'Booked' |
duration |
duration |
Wether booking should be performed for 30 or 60 minutes. | LocationBookingDuration.min30 | LocationBookingDuration.min60 |
LocationBookingDuration.min30 |
location |
-- | MapsIndoors location to book. | Location |
undefined |
show |
show |
How many time slots to show going forward in time. Default to 4. | number |
4 |
startHour |
start-hour |
No bookings will be allowed before this hour. Default value is 8. | number |
8 |
stopHour |
stop-hour |
No bookings will be allowed within and after this hour. Default value is 18. | number |
18 |
translations |
-- | Translations object for translatable strings. | { book: string; cancel: string; booked: string; } |
{ book: 'Book', cancel: 'Cancel', booked: 'Booked' } |
Events
| Event | Description | Type |
|---|---|---|
bookingCompleted |
Event fired when booking is completed. | CustomEvent<object> |
bookingFailed |
Event fired in case booking failed. | CustomEvent<Error> |
cancelCompleted |
Event fired when booking is cancelled. | CustomEvent<void> |
cancelFailed |
Event fired in case cancelling failed. | CustomEvent<Error> |