Weird behavior of Scheduler Week View

2 Answers 96 Views
Scheduler
Bernd
Top achievements
Rank 5
Bronze
Bronze
Bronze
Bernd asked on 24 Mar 2022, 03:39 PM

I have a very weird behavior of the Scheduler Week view. As you can see on the screenshots the work hours on Sunday show a different timing as on the other days and the last row on the bottom only shows 6 columns instead of 7. And to make it even more weird: This only happens if the view is set to the current week. As soon as I navigate to a different week as the current one, it shows as expected.

Here is my setup of the scheduler itself:


<Scheduler
	data={calendarData}
	defaultDate={displayDate}
	height={calculateSchedulerHeight()}
	timezone="CET"
	slot={CustomSlot}
	onDataChange={handleDataChange}
	editable={{
		add: true,
		remove: false,
		drag: false,
		resize: false,
		select: false,
		edit: true,
	}}
	form={
		isColumnEmpty ? NewProfileForm : EditProfileForm
	}
	footer={(props) => <React.Fragment />}
	header={CustomSchedulerHeader}
	defaultView="month"
>
	<DayView
		slotDivisions={1}
		showWorkHours={false}
		workDayStart="06:00"
		workDayEnd="19:00"
		editItem={CalendarProfileItem}
	/>
	<WeekView
		// workWeekStart={Day.Monday}
		// workWeekEnd={Day.Friday}
		showWorkHours={false}
		workDayStart="06:00"
		workDayEnd="20:00"
		slotDivisions={1}
		editItem={CalendarProfileItem}
		currentTimeMarker={false}
		viewSlot={CustomSlot}
	/>
	<MonthView
		slot={CustomMonthSlot}
		itemsPerSlot={10}
		editItem={CalendarMonthItem}
		viewSlot={MonthSlot}
	/>
</Scheduler>

And here is the setup of my CustomSlot function, where I only add some different behavior on double click:

const CustomSlot = (props: SchedulerSlotProps) =>
	props.isAllDay ? (
		<SchedulerSlot
			{...props}
			style={{
				...props.style,
				backgroundColor: dropzoneColor,
				height: '35px',
			}}
		/>
	) : (
		<SchedulerSlot
			{...props}
			onDoubleClick={async (event) => {
				const eventColumn = event.target.props.col;
				const day = dateToWeekday(props.start);
				const emptyDay: boolean = isDayEmpty(props.start, day);
				setIsColumnEmpty(emptyDay);
				if (emptyDay === false) {
					const profileId = getProfileIdFromExceptions(
						props.start,
						day
					);
					if (profileId) {
						changeItem.current = {
							profile: profileId,
							column: eventColumn,
							startDate: props.start,
						};
						setSelectedProfile({ id: profileId, label: '' });
						setSelectedDay(eventColumn);
						setSelectedDate(props.start);
					}
				}
				props.onDoubleClick && props.onDoubleClick(event);
			}}
		/>
	);

So I guess nothing too weird here. There was even another issue because it showed a huge white area on the right of the Scheduler viewport and also showed the current time marker (both also only for the current week) but I could solve that by assigning the viewSlot and setting the CurrentTimeMarker to false.  If needed I can try setup something on StackBlitz but it's not so easy because my app is quite large... Any idea would be appreciated.

 

2 Answers, 1 is accepted

Sort by
1
Accepted
Stefan
Telerik team
answered on 30 Mar 2022, 11:18 AM | edited on 30 Mar 2022, 11:19 AM

Hello, Bernd,

Thank you for the example.

After tests we can confirm that this is an issue with the KendoReact Scheduler and I logged it for fixing:

https://github.com/telerik/kendo-react/issues/1268

Currently, there is no workaround and if one is found it will be added to the item.

Apologies for the inconvenience this may have caused you.

Additionally, I have added some Telerik points to your account for bringing this to our attention.

1
Stefan
Telerik team
answered on 28 Mar 2022, 07:31 AM

Hello,

Thank you for all of the details.

That seems to connect with the `daylight saving time` that was on Sunday. I assume that is the reason why it is only on that week and not on the others.

Still, we tried to reproduce it with the latest version and it was render as expected.

Could you please test with the latest version and advise if the issue still occurs?

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Bernd
Top achievements
Rank 5
Bronze
Bronze
Bronze
commented on 29 Mar 2022, 09:26 AM

Hi.

Ok, I updated all my kendo-react components to 5.1.0 and the only issue that's left is that at the bottom of this week, there are still 6 columns instead of 7 (see screenshot). I think the switch to the summer time could indeed be the reason for this but I have no clue how I could solve this. Maybe it has an impact, that I use the LocalizationProvider and the IntlProvider and set it to "de-de" or the timezone is CET? Just guessing here...

Greetings,

Bernd

Stefan
Telerik team
commented on 29 Mar 2022, 11:21 AM

Hello, Bernd,

Thank you for the extra information.

To see if these are indeed the reasons, please the following:

1) Remove the timezone `CET`

2) Remove the LocalizationProvider just for the test.

If removing one or both of them resolves to issue, then we will know which case to investigate.

Bernd
Top achievements
Rank 5
Bronze
Bronze
Bronze
commented on 30 Mar 2022, 08:31 AM

Hi.

It is the LocalizationProvider and the IntlProvider. I have created a demo here:

https://stackblitz.com/edit/react-sdtpkg?file=app%2Fmain.tsx

If you switch to "Full Week" and then go to the week starting on the 21st March and show all hours, scroll down and you'll see that the last row has one column less than the others (see screenshot). If you remove the Providers the behavior is different. Not sure if I did something wrong here or if it is a bug.

Greetings,

Bernd

Tags
Scheduler
Asked by
Bernd
Top achievements
Rank 5
Bronze
Bronze
Bronze
Answers by
Stefan
Telerik team
Share this question
or