FlightPriceCalendar

Cheap Flights Calendar component that displays an outbound and return calendar showing the cheapest flight on each day and highlighting the cheapest flight(s) in the month.

FlightPriceCalendar

This MFE shows the cheapest flight per day for a given origin-destination route.

The user can select an outbound and inbound flight and will see a summary with a button to proceed with the booking.

Screenshots

Flight Price Calendar. Tui themed with no selection in DE.

Flight Price Calendar. Tui light themed with outbound and inbound selection in EN.

Flight Price Calendar. Tui themed, outbound and inbound selection with USD currency in EN.

Flight Price Calendar. Tui light themed, outbound and inbound selection with GBP currency and flight toggle activated in NL.

Usage

Add the following script tag to your web page to load the microfrontend. Note: This is required only once per webpage, even when you embed multiple instances of the microfrontend.

<script src="https://nonprod.cloud.tui.com/osp/fo/flight-price-calendar/master/main.js" defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the microfrontend to show. You can create multiple instances of the microfrontend.

<tui-cheapflights-calendar
	origin="VALUE"
	destination="VALUE"
	initialmonth="VALUE"
	initialyear="VALUE"
	lang="VALUE"
	currency="VALUE">
</tui-cheapflights-calendar>

Examples

Empty Flight example

<tui-cheapflights-calendar
	origin=""
	destination=""
	initialmonth=""
	initialyear=""
	lang=""
	link=""
	additionalonewayparameters=""
	additionalreturnparameters=""
	theme="">
</tui-cheapflights-calendar>

German Flight Example

<tui-cheapflights-calendar
	origin="HAJ"
	destination="FUE"
	initialmonth=""
	initialyear=""
	lang="de-DE"
	link="https://www.tui.com/flug/flugauswahl/?origin=#outbound#&destination=#inbound#&depDate=#depDate#"
	additionalonewayparameters="&triptype=oneway"
	additionalreturnparameters="&triptype=return&retDate=#retDate#"
	theme="tui">
</tui-cheapflights-calendar>

Belgian Flight Example

<tui-cheapflights-calendar
	origin="ANR"
	destination="ALC"
	initialmonth=""
	initialyear=""
	lang="fr-BE"
	link="https://www.tuifly.be/flight/#lang#/search?flyingFrom=#origin#&flyingTo=#destination#&depDate=#depDate#&adults=1&children=0&choiceSearch=true&searchType=pricegrid&nearByAirports=true"
	additionalonewayparameters="&isOneWay=true"
	additionalreturnparameters="&isOneWay=false&returnDate=#retDate#"
	theme="tui-light">
</tui-cheapflights-calendar>

Netherlands Flight Example

<tui-cheapflights-calendar
	origin="AMS"
	destination="FUE"
	initialmonth=""
	initialyear=""
	lang="nl-NL"
	link="https://www.tui.nl/flight/#lang#/search?flyingFrom=#origin#&flyingTo=#destination#&depDate=#depDate#&adults=1&children=0&choiceSearch=true&searchType=pricegrid&nearByAirports=true"
	additionalonewayparameters="&isOneWay=true"
	additionalreturnparameters="&isOneWay=false&returnDate=#retDate#"
	theme="tui-light">
</tui-cheapflights-calendar>

Attributes

This microfrontend accepts the following attributes:

Name	Description	Values	Required
`origin`	IATA Code (e.g. HAJ, FUE)		yes
`destination`	IATA Code (e.g. HAJ, FUE)		yes
`initialmonth`	month to start with (MM)		yes
`initialyear`	year to start with (YYYY)		yes
`lang`	language for localization (e.g. de-DE, en-GB...)	`de-DE`, `en-GB`, `es-ES`, `nl-NL`, `fr-BE`	yes
`link`	link to the search results page with placeholders		no
`currency`	currency to display prices (ISO)	`EUR`, `MAD`, `GBP`, `ANG`	yes
`additionalonewayparameters`	set oneway parameters (e.g. &isOneWay=true)		no
`additionalreturnparameters`	set return parameters with placeholder (e.g. &isOneWay=false&returnDate=#retDate#)		no
`theme`	theme for styling the ui	`tui`, `tui-light`	no
`eurorate`	rate for currency calculation euro to selected currency		no
`slotbookingfeetext`	text for special booking fee		no
`flighttoggle`	Enables the ability to toggle between Out/Return flights		no
`showindication`	Enables the ability to show price indication in the calendar		no

Events

This microfrontend emits the following events:

Event	Schema
`openmfe.analytics` Indicates that the flight summary has been opened on the sticky component	`type: object properties: id: type: string description: tui-cheapflights-calendar name: type: string description: sticky component data: eventLabel: type: string description: open summary`
`openmfe.analytics` Indicates that the one of the calendar tabs have been selected (outbound or inbound)	`type: object properties: id: type: string description: tui-cheapflights-calendar name: type: string description: tab switch data: eventLabel: type: string description: direction (outbound or inbound)`
`openmfe.analytics` Indicates whether the show flights button has been clicked on summary panel or on sticky component	`type: object properties: id: type: string description: tui-cheapflights-calendar name: type: string description: summary or sticky component data: eventLabel: type: string description: CTA click`
`openmfe.analytics` Indicates that a flight has been selected and whether that flight was the cheapest or not	`type: object properties: id: type: string description: tui-cheapflights-calendar name: type: string description: outbound flight selected or inbound flight selected data: eventLabel: type: string description: cheapest or not cheapest`