Skip to main content

Calendar

1.9.5
Widget
Try Now

Configuration keys in both cases (React and WebComponent) needs to be passed as attributes. You will find how to do that in Examples section. In case of WebComponents you should handle configuration types: array, object and function needs to be handled differently. Array and Object should be a JSON string. You can validate if your string is a valid JSON here. I.e.

<sabre-widget
    hotels='[{"name": "Hotel 1"}, {"name": "Hotel 2"}]'
    config='{"key": "value"}'>
</sabre-widget>

React version in this case will look like:

<SabreWidget
    hotels={[{"name": "Hotel 1"}, {"name": "Hotel 2"}]}
    config={{"key": "value"}}
/>

In case of functions for WebComponents you need to pass a globally available function name. In case of React it's just a function.

<script>
function onHotelSelectMethod(hotel) {
    alert(hotel);
}
</script>

<sabre-widget
    onHotelSelect="onHotelSelectMethod">
</sabre-widget>

React version in this case will look like:

<SabreWidget
    onHotelSelect={(hotel => { alert(hotel); })}
/>

Supported keys

Name Type Default Required Description
api string     Valid API key required to make a widget work
hotel string     CRS Hotel ID if API is not for all chain hotels
accessCode string     Access code for specified accessCodeType prop
accessCodeType one of string    

Access code type that is require if you provide an access code. Accepted values are: Group, Promotion, Corporate

adults number 1   Number of adults to fetch availability and pricing
autoAdvance bool false   Calendar will auto advance to next month if you select last day
currencyBeforePrice bool     Display currency before price
currencySymbol bool false   Display currency symbol not currency code
disablePastDays bool true   Disabling past date selection
extraLegendLabel string     Extra label displayed under a calendar
from string     Custom from date
hidecurrency bool false   Hide currency and display only amount
hideprices bool false   Hide prices and display availability only
includetax bool false   Include tax for every price
isRangePicker bool false   Converting a calendar to range picker
kids number 0   Number of kids to fetch availability and pricing
labelRestricted string Restricted   Label for restricted days
labelRestrictionLeadDaysTime string This stay requires a {nights} lead days time   Restriction label showed in popover
labelRestrictionMaxChildOccupancyExceeded string Too many children for selected number of rooms   Restriction label showed in popover
labelRestrictionMaxOccupancyExceeded string Too many guests for selected number of rooms   Restriction label showed in popover
labelRestrictionMaxStayArrive string There is a maximum length of stay for your selected dates.   Restriction label showed in popover
labelRestrictionMaxStayThrough string This stay requires a maximum of {nights} nights.   Restriction label showed in popover
labelRestrictionMinStayArrive string There is a minimum length of stay for your selected dates.   Restriction label showed in popover
labelRestrictionMinStayThrough string This stay requires a minimum of {nights} nights.   Restriction label showed in popover
labelRestrictionNoArrive string No arrival allowed on your selected arrival date.   Restriction label showed in popover
labelRestrictionNoDeparture string No departure allowed on your selected departure date.   Restriction label showed in popover
labelSelected string Selected   Label for selected days
labelUnavailable string Not Available   Label for unavailable days
lengthOfStay number 1   Number of nights to fetch availability and pricing
localeMonths array     Array of month names to override english
localeWeekdaysLong array     Array of long weekdays names to override english
localeWeekdaysShort array     Array of short weekdays names to override english
month string     Starting month
onDayChange func     Method triggered on day change. For day picker its returning date for range picker object with from to dates
onError func     Method triggered on error response
onMonthChange func     Method triggered on month change
onlyCheckRequested bool false   With this flag calendar will only check for requested parameters. I.e. if you provide room / rate / promo / group code code it will only look for this product. Else - if you request a minimum price and provide a room code and room code price will be higher than other room - other room price will be displayed. With this flag calendar will display requested room price even if price is higher.
preventDisabledSelection bool false   Prevent selecting disabled days after prices and availability is loaded
preventPriceCalculation bool false   Component no longer calculate total price for range selection.
pricetype one of string Minimum  

One of Minimum, Maximum, Average

rate string     Rate Code you want to check the prices for
room string     Room Code you want to check the prices for
rooms number 1   Number of rooms to fetch availability and pricing
roundprice bool true   Round price
showOutsideDays bool false   Show outside dates
showTwoCalendars bool false   Show two calendars instead of one
to string     Custom to date
todayButton string     Display today button text
yearView bool false   Display 12 month calendar

Examples