• Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • Fabric
  • Fabric Dark
  • High Contrast
Theme Selection
Mode Selection
*Translated by Google Translator.

Example of Fare Calendar in ASP.NET MVC Scheduler Control

This demo illustrates how to customize the scheduler to showcase it as an Airfare calendar depicting the lowest available price on each day of a month for a specific route, say between Barcelona and Los Angeles.

Cheapest one way fares from Barcelona to Los Angeles

In this demo, Scheduler initially displays the fare of the airline service which offers lowest price on each day by comparing the 3 available airlines. Here, the 3 airline services acts as the Scheduler resources. Appointment collection has been dynamically generated for a month (for all the 3 resources) within the generateEvents method and then filtered externally based on the ascending Fare value within the filterByFare method. Since each day of the Scheduler needs to display only a single appointment showing the fare value, it's been queried to take only the first 30 values from the sorted list and assigned them to the Schedule DataSource. Here, the filtering process needs to be carried out during the Databinding event and therefore, the dataSource of Scheduler is assigned within this event.

Scheduler has been rendered in a readonly mode and therefore no editing actions are allowed here. To customize the look of the appointments that displays the fare value, Template option within the EventSettings is being used. To highlight the day that holds the overall lowest price of a month, the background color of that day's cell is customized within the DataBound event. Also, the tooltip has been enabled with Template option to display the flight details in a customized style.