Multi Component Calendar System

2025

2025

UX

UX

Context

Currently, I am in the UX team at ConnectMakeMyTrip’s B2B platform for hotel partners; building tools that empower them to manage and grow their business. Our B2B platform is the nerve center for hoteliers, allowing them to manage bookings, revenue, promotions, amenities, availability and more — all in one place.

View this on a desktop or laptop for best experience.

Selecting multiple dates (10th, 12th) with ‘Monthly’ repetition applied until 11 March 2028.

Selecting a date range and setting repetition pattern.

The Chameleon Configurations

-- Single Component, Universal Use-cases! --

This modular approach was a deliberate design and engineering consideration. The separation of concerns into ‘Dates,’ ‘Date Ranges,’ ‘Days of the week,’ and the distinct ‘Repetition’ panel means these elements can function as standalone blocks. For other platform features with less complex requirements — such as needing only single date picks without repetition, or just a simple date range selector — we can easily reconfigure and reuse the core calendar component by hiding or omitting the unnecessary sections. This adaptability ensures a consistent user experience platform-wide and optimizes our development resources.

🦎

Selecting a date range and setting repetition pattern.

Multi Component Calendar System

2025

UX

Context

Currently, I am in the UX team at ConnectMakeMyTrip’s B2B platform for hotel partners; building tools that empower them to manage and grow their business. Our B2B platform is the nerve center for hoteliers, allowing them to manage bookings, revenue, promotions, amenities, availability and more — all in one place.

Currently, I am in the UX team at ConnectMakeMyTrip’s B2B platform for hotel partners; building tools that empower them to manage and grow their business. Our B2B platform is the nerve center for hoteliers, allowing them to manage bookings, revenue, promotions, amenities, availability and more — all in one place.

Selecting multiple dates (10th, 12th) with ‘Monthly’ repetition applied until 11 March 2028.

Selecting multiple dates (10th, 12th) with ‘Monthly’ repetition applied until 11 March 2028.

Selecting a date range and setting repetition pattern.

Selecting a date range and setting repetition pattern.

Selecting a date range and setting repetition pattern.

Selecting a date range and setting repetition pattern.

The Chameleon Configurations

The Chameleon Configurations

-- Single Component, Universal Use-cases! --

-- Single Component, Universal Use-cases! --

This modular approach was a deliberate design and engineering consideration. The separation of concerns into ‘Dates,’ ‘Date Ranges,’ ‘Days of the week,’ and the distinct ‘Repetition’ panel means these elements can function as standalone blocks. For other platform features with less complex requirements — such as needing only single date picks without repetition, or just a simple date range selector — we can easily reconfigure and reuse the core calendar component by hiding or omitting the unnecessary sections. This adaptability ensures a consistent user experience platform-wide and optimizes our development resources.

This modular approach was a deliberate design and engineering consideration. The separation of concerns into ‘Dates,’ ‘Date Ranges,’ ‘Days of the week,’ and the distinct ‘Repetition’ panel means these elements can function as standalone blocks. For other platform features with less complex requirements — such as needing only single date picks without repetition, or just a simple date range selector — we can easily reconfigure and reuse the core calendar component by hiding or omitting the unnecessary sections. This adaptability ensures a consistent user experience platform-wide and optimizes our development resources.

🦎

🦎

Selecting multiple dates (10th, 12th) with ‘Monthly’ repetition applied until 11 March 2028.

Selecting a date range and setting repetition pattern.

Selecting a date range and setting repetition pattern.

The Chameleon Configurations

-- Single Component, Universal Use-cases! --

This modular approach was a deliberate design and engineering consideration. The separation of concerns into ‘Dates,’ ‘Date Ranges,’ ‘Days of the week,’ and the distinct ‘Repetition’ panel means these elements can function as standalone blocks. For other platform features with less complex requirements — such as needing only single date picks without repetition, or just a simple date range selector — we can easily reconfigure and reuse the core calendar component by hiding or omitting the unnecessary sections. This adaptability ensures a consistent user experience platform-wide and optimizes our development resources.

🦎