This PR introduces a dynamic Calendar component that allows users to select check-in and check-out dates for bookings. The component includes the following features:
date Validation: Ensures selected dates are within the valid range, including minimum stay requirements and booked dates;
interactive Navigation: Supports month navigation with flip animations;
styling & Tooltips: Conditional styling for selected dates, past dates, and tooltips for minimum stay info;
customizable: Configurable width, height, and other styles, with support for search bar calendars and custom booked dates;
date calculations, including minimum stay requirements are synchronized between the calendar in the Product Page, the calendar in the ReservationCard, and the input fields in the ReservationCard, ensuring that changes in the calendar update the input values and vice versa.
the logic for the calendar in the Search Bar is separated from the above components, ensuring that the date validation and minimum stay logic does not apply to the calendar used in the search bar.
Initial View of the Calendars:
the past dates and already booked dates are marked as unavailable, with a distinct styling to indicate they cannot be selected;
once the check-in and check-out dates are selected, the user can see all available dates if they decide to change the dates.
Once a check-in date is selected, all previous dates and dates after already booked dates automatically become unavailable for check-out, ensuring the user can only select valid dates within the available range
If the user tries to select checkout date or checkIn date before already booked dates in range less than the minimum stay requirements, a tooltip appears with an informational message.
The day before already booked range is of course for checkout only:
The days between the selected check-in and check-out dates are styled to visually highlight the range. Additionally, both the check-in and check-out dates have their own individual tooltips on hover. The dates are calculating avery time chekIn and checkOut were selected.
The calendar is synchronized with the input fields in both directions, meaning any changes in the calendar automatically update the inputs, and any changes in the inputs reflect on the calendar.
The calendars in the SearchBar are designed solely for picking dates without synchronization with the input fields and tabs for now. It was prepared for future development, including adding filter functionality.
This PR introduces a dynamic Calendar component that allows users to select check-in and check-out dates for bookings. The component includes the following features:
Initial View of the Calendars:
Once a check-in date is selected, all previous dates and dates after already booked dates automatically become unavailable for check-out, ensuring the user can only select valid dates within the available range
If the user tries to select checkout date or checkIn date before already booked dates in range less than the minimum stay requirements, a tooltip appears with an informational message.
The day before already booked range is of course for checkout only:
The days between the selected check-in and check-out dates are styled to visually highlight the range. Additionally, both the check-in and check-out dates have their own individual tooltips on hover. The dates are calculating avery time chekIn and checkOut were selected.
The calendar is synchronized with the input fields in both directions, meaning any changes in the calendar automatically update the inputs, and any changes in the inputs reflect on the calendar.
The calendars in the SearchBar are designed solely for picking dates without synchronization with the input fields and tabs for now. It was prepared for future development, including adding filter functionality.