mi-location-booking

The <mi-location-booking> element can be used to perform and cancel location bookings given a bookable MapsIndoors location.

Component demo image

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 or 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>