Practice Challenges

Double Calendar Flight Range

FlyAir lets users select travel dates. The calendar has no selection constraints, allowing users to select a return date that precedes their departure date, causing payment errors and flight booking drops.

Select a Challenge Brief (5)

“

A traveler books a return flight on a date before their departure because the date picker lets them select any range.

Intermediate— Requires managing dual-month grids, date range hover connections, and disabled past dates.

Context & Background

FlyAir lets users select travel dates. The calendar has no selection constraints, allowing users to select a return date that precedes their departure date, causing payment errors and flight booking drops.

Target Users

Travelers booking flights on laptops, who need to select precise date ranges without calculation errors.

Inspiration & Benchmarks

Airbnb Calendar— Industry gold standard for smooth date range grids and pricing updates.
Google Flights Picker— Fast, keyboard-responsive calendar inputs.

Your Task

Design a web date-range calendar picker. Show active selections, range hover states, disabled past dates, and month-switching button triggers.

Hard Constraints

  • Must display a 2-month calendar side-by-side
  • Past dates must be styled as disabled and unclickable
  • Must show the selected range highlights clearly

Concepts This Tests

Error PreventionGestalt Principles

Evaluate Yourself

0/4 completed (0%)