How to show the Timeline Month view without horizontal scrollbar in Angular Scheduler
This knowledge base explains how to show the Timeline Month view without horizontal scroller in Angular Scheduler.
Disable horizontal scroller in Timeline Month
Step 1: Create an Angular Scheduler by referring the following user guide.
https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/#getting-started
Step 2: Add the following CSS to adjust the width of the work cells to hide the horizontal scroller.
[app.component.css]
.timeline-resource-grouping.e-schedule
.e-timeline-month-view
.e-date-header-wrap
table
col,
.timeline-resource-grouping.e-schedule
.e-timeline-month-view
.e-content-wrap
table
col {
width: auto !important;
}
Step 3: Bind the actionComplete and eventRendered events to adjust the positioning of the appointments. Since we are adjusting the width of the work cells, it may reduce the width to less than the minimum width for some resolutions which may result in misalignment of the appointments.
[app.component.html]
<ejs-schedule #scheduleObj width='100%' cssClass='timeline-resource-grouping' height='650px' [selectedDate]="selectedDate" [(currentView)]="currentView" [group]="group" [eventSettings]="eventSettings" (actionComplete)="onActionComplete($event)" (eventRendered)="onEventRendered($event)">
Step 4: Add the definitions for actionComplete and eventRendered events as shown below.
[app.component.ts]
onActionComplete(args): void {
if (
args.requestType === 'viewNavigate' ||
args.requestType === 'dateNavigate'
) {
this.dayWidth = null;
}
}
onEventRendered(args: EventRenderedArgs) {
if (this.currentView === 'TimelineMonth') {
this.dayWidth = this.dayWidth ??
document.querySelector('.e-date-header-wrap').clientWidth /
(new Date(
this.selectedDate.getFullYear(),
this.selectedDate.getMonth() + 1,
0
).getDate() * this.scheduleObj.activeViewOptions.interval); //To calculate the width of a work cell
const diffInDay = args.data.data.count; //To calculate the number of days an event rendered.
const td: HTMLElement= (document.querySelector('.e-work-cells[data-date="' + this.resetTime(args.data.StartTime).getTime() + '"]')); //To find the work cell element in which the appointment started
const left = (td) ? td.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) * this.dayWidth + 'px'; //To set width for the appointment element.
}
}
resetTime(date: Date): Date {
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}
The output of the Angular Scheduler without horizontal scroller in Timeline Month view will be as shown below.
Sample: You can refer to the following sample for this functionality.
