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.