AllDay Schedule visualization problem when GMT0 Timezone and startDayOfWeek is 1

[marcosesperon]

Describe the bug

I would like to inform you about a visualization problem when using combination of custom Timezone and startDayOfWeek set to 1.

With these parameters, when you are in month view and an allday schedule is created on a specific date, you will see another indicator on other cell of the calendar.

To Reproduce

You can reproduce the behavior: https://jsfiddle.net/marcosesperon/ho8x63fs/15/

That happens also if the schedule start/end dates are "'2022-04-04T00:00:00+00:00"

Expected behavior

This not happens when is a previous date, like "2022-03-14T00:00:00+00:00"

Screenshots

Thanks!

[adhrinae]

@marcosesperon

Thanks for the report. I cannot reproduce the problem in my machine, but it might be related to the Daylight Saving Time rendering issue.

Could you tell me what's your timezone and the browser you've tested?

[marcosesperon]

@adhrinae

Hi! Thank you so much for your time!

I didn't realize it could be related to my timezone. I'm from Spain, so my default timezone will be Europe/Madrid.

I can reproduce the problem on any browser (Safari, Firefox, Edge and Chrome) and platform (macOS or Win

Safari: )

Firefox:

Edge:

Edge on Windows:

Thanks again!!

[adhrinae]

@marcosesperon

I confirmed that the problem is reproduced in your time zone. I'll investigate it deeper but I can't guarantee it'll be resolved soon.

[marcosesperon]

@adhrinae Thank you again!

Meanwhile, I saw that those extra elements are created with "width:0%".

But because of the inside padding it is shown anyway. So, if the element would have the property "overflow:hidden" when the width is "0%" then, at least visually, the problem is fixed.

It could be great if the component set that overflow property when that width.

Right now, I could use the "afterRenderSchedule" event to check it and set the property:

'afterRenderSchedule': function(ev) {
      $('.tui-full-calendar-weekday-schedule-block-' + ev.schedule.__fe_id).each(function(){
        if(typeof this.style != 'undefined' && this.style.width != 'undefined' && this.style.width === '0%') this.style.overflow = 'hidden';
      });
}

But it is a temporary fix because of the big performance impact.

Thank you!! Regards