Default Example

By default, the styling of the widget is kept very simple to allow for maximum opportunity to customize the styling to match the site on which it is placed.

<sabre-shs-widgets-calendar    api="MDEwMTJ+aS9sZDVtaHkzK0tqSy9hMHJkZEtKNGhHd0xORkxZZ1YvUXE3YzhsbFVXbVJaMGJMOEg1cjlRUGRYT09FeEtBUmtyMlhKalZLZGFrT0pKVXpRRFY0b1E9PQ==" 
   chain="12011" 
   hotel="10155"
   currency="USD">
</sabre-shs-widgets-calendar>

Example with Custom Styling and Stay Parameters

The Calendar Widget also supports stay parameters and product filter parameters, as defined in the "Configuration" tab.  These can be used to limit the calendar to specific products, unlock products by access code, and apply pricing and availability on collected stay criteria.

Styling can be added by overriding CSS. Make use of the browser Inspector to find classnames that can be overridden through CSS.

<style type="text/css">
  .shs-widgets--calendar {
    background-color: #f7f9ff;
    border: 1px solid #0437ba;
    padding: 10px;
    margin: 10px;
  }
  .DayPicker-Month {
    border: 1px solid #0437ba;
    margin: 5px;
  }
</style>
<sabre-shs-widgets-calendar    api="MDEwMTJ+aS9sZDVtaHkzK0tqSy9hMHJkZEtKNGhHd0xORkxZZ1YvUXE3YzhsbFVXbVJaMGJMOEg1cjlRUGRYT09FeEtBUmtyMlhKalZLZGFrT0pKVXpRRFY0b1E9PQ==" 
   chain="12011" 
   hotel="10155"
   currency="USD"
   adult="1"
   child="2"
   child-ages='[5, 7]'
   calendar-config='{"firstDayOfWeek": 1, "numberOfMonths": 2}'
   room-list='["DLXK","DLXQQ"]'
>
</sabre-shs-widgets-calendar>