How to show the Timeline Month view without horizontal scrollbar in Angular Scheduler
This article 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 to 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());
}
Refer to the working sample for additional details and implementation: [Sample]
Conclusion:
We hope you enjoyed learning how to show the Timeline Month view without horizontal scrollbar in Angular Scheduler.
You can refer to our Angular Scheduler's feature tour page to know about its other groundbreaking feature representations. You can also explore our Angular Scheduler example to understand how to present and manipulate data.
For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Angular Scheduler and other Angular components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
