search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.52k stars 1.31k forks source link

[DateRangeCalendar] Calendar layout breaks when changing the `timezone` prop from UTC to something else #12200

Closed jesse-garrison-panther closed 8 months ago

jesse-garrison-panther commented 8 months ago

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/crimson-mountain-23ln64

Steps:

  1. On first load the calendars should look correct when in UTC mode
  2. Use the select located below the calendars to change the timezone
  3. Notice that the calendar date layout is incorrect - the dates start at the bottom of the calendar and only one row of dates is shown

Current behavior

When changing from UTC to a different timezone, the date layout is incorrect

On first load it looks correct in UTC mode: image

Then after updating the timezone, the dates are rendered at the bottom of the calendars: image

Expected behavior

When changing timezones from UTC to another timezone, the date layout should be rendered correctly where the dates are aligned to the top of the calendar and all dates for the month are shown.

Context

I want to allow users to select a timezone from a dropdown and when it changes, I want the calendar to update accordingly.

Your environment

npx @mui/envinfo ``` System: OS: macOS 14.1.2 Binaries: Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm pnpm: Not Found Browsers: Chrome: 121.0.6167.184 Edge: 121.0.2277.128 Safari: 17.1.2 npmPackages: @emotion/react: 11.11.3 @emotion/styled: 11.11.0 @mui/base: 5.0.0-beta.32 @mui/core-downloads-tracker: 5.15.5 @mui/icons-material: 5.15.7 @mui/material: 5.15.5 @mui/private-theming: 5.15.5 @mui/styled-engine: 5.15.5 @mui/system: 5.15.5 @mui/types: 7.2.13 @mui/utils: 5.15.5 @mui/x-data-grid: 6.19.3 @mui/x-data-grid-generator: 6.19.3 @mui/x-data-grid-premium: 6.19.3 @mui/x-data-grid-pro: 6.19.3 @mui/x-date-pickers: 6.19.3 @mui/x-date-pickers-pro: 6.19.3 @mui/x-license-pro: 6.10.2 @types/react: ^18.2.48 => 18.2.48 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.3.3 => 5.3.3 ```

I'm seeing the issue in Chrome (Version 121.0.6167.184 (Official Build) (arm64)) on macOS 14.1.2 (23B92)

Search keywords: DateRangeCalendar, timezone, pickers

LukasTy commented 8 months ago

@jesse-garrison-panther thank you for raising this issue. 🙏 It looks like a duplicate of https://github.com/mui/mui-x/issues/10804 as the same underlying component is used in both DateCalendar and DateRangeCalendar. I'm closing this issue as duplicate, feel free to follow the mentioned issue to track its progress. 😉

github-actions[bot] commented 8 months ago

:warning: This issue has been closed. If you have a similar problem, please open a new issue and provide details about your specific problem. If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @jesse-garrison-panther? Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.