Skyscanner Fare Calendar Overlay

WHAT IT DOES

This userscript transforms your Skyscanner fare calendar into an interactive price comparison dashboard. It reads flight prices for each available date from the page, calculates the cheapest and most expensive dates, and displays a color-coded overlay directly on the calendar. Each date receives a price indicator: green for the best prices, light green for good prices, yellow for average, orange for above average, and red for high prices. A summary panel shows the cheapest date, the most expensive date, and the potential savings percentage. A one-click "Book Cheapest" button opens the booking page for the cheapest date. The overlay also shows savings percentages on each date, helping you understand how much you can save by choosing one date over another. This is invaluable for budget-conscious travelers, frequent flyers, and anyone looking to find the best flight deals by comparing prices across multiple dates.

WHERE IT RUNS

The script runs on all Skyscanner web application pages at *.skyscanner.com/*, with automatic detection of flight search results, fare calendar pages, and any page displaying flight prices across dates. It works across all Skyscanner interfaces by using multiple selector strategies to find fare cells, dates, prices, and booking links. The script detects dynamic content loading and re-renders the fare overlay when the calendar updates. It runs across the entire Skyscanner domain, ensuring coverage whether you're viewing a fare calendar, a flight search results page, or a specific route's price grid.

HOW TO USE

Install the script via the BotGentz extension and navigate to any Skyscanner fare calendar or flight search page. The fare overlay will appear automatically, showing color-coded price indicators on every date. Each date displays the price with a color-coded badge indicating its value relative to other dates. Savings percentages show how much you can save compared to the average or most expensive dates. The summary panel shows the cheapest date, the most expensive date, and total savings percentage. Click the "Book Cheapest" button to open the booking page for the cheapest date in a new tab. Use the panel controls to customize your experience: toggle the fare overlay on or off, show or hide price indicators, enable or disable savings calculations, show or hide the summary panel, or highlight the cheapest date. The "Refresh" button manually rescans the page for updated fare data, and the "Copy summary" button exports the fare summary to your clipboard.

THE MECHANISM - FARE EXTRACTION, PRICE COMPARISON, AND SAVINGS CALCULATION

This script identifies fare data by scanning each calendar cell using a cascading selector strategy. It extracts dates from date elements, prices from price elements, and destination information from destination selectors. The price range is calculated by finding the minimum and maximum prices across all visible dates. Each date's price is compared to the range to determine its color category: best (bottom 20%), good (20-40%), average (40-60%), above average (60-80%), and high (top 20%). Savings percentages are calculated by comparing each date's price to the minimum price and the average price. The cheapest date is highlighted with a star indicator and a green border. The summary panel displays the cheapest and most expensive dates with their prices and the total potential savings. The "Book Cheapest" button attempts to find the booking link for the cheapest date by scanning the page for booking anchors.

THE PANEL

The control panel appears as a floating, draggable element that you can position anywhere on the Skyscanner page. Drag by the header to reposition it, and the position is saved per site using GM_setValue so it stays where you left it across sessions. Release the panel near any edge and it snaps into place, keeping your workspace organized. Click the panel header to collapse it into a small bubble showing only the chart emoji (📊), minimizing distraction while keeping controls accessible. Drag from the bubble to restore the full panel. The panel automatically resizes to fit its content and includes all setting toggles, action buttons, and a price legend. Press the Escape key to quickly collapse the panel to its minimized state. The panel remains visible across page navigation within Skyscanner, with the fare overlay updating automatically as you move between routes and dates.

PLEASE NOTE

This script requires the free BotGentz extension to function. It is designed for Skyscanner users who need to find the best flight deals by comparing prices across dates. The script reads only visible fare data from the DOM—it does not access Skyscanner's API, your account credentials, or any sensitive information. All settings (overlay visibility, price indicator toggle, savings toggle, summary toggle, highlight toggle, and panel position) are stored locally using GM_setValue and never leave your browser. The script does not modify your Skyscanner data—it only reads and visualizes visible fare information. Price comparisons are calculated relative to the dates currently visible on the page; as you navigate to different date ranges, the comparisons may shift. If Skyscanner updates its website structure, the script may need to be updated to match new selectors. The "Book Cheapest" button attempts to find a booking link; if the link cannot be found, you may need to select a date manually.