I am using Uber's Base Web framework to create a web app and I would like to use the calendar/datepicker with range in a different layout. This framework is a huge learning curve for me but that's partly why I am using it and I need some help understanding how I can use the overrides to repurpose the calendar component in the following way:
You can view the sandbox here.
Skyscanner has the calendar layout I am trying to achieve, which is:
- Calendar is not in a popup but instead is underneath the date input fields.
- Instead of next/previous buttons, the calendar scrolls vertically.
locale="en-GB"doesn't put Monday as the start of the week and throws aRangeError: locale must contain localize propertyerror.
My understanding is that I can use the overrides feature to create this by replacing the subcomponents, but I don't know where to find the names of the subcomponents and the customisable component properties.
I would really appreciate any guidance on how to do this. I have asked questions in the Slack for Base Web, but it is very inactive.
If I can figure out how to do this I will be able to customise all the other components/subcomponents.
Screenshot of Skyscanner's calendar:
