Screen patterns

Calendar

A screen substantially organized around a visible calendar or date-selection surface.

  1. Cleartrip: Choose hotel dates

    Calendar range selection for hotel check-in and checkout with confirmation.

    Cleartrip Choose hotel dates

    View the screen

  2. Cleartrip: Choose flight departure date

    Departure-date calendar with daily fare estimates, a selected date, optional return date, and Done.

    Cleartrip Choose flight departure date

    View the screen

  3. District: Event ticket selection with date, time and cart

    'Choose date and time' with a horizontal date chip row (19–31 Aug) and a time chip, a 'Redeem your pass by paying on District' banner, a 'Choose tickets' section with a named Cover Ticket at ₹100 and a quantity stepper set to 1, and a bottom bar showing ₹100 next to an enabled Checkout button.

    District Event ticket selection with date, time and cart

    View the screen

  4. MakeMyTrip: Activity booking — Select Date

    A month calendar for choosing the visit date, with weekday headers, the current selection highlighted, FROM DATE and TO DATE summary fields and a DONE confirm button.

    MakeMyTrip Activity booking — Select Date

    View the screen

  5. BookMyShow: Event date and time

    Step 1 of the booking wizard (Date & Time / Ticket / Review) showing the venue line and Select Date chips for the available nights.

    Premium screenshot

    View the screen

More examples with Premium

Premium unlocks the remaining screenshots.