Full Fat Calendar Widget

The "Full Fat" calendar widget renders a full-blown calendar to select the performance date and time of a specific product. It is designed to be embedded on a standalone "calendar"-type page. You can check out a working demo here.

Embedding the Widget

Ensure you've got a valid channel id.
Create a new html page and add the following markup, switching the configurable data in braces with your own.


<!doctype html>
<html lang="en">
  <head>
    <title>Full Fat widget example</title>
  </head>
  <body>
    <div
        data-app="inventory-app"
        data-action-url="{http://your-website-url/destination-page.html}"
        data-channel-id="{your-channel-id}"
        data-view-name="full-fat-calendar"
        data-product-id="{id of product e.g. 1587 for "Wicked"}"
        data-product-type="{should be show/attraction}"
        data-api-path="https://inventory-service.tixuk.io"
    ></div>
    <script type="text/javascript" src="https://inventory-service.tixuk.io/v5/js/quicksearch.js"></script>
  </body>
</html>

Supported data attributes

In addition to the standard data attributes used by all Widgets, the following data attributes are used to customise the behaviour or 'look and feel' of the Full Fat calendar widget.

Name	Mandatory	Type	Sourced from Query String	Description
data-app	Yes	String	n/a	Indicates the host app to communicate with. It should be "inventory-app"
data-view-name	Yes	String	n/a	View name of the specific widget. For this calendar widget, it should be `full-fat-calendar`. Supported data-view-names: `full-fat-calendar` `full-fat-calendar-with-summary`
data-channel-id	Yes	String	n/a	The id of the affiliate for which the embedding context (i.e. website) belongs.
data-api-path	Yes	String	n/a	The host for the data service to use. This should be the fully qualified domain for the relevant capability service. Example: https://inventory-service.tixuk.io/
data-product-id	Yes*	Number	product_id	Identifier of the product Id using for requests. *Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs_.
data-quantity	No	Number	qt	Number of tickets which the widget should display as selected by default e.g. "2". (should be in range 1 - 10)
data-product-id-for-content	No*	Number	content_product_id	Identifier of the product for content-service api calls. Default value: data-product-id *Data-attr can be omitted in favor of property being supplied via query string. Query string values override data-attrs.
data-action-url	No	String	n/a	Destination to redirect to on full fat submission. Example: http://your-website-url/destination-page.html
data-booking-starts	No*	Date	booking_starts	Represents the first date a user can select (the availability is calculated "from" this date). *Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs.
data-booking-ends	No*	Date	booking_ends	Represents the last date a user can select (the availability is calculated "to" this date) *Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs.
data-css-mode	No	String	n/a	The CSS to be applied to the widget. Valid values are: full (default) grid min
data-labels-config	No	JSON Object	n/a	Set of labels to use for the Full Fat Calendar. See "Configuring labels" below for more details.
data-product-type	No	String	product_type	Valid values are: `show` (default) `attraction`
data-venue-id	No*	String	venue_id	*If a data-product-id is supplied, the corresponding venue id for the product must be supplied.
data-date	Yes	Date	date	Date of performance *Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs.
data-user-locale	No	String	n/a	A string indicating the language which should be used for displaying labels (see the "configuring labels" section below).
data-show-spinner-during-widget-loading	No	Boolean	n/a	If set to true shows spinner during widget loading (currently applies for Quick Search widget only)
data-custom-calendar-config	No	JSON Object	n/a	List of calendar options to change calendar behaviour. List of full options you find here
data-disable-redirect-on-error	No	Boolean	n/a	When error occurs, popup appears and in several seconds redirect to homepage happens. In order to prevent redirect, this attribute shold have "true" value.
data-target-blank	No	Boolean	n/a	A flag indicating opening data-action-url in the current/new tab

Full Fat Calendar Display for Shows vs Attractions

Due to internal data and API differences, there are slight differences in terms of how the full fat calendar displays for shows vs attractions.

The main differences are, when displaying for attractions:

The full fat calendar does not include a "Show times" tab.
When a date is selected, the full fat calendar does not display a timeslot container.

Show

Attrraction

For attractions, times are instead selected on a following/separate step.

Harry Potter Support

The Full Fat calendar provides out-of-the-box support for Harry Potter and its "two part" performances. For example, there is additional help text provided and tweaked text descriptions. You can see more here.

Currency Support

Products will use the local currency based on the event location (eg. London West End GBP, New York Broadway USD).

Configuring labels

The Full Fat calendar widget comes with some default text labels, but these can be customised to your liking. To do so, use the "data-labels-config" attribute, like so:


<div
    data-app="inventory-app"
    data-view-name="full-fat-calendar"
    data-channel-id="encoretickets"
    data-product-type="show"
    data-product-id="1587"
    data-api-path="https://inventory-service.tixuk.io"
    data-action-url="https://google.com"
    data-user-locale="en-GB"
    data-labels-config='{
        "timeValidationMessage": { "en-GB": "[T] Please select a time of performance" },
        "calendarValidationMessage": { "en-GB": "[T] Please select a performance date" },
        "fullFat": {
           "calendarTicketSearchButton": { "en-GB": "[T] Pick your seats" }
         },
        "calendar": {
           "searchAvailability": { "en-GB": "[T] Searching availability" }
         }
     }'

>
</div>

calendarTicketSearchButton

Text of search button

timeValidationMessage

Text of button (desktop) and popup (mobile) when time is not selected

calendarValidationMessage

Error state of button (desktop) and popup (mobile) when date is not selected

searchAvailability

Text of spinner when calendar loading