Syncfusion
Published in

Syncfusion

Designing an Airfare Calendar in Xamarin.Forms

When booking flight tickets, most people want to find out which are the cheapest fares among the listed airlines in a calendar. Syncfusion Xamarin.Forms Calendar, with its rich feature set, allows users to design an airfare calendar using data binding and template support.

In this blog post, we are going to discuss how to design an airfare calendar and display the cheapest airfares from among the listed airlines using the Syncfusion Xamarin.Forms Calendar component. If you are new to the Calendar control, please read the Getting Started article in the Calendar documentation before proceeding.

Creating a view model

Calendar is an MVVM-friendly control with complete data-binding support that allows you to bind real-time data from other sources. First, we’ll create a view model called AirfareViewModel with required properties such as date, fare, airline, and ID, and then append the data. For demo purposes, we are generating random data.

public class AirfareViewModel : INotifyPropertyChanged{private ObservableCollection<AirFare> airFareData;public event PropertyChangedEventHandler PropertyChanged;/// <summary>/// AirFare Data of Flight fare stored and retrieved./// </summary>public ObservableCollection<AirFare> AirFareData{get{return this.airFareData;}set{this.airFareData = value;OnPropertyChanged("AirFareData");}}/// <summary>/// Airfare View Model/// </summary>public AirfareViewModel(){AirFareData = new ObservableCollection<AirFare>();this.GetAirFareData();}/// <summary>/// Updated the cheapest airfare based on the listed airlines./// </summary>public AirFare UpdateAirfareData(DateTime dateTime){var fareData = this.AirFareData[dateTime.Date.DayOfYear % (AirFareData.Count - 1)];fareData.Date = dateTime;return fareData;}private Color GetPlaneColor(int airlineId){if (airlineId == 1)return Color.Blue;else if (airlineId == 2)return Color.Green;elsereturn Color.Red;}private void GetAirFareData(){var Fares = new ObservableCollection<string>();var Ids = new ObservableCollection<int>();FetchFareData(out Fares, out Ids);//// Adding 100 flight fare datafor (int i = 0; i < 100; i++){var airfare = new AirFare();airfare.Fare = Fares[i % (Fares.Count - 1)];var id = i % Ids.Count;if (id >= Ids.Count){id = Ids.Count - 1;}id = Ids[id];airfare.Airline = "Airline" + id.ToString();airfare.Plane = "\ue700";airfare.Color = GetPlaneColor(id);this.AirFareData.Add(airfare);}}private void FetchFareData(out ObservableCollection<string> Fares, out ObservableCollection<int> Ids){Ids = new ObservableCollection<int>{1,2,3,4};Fares = new ObservableCollection<string>();Fares.Add("$134.50");Fares.Add("$305.00");Fares.Add("$152.66");Fares.Add("$267.09");Fares.Add("$189.20");Fares.Add("$212.10");Fares.Add("$350.50");Fares.Add("$222.39");Fares.Add("$238.83");Fares.Add("$147.27");Fares.Add("$115.43");Fares.Add("$198.06");Fares.Add("$189.83");Fares.Add("$110.71");Fares.Add("$152.10");Fares.Add("$199.62");Fares.Add("$146.15");Fares.Add("$237.04");Fares.Add("$100.17");Fares.Add("$101.72");Fares.Add("$266.69");Fares.Add("$332.48");Fares.Add("$256.77");Fares.Add("$449.68");Fares.Add("$100.17");Fares.Add("$153.31");Fares.Add("$249.92");Fares.Add("$254.59");Fares.Add("$332.48");Fares.Add("$256.77");Fares.Add("$449.68");Fares.Add("$107.18");Fares.Add("$219.04");}private void OnPropertyChanged(string propertyName){this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));}}

Designing an airfare calendar

In Xamarin, you can customize the presentation of data and its interactions using the DataTemplate and data-binding support. Customize the calendar month cell to display the airfare, airline name, and image based on the airline ID in each cell using the CellTemplate property. Bind the data appended in the view model using the properties of the AirfareViewModel.

<ContentPage.Behaviors><local:CalendarPageBehavior/></ContentPage.Behaviors><ContentPage.Content><Grid><syncfusion:SfCalendar x:Name="calendar" EnableDatesInPast="False"ShowLeadingAndTrailingDays="false"ShowYearView="False"VerticalOptions="FillAndExpand"HorizontalOptions="FillAndExpand"BackgroundColor="White"><syncfusion:SfCalendar.MonthViewSettings><syncfusion:MonthViewSettings HeaderBackgroundColor="#2A8A94"HeaderTextColor="White" CellGridOptions="Both"DayHeaderBackgroundColor="#2A8A94"DateSelectionColor="Transparent"TodaySelectionBackgroundColor="Transparent"DayHeaderTextColor="White"><syncfusion:MonthViewSettings.CellTemplate><DataTemplate><Grid BackgroundColor="White" RowSpacing="0" ColumnSpacing="0"><Grid.RowDefinitions><RowDefinition Height="0.3*"/><RowDefinition Height="0.4*"/><RowDefinition Height="0.3*"/></Grid.RowDefinitions><Label Text="{Binding Date.Day}" Grid.Row="0" Margin="1"VerticalTextAlignment="Start" BackgroundColor="Transparent"><Label.FontSize><OnPlatform x:TypeArguments="x:Double"><On Platform="iOS" Value="14" /><On Platform="Android" Value="14" /><On Platform="UWP" Value="20" /></OnPlatform></Label.FontSize></Label><Label Text="{Binding Fare}" Grid.Row="1" TextColor="#2A8A94"FontAttributes="Bold" HorizontalTextAlignment="Start"VerticalTextAlignment="Center" BackgroundColor="Transparent"><Label.FontSize><OnPlatform x:TypeArguments="x:Double"><On Platform="iOS" Value="12" /><On Platform="Android" Value="12" /><On Platform="UWP" Value="22" /></OnPlatform></Label.FontSize></Label><Grid Grid.Row="2" BackgroundColor="Transparent"><Grid.ColumnDefinitions><ColumnDefinition Width="0.3*"/><ColumnDefinition Width="0.7*"/></Grid.ColumnDefinitions><Label Text="{Binding Plane}" Margin="1,0,0,0" TextColor="{Binding Color}" Grid.Column="0"VerticalOptions="Center" HorizontalOptions="Center"HorizontalTextAlignment="Center" VerticalTextAlignment="Center"><Label.FontFamily><OnPlatform x:TypeArguments="x:String"><On Platform="iOS" Value="airlines" /><On Platform="Android" Value="airlines.ttf#airlines" /><On Platform="UWP" Value="Assets/airlines.ttf#airlines" /></OnPlatform></Label.FontFamily><Label.FontSize><OnPlatform x:TypeArguments="x:Double"><On Platform="iOS" Value="12" /><On Platform="Android" Value="12" /><On Platform="UWP" Value="22" /></OnPlatform></Label.FontSize></Label><Label Text="{Binding Airline}" Grid.Column="1" VerticalOptions="FillAndExpand"HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Start" VerticalTextAlignment="Center"><Label.FontSize><OnPlatform x:TypeArguments="x:Double"><On Platform="iOS" Value="8" /><On Platform="Android" Value="8" /><On Platform="UWP" Value="16" /></OnPlatform></Label.FontSize></Label></Grid></Grid></DataTemplate></syncfusion:MonthViewSettings.CellTemplate></syncfusion:MonthViewSettings></syncfusion:SfCalendar.MonthViewSettings><syncfusion:SfCalendar.BindingContext><local:AirfareViewModel/></syncfusion:SfCalendar.BindingContext></syncfusion:SfCalendar></Grid></ContentPage.Content>

Create a behavior class CalendarPageBehavior and initialize the view model with calendar date. Then, set the binding context for each month cell in the calendar using the OnMonthCellLoaded event.

public class CalendarPageBehavior : Behavior<ContentPage>{private SfCalendar calendar;protected override void OnAttachedTo(ContentPage bindable){base.OnAttachedTo(bindable);this.calendar = bindable.FindByName<SfCalendar>("calendar");this.calendar.MinDate = DateTime.Now;this.WireEvents();}private void WireEvents(){calendar.OnMonthCellLoaded += Calendar_OnMonthCellLoaded;}private void Calendar_OnMonthCellLoaded(object sender, MonthCellLoadedEventArgs e){e.CellBindingContext= (calendar.BindingContext as AirfareViewModel)?.UpdateAirfareData(e.Date);}protected override void OnDetachingFrom(ContentPage bindable){base.OnDetachingFrom(bindable);this.UnWireEvents();}private void UnWireEvents(){calendar.OnMonthCellLoaded -= Calendar_OnMonthCellLoaded;}}

Now, the Calendar control is configured with an application display the cheapest airfares from among the listed airlines. Just running the sample with the previous steps will render a scheduler with appointments.

Conclusion

In this blog post, we’ve discussed designing an airfare calendar using the Xamarin.Forms Calendar. You can also check out our project samples in this GitHub repository. Feel free to try out this sample and share your feedback or questions in the comments section. You can also contact us through our support forum, Direct-Trac, or feedback portal. We are happy to assist you.

References

https://www.syncfusion.com/blogs/post/designing-airfare-calendar-using-pure-javascript-scheduler2.aspx https://help.syncfusion.com/xamarin/sfcalendar/how-to#how-to-customize-month-view-cell-using-a-template

Originally published at https://www.syncfusion.com on November 6, 2019.

--

--

--

Syncfusion provides third-party UI components for React, Vue, Angular, JavaScript, Blazor, ASP.NET Web Forms, MVC, Core, WinForms, WPF, UWP and Xamarin.

Recommended from Medium

4. Human-Computer Interaction and methods(16.03.20) 1/3

Has lockdown changed the corporate technology standards for good — let’s hope so.

After the completion of my 8 weeks doing zuriinternship i hope to be in a better position than i…

PROVING WAYS TO EASILY CODE AND PROGRAMME FOR BEGINNERS

Top 3 Alternatives To ipdata For A Free IP Geolocation API

Get Agriculture Spot Rates With An API

It’s like totally time to build your web site on Hubzilla

Progress, is a web app

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Suresh Mohan

Suresh Mohan

Suresh is a Product Manager at Syncfusion and a technology enthusiast. He helps people follow best practices in coding and in using Syncfusion controls.

More from Medium

How to Add an Alert Notification UI to Your .NET MAUI App

How to Add an Alert Notification UI to Your .NET MAUI App

Chrome extension development with Clean Architecture (a PoC)

Scalable typography system

Guidelines to follow while writing unit tests in Android