[pickers] fix the issue of the timezone change in Day calendar

[shaharyar-shamshi]

fixes #12195

[shaharyar-shamshi]

Example code

import * as React from 'react';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

export default function BasicDateRangeCalendar() {
  const [time, setTime] = React.useState('UTC');

  return (
    <>
      <div>
        <select onChange={(event) => setTime(event.target.value)}>
          <option value="UTC">UTC</option>
          <option value="America/New_York">America/New_York</option>
        </select>
      </div>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DemoContainer components={['DateRangeCalendar']}>
          <DateRangeCalendar timezone={time} />
        </DemoContainer>
      </LocalizationProvider>
    </>
  );
}

import * as React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

export default function BasicDateCalendar() {
  const [time, setTime] = React.useState('UTC');
  return (
    <>
      <div>
        <select onChange={(event) => setTime(event.target.value)}>
          <option value="UTC">UTC</option>
          <option value="America/New_York">America/New_York</option>
        </select>
      </div>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DateCalendar timezone={time} />
      </LocalizationProvider>
    </>
  );
}

[mui-bot]

Deploy preview: https://deploy-preview-12256--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against a340814

[shaharyar-shamshi]

@LukasTy @michelengelen It seems to work I did some manual testing on this two example if you can also help in checking manually it would be great help. It is just sanity testing to check whether I am proceeding in right direction and didn't miss any case.

I will add the test cases later.

Q) Why I consider this two example only ?
Answer) because DateCalendar and DateRangeCalendar internally uses DayCalendar

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[shaharyar-shamshi]

@LukasTy @michelengelen It seems to work I did some manual testing on this two example if you can also help in checking manually it would be great help. It is just sanity testing to check whether I am proceeding in right direction and didn't miss any case.

I will add the test cases later.

Q) Why I consider this two example only ? Answer) because DateCalendar and DateRangeCalendar internally uses DayCalendar

@michelengelen @LukasTy if you can check it

[shaharyar-shamshi]

@LukasTy If you can kindly review the PR. I assume argos failing test can be ignored as current image is correct.

[LukasTy]

@shaharyar-shamshi Thank you for taking your time on this issue.
I'm looking into it to identify if a bit more proper solution could be applied.
This looks like a fix for this one condition, it works and that's great, but we still don't know where else we might have a problem with the timezone not being updated when it is changed. 🙈

[shaharyar-shamshi]

@shaharyar-shamshi Thank you for taking your time on this issue. I'm looking into it to identify if a bit more proper solution could be applied. This looks like a fix for this one condition, it works and that's great, but we still don't know where else we might have a problem with the timezone not being updated when it is changed. 🙈

I think problem is more of how we manage the timezone change. Timezone in itself work but major problem is how we are actually using that changed timezone.

For example in this example timezone change was working correctly but we were not correctly handling the returned result by normalization.

I am also checking other places where we might encounter similar kind of issue with timezone.

[LukasTy]

@shaharyar-shamshi I've created a PR (#12321), which, I think, solves the problem in a bit more reliable and correct way.
I think it supersedes this PR.
Feel free to check and review it. 😉