Page 1 of 1

[REACT] Not all dates are displayed in the header

Posted: Tue Aug 16, 2022 3:04 pm
by jeffreybos

We have a datepicker and a preset switcher. In month view, not all days are always shown.

What are we doing wrong? I have attached our project as an attachment. I've also added some images

Reproduction path 1

  1. Open the react application
  2. Switch from day to month
  3. Switch from month to day
  4. Switch from day to month
  5. Notice that not all days are shown

Reproduction path 2

  1. Open the react application
  2. Switch from day to month
  3. Use datepicker and click on 01/09/2022
  4. Use datepicker and click on 01/10/2022
  5. Notice that not all days are shown

Re: [REACT] Not all dates are displayed in the header

Posted: Tue Aug 16, 2022 5:04 pm
by mats

Looks like CSS file is corrupted, can you please double check you're including the correct file?


Re: [REACT] Not all dates are displayed in the header

Posted: Tue Aug 16, 2022 5:10 pm
by jeffreybos

I used the default boilerplate from you the guide (npx create-react-app my-app --template @bryntum/cra-template-typescript-schedulerpro) and didn't add any CSS. I have tried it with different themes and with each theme this happens.

    /**
 * Main application sass file that contains all the application styling
 */

// import bryntum theme
@import '~@bryntum/schedulerpro/schedulerpro.stockholm.css';

body,
html {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-family: Lato, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
}
#container {
    flex: 1 1 100%;
}

Re: [REACT] Not all dates are displayed in the header

Posted: Thu Aug 18, 2022 1:05 pm
by jeanphi

Hi,

Let me investigate with you what's happening on your computer. We may have missed something.
So I downloaded the .zip you provided and installed then ran your app.
Then I tried both scenarios you provided but didn't encounter the same issue, unfortunately.

Can you check the video attached and confirm we are playing your scenarios properly?

If this is the case, please tell me precisely what browser you are running your app(type, version).

Regards,

Jean-Philippe


Re: [REACT] Not all dates are displayed in the header

Posted: Thu Aug 18, 2022 2:45 pm
by jeffreybos

I see the same issue come up when you stop the video at 17 seconds.

I will also make a video of what it looks like for me.


Re: [REACT] Not all dates are displayed in the header

Posted: Thu Aug 18, 2022 4:32 pm
by jeffreybos
jeanphi wrote: Thu Aug 18, 2022 1:05 pm

Hi,

Let me investigate with you what's happening on your computer. We may have missed something.
So I downloaded the .zip you provided and installed then ran your app.
Then I tried both scenarios you provided but didn't encounter the same issue, unfortunately.

Can you check the video attached and confirm we are playing your scenarios properly?

If this is the case, please tell me precisely what browser you are running your app(type, version).

Regards,

Jean-Philippe

See the attached video.

I tested it in
Chrome Version 104.0.5112.101 (Official Build) (arm64)
Brave Version 1.42.88 Chromium: 104.0.5112.81 (Official Build) (arm64)
Firefox 103.0.2 (64-bit)


Re: [REACT] Not all dates are displayed in the header

Posted: Fri Aug 19, 2022 3:20 am
by jeanphi

Oh I see, I didn't spot it the first time.
Let me discuss it internally and I'll come back to you as soon as possible.

Regards,

Jean-Philippe


Re: [REACT] Not all dates are displayed in the header

Posted: Fri Aug 19, 2022 10:27 am
by alex.l

I was able to reproduce it, looks relevant to react. Here is a ticket to fix it https://github.com/bryntum/support/issues/5085
Thank you for the report.