What problem does this address?
When navigating between months, the calendar grid changes height because some months have more rows than others. This causes a visible layout shift, especially noticeable when the calendar is inside a popover above an input field, where the navigation arrows jump up and down. That's a pretty common use case.
What is your proposed solution?
Always display 6 rows in the calendar grid, filling any empty cells at the start and end with muted days from the previous and next months. This keeps the height consistent regardless of the month. Google Calendar handles it this way.
Here is what it can look like:
Google Calendar:
What problem does this address?
When navigating between months, the calendar grid changes height because some months have more rows than others. This causes a visible layout shift, especially noticeable when the calendar is inside a popover above an input field, where the navigation arrows jump up and down. That's a pretty common use case.
What is your proposed solution?
Always display 6 rows in the calendar grid, filling any empty cells at the start and end with muted days from the previous and next months. This keeps the height consistent regardless of the month. Google Calendar handles it this way.
Here is what it can look like:
Google Calendar: