Date Range Calendar

3 Minutes to read
Contributors

Article summary

Did you find this summary helpful?

Thank you for your feedback

An overview of date range functionality

A Date Range picker is a calendar tool that allows users to select a range of dates, such as July 1, 2022, to July 10, 2022.

The functionality of a Date Range calendar is very different from that of a standard calendar, and it provides organizations all over the world with a multitude of options. Ithas the unique ability to simplify users' lives and provide information in a manner that best meets their needs.

EXAMPLE

Assume that a company tracks employee attendance and absences using the Date Range calendar. When recording attendance or requesting leave, this calendar may use color coding to indicate the number of days an employee was present, on leave, or not present. Even the working days, weekends, and holidays (including public holidays) are displayed, allowing the staff to plan their actions appropriately.

Relation between Date Range Calendar and Data Source

The Date Range calendar does not have its own intelligence to automatically adjust to the needs of the organization to show what dates are weekends or weekdays or holidays. As it is today, we also do not have any provision to define the particulars in the Date Range calendar directly.

So, the calendar relies on the data sources to obtain wisdom (attendance type for a date and its color code) from its data pool and mimics the same when the calendar is accessed every time.

Let's look at a real-world scenario to configure and use the Date Range Picker in Quixy.

Use Case:

In many organizations, employees mark their attendance and apply leaves digitally. Let’s see how our date range calendar eases the lives of the employees when marking their attendance or applying leaves.

A Date Range calendar can be configured in such a way that it can communicate the information below as soon as the Date Range picker is opened by the users:

Attendance:

Dates Present: The color of the date should be Green.
Dates Absent: The color of the date should be Yellow.

Holidays and leaves:

Weekends – Color on the date should be Gray. These dates should be disabled or unpickable for marking attendance.
Leave – Color on the date should be Red. These dates should be disabled or unpickable for marking attendance.
Working Weekdays – No color coding for the dates. These dates are pickable for either marking attendance or applying for leave.

How to configure a Date Range picker?

Placing a Date Range calendar in an app is simple, but before that, a data source must be created to feed data to the Date Range calendar so that it can display its colors (Present or Absent or Leave) while in action.

NOTE

Moving forward, the article will show you the detailed steps on how an application, data tables, and data sources work hand-in-hand to keep the Date Range calendar working as expected.

Steps to Configure Date Range Picker

Create a data table (e.g., Attendance Type & Color) with Boolean values to determine if dates are selectable.
Create another data table (e.g., Attendance Data) to store attendance details.
Create a data source that combines these tables and use it in the Date Range calendar.
Create a reference on top of the data source to be used in the Date Range calendar.

Data Table 1 (Attendance Type & Color)

NOTE

What is the use of Boolean?

As universally known, Boolean accepts True or False values. In the case of Date Range, the Boolean values make the dates on the calendar to be either pickable (selectable) or unpickable (unselectable).