Designing an Airfare Calendar Using the Pure JavaScript Scheduler

For anyone who is looking for flight availability, checking for the lowest available airfare is the very first thing you do. Isn’t it nice when a single calendar can show you the lowest prices of all available flights on each day of a month for a specific route? Let’s walk through how to customize the scheduler component to design an airfare calendar displaying these lowest prices.

Before starting with the customization part, let’s go through an overview of the basic functionalities available in scheduler.

Overview

Scheduling can be anything that relates to a date and time. With our pure JavaScript scheduler component (Essential JS 2), you can plan and manage events or tasks during any specific interval of time. You can easily customize all the schedule elements based on your application-specific needs.

Built-in views

There are six display modes available—day, week, work week, month, agenda, and month agenda—out of which week mode is displayed as an active view. Each view can have its own set of configurations, allowing the same feature to be exhibited with different values on each view.

To navigate among views and dates, navigation options are available on the schedule header bar. The date range of the active view will also be displayed in the header bar, and clicking on it will open a calendar pop-up for ease of date selection.

Module injection

Module injection plays a vital role in our pure JavaScript platforms, as each schedule view is maintained as an individual module. Therefore, to work with specific views, the appropriate module needs to be first injected into the application. For example, to work only with the day view on scheduler, it is enough to inject the Day module alone.

Binding appointment data

Providing start and end time data is enough to display appointments in the scheduler.

Customizing scheduler to display airfare calendar

Let’s display only the month view for this customization. To achieve this, inject only the Month module using the code Schedule.Inject(Month). The lowest price available on each day needs to be displayed as appointments with style customization applied to them using a template option.

Here, the entire flight data of a specific month needs to be sorted based on the available fares. Since we’ve planned to display only a single piece of data per day, restrict the total data count to be the number of days of a month and assign only that filtered data count to the scheduler dataSource.

Other than these functionalities, we will also highlight the day of a month that has the comparatively overall lowest price.

Getting started

To build and run a new Essential JS 2 application in TypeScript, make use of the QuickStart project from GitHub and also install the necessary packages using the following command line.

Choose an appropriate path in your system and navigate to that path in the command prompt. Then type in the following commands one by one.

The npm install command will install all the needed JS 2 packages in the quickstart project. Now you can start directly adding the scheduler component-related code to it.

An additional step before starting to code is to check the settings within your system.config.js file, to see whether the schedule component’s dependency packages are mapped appropriately, as shown in the following code listing.

Ensure the CSS is referenced properly within the [src/styles/styles.css] file with the following code.

@import '../../node_modules/@syncfusion/ej2/material.css';

Using scheduler component

Now, define a div element with an ID to represent scheduler within the body section of your index.html file, as shown in the following code listing. To learn more basic details about how to get started with our pure JavaScript controls, refer to our documentation.

To render the scheduler on a page, import and initialize it within the app.ts file, as shown in the next code listing. Using the module injection method, inject only the Month module, using Schedule.Inject(Month).

Set the required properties, such as height, views and selectedDate.

views—To set a specific view in schedule. Here, we will be using only month view.

readonly—To prevent CRUD-related actions from being performed in a schedule.

Populating required data

Let’s assume we have the dataSource object with the following flight data: departure, arrival, airline name, fare, and other related fields, if needed. Let’s compare the rates of three flights per day on a specific route for the month of April 2018.

Since data for three flights a day for a whole month will be huge to define and handle here, for demo purposes, we are generating the random data object of count 90 with the required fields (three appointments per day for 30 days) through looping as defined in the following function.

The filtering process on the data collection is done and it is time to assign it to the schedule’s dataSource and display it on the scheduler. Now, each day will hold exactly one appointment, as per the filtering result.

Also, the appropriate fields given in the dataSource are mapped onto scheduler through the fields property.

Appearance customization

The readonly scheduler now displays with our provided flight data in a usual appointment style. To customize the appearance of it, we need to define the template option within the eventSettings property.

The template definition can be referenced from the following and its ID needs to be mapped to the template option of eventSettings property. Also, the styles used to customize the events need to be defined within the index.html file.

All is done and now the final thing is to highlight the overall lowest fare date of a month. To do so, we will make use of the dataBound event, within which we will check for the lowest fare for the month.

Summary

In summary, we have seen how to customize the scheduler through its built-in properties, using additional styling options to display it as an airfare calendar. Stay tuned, we will write more blogs showing how to customize scheduler in more enhanced ways to achieve other use case scenarios.

Try our scheduler component by downloading from the free trial or GitHub. Feel free to have a look at our online samples and documentation to explore other available options. If you have any queries or require clarification, please let us know in the comments section below. You can also contact us through our support forum or Direct-Trac. We are always happy to assist you!