Calendar views

Air Calendar provides 9 different views plus two custom views that you can define yourself. Below are the different views, actions, triggers and states.

DayGrid view

A DayGrid view is a view with one or more columns, each representing a day. The pre-configured DayGrid views are dayGridDay and dayGridWeek.

dayGridDay: A view with one column listing the available events in the day. By default it shows one day but you can create a custom view dayGridDay view to show any number of days. e.g. a 3 day dayGridDay.

dayGridWeek : A view with two or more columns each representing a day. By default this will show a one week view. But you can create a custom dayGridWeek view to show any number of weeks, e.g. a 2 week dayGridWeek.

dayGridMonth : This is monthly view that displays the current month’s days, and usually a few days of the previous and next months, in a table-like format. There is no custom dayGridMonth view.

TimeGrid view

A TimeGrid view displays one-or-more horizontal days as well as an axis of time, usually midnight to midnight, on the vertical axis. The two predefined TimeGrid views are the timeGridWeek and timeGridDay views.

timeGridDay : A view that displays a horizontal days with a time axis. You can create a custom timeGridDay view with a different number of days.

timeGridWeek: A view that displays a horizontal days with a time axis. You can create a custom timeGridWeek view with a different number of weeks.

List view

A list view displays events in a simple vertical list for a specific interval of time.

There are 4 preset list views: listDay, listWeek, listMonth, and listYear.

You can create a custom list view that displays a different number of days, weeks, months or years.

States

current view's name: The current view's name as text. Possible values are any one of the available views listed above. e.g. timeGridWeek. Note that this is case-sensitive (meaning the small letters and capital letters should be exactly as listed above)

current view's title : Title text that is displayed at the top of the header (such as “September 2009” or “Sep 7 - 13 2009”).

current view's activeStart date : A Date that is the first visible day. In month-view, this value is often before the 1st day of the month, because most months do not begin on the first day-of-week.

current view's activeEnd date : A Date that is the exclusive last visible day.

current view's currentStart date : A Date that is the start of the interval the view is trying to represent. For example, in month view, this will be the first of the month. This value disregards hidden days. You can use this to restrict the number of events the calendar fetches.

current view's currentEnd date :A Date that is the exclusive end of the interval the view is trying to represent. For example, in month view, this will be the day after the last day of the month (because it is exclusive). This value disregards hidden days. You can use this to restrict the number of events the calendar fetches.

Triggers

view changes: Triggered when a calendar's view changes.

Note: This will be triggered the first time a calendar page is loaded.

Actions

change view: Immediately switches the calender to a different view.

This action can be supplied some properties depending on whether you're picking the view name statically from the available views or getting it dynamically from another element (e.g. a dropdown value).

Changing view statically

Static view name : The name of the new view to switch to. Date : If you’d like to navigate to a new date while simultaneously switching to a new view, you can specify a date parameter.

change view action using a static view name

Changing view name dynamically

Get view name dynamically: Check this box if you want to get the name of the view to switch to dynamically. This can be used if you're getting the view name from say a dropdown. This this case you will call this action in the dropdown value's change event. Then you can get the dropdown value as Dynamic view name : The view name to switch two. Can be any one of the supported view names: timeGridDay, timeGridWeek, dayGridDay, dayGridWeek, dayGridMonth,listDay, listWeek, listMonth, listYear , customView1, customView2.

change view action with dynamic view name

Important: view names are case-sensitive. They must be specified exactly as specified above taking note of the lower and upper case.