This doesn't seem to work for me.
I have set the following styles, attempting to set the columns to 40px wide:
/deep/ .timeline-resource-grouping.e-schedule:not(.e-device)
.e-agenda-view
.e-content-wrap
table
td:first-child {
width: 90px;
}
/deep/ .timeline-resource-grouping.e-schedule .e-agenda-view .e-resource-column {
width: 100px;
}
/deep/ .e-schedule .e-timeline-month-view .e-date-header-wrap table col,
/deep/ .e-schedule .e-timeline-month-view .e-content-wrap table col {
/** Style to control the width of month columns manually */
width: 40px !important;
}
I've added this ref to my functional component code:
const dayWidth = useRef<number | undefined>(undefined);
I also have a variable for the schedule component by using this:
const [schedulerRef, setSchedulerRef] = useState<ScheduleComponent | undefined>(undefined);
const onRefChange = useCallback((scheduler: ScheduleComponent | null) => {
setSchedulerRef(scheduler ? scheduler : undefined);
}, [setSchedulerRef]);
<ScheduleComponent
ref={onRefChange}
In the eventRendered event, I have added this code.
if (schedulerRef?.currentView === 'TimelineMonth') {
dayWidth.current =
dayWidth.current ??
(document.querySelector('.e-date-header-wrap')?.clientWidth || 0) /
(new Date(
schedulerRef.selectedDate.getFullYear(),
schedulerRef.selectedDate.getMonth() + 1,
0
).getDate()
* (schedulerRef.activeViewOptions.interval as number)); //To calculate the width of a work cell
const diffInDay = args.data.data.count; //To calculate the number of days an event rendered.
const cellSelector = '.e-work-cells[data-date="' +
resetTime(args.data.startTime).getTime().toString() +
'"]';
const td = document.querySelector(cellSelector); //To find the work cell element in which the appointment started
const left = td ? (td as any).offsetLeft : args.element.style.left; //To calculate the left position of that work cell
args.element.style.left = left + 'px'; //To assign the above left position to the appointment element
args.element.style.width = diffInDay * dayWidth.current + 'px'; //To set width for the appointment element.
}
Since I am using Typescript, many of the provided lines of code were reported as unsafe due to the fact various things could be undefined. Also, React reports that the "td" has no offsetLeft property. I had to make minor adjustments to the way it was written.
Finally, I also added the actionComplete event:
actionComplete={(args) => {
if (
args.requestType === 'viewNavigate' ||
args.requestType === 'dateNavigate'
) {
dayWidth.current = undefined;
}
}}
The issue now is that when the window is resized or the layout changes, the events are the incorrect width.
Notice in this first screenshot that the layout is correct for this event. It starts on the 3rd and ends on the 9th.
However, when I expand my main menu on the left side of the website, it shifts the scheduler over and causes the event to be the incorrect width. Notice that it no longer starts EXACTLY on the 3rd and now ends near the end of the 10th.
