Add paging option for Angular Scheduler with multiple resources
Step 1: Create an Angular Scheduler sample with the resource option by referring to the following online sample link.
https://ej2.syncfusion.com/angular/demos/#/material/schedule/timeline-resource-grouping
<ejs-schedule id="schedule" #scheduleObj width='100%' height='650px' [selectedDate]="selectedDate" [currentView]="currentView" [group]="group" [eventSettings]="eventSettings" (actionComplete)="onActionComplete($event)"> <e-resources> <e-resource field='ProjectId' title='Choose Project' [dataSource]='projectDataSource' [allowMultiple]='allowMultiple' name='Projects' textField='text' idField='id' colorField='color' groupIDField='HospitalGroupId'> </e-resource> <e-resource field='TaskId' title='Category' [dataSource]='categoryDataSource' [allowMultiple]='allowMultiple' name='Categories' textField='text' idField='id' colorField='color' groupIDField='DoctorGroupId'> </e-resource> </e-resources> <e-views> <e-view option="TimelineDay"></e-view> <e-view option="TimelineWeek"></e-view> <e-view option="TimelineWorkWeek"></e-view> <e-view option="TimelineMonth"></e-view> <e-view option="Agenda"></e-view> </e-views> </ejs-schedule>
Step 2: Include the Pager control above the Scheduler by referring to the following user guide link.
https://ej2.syncfusion.com/angular/documentation/pager/getting-started/
<ejs-pager [pageSize]='1' [totalRecordsCount]='5' (click)="onSlide($event)"> </ejs-pager>
Step 3: In the pageChange custom function, instead of rendering all the resources, only the limited resources are assigned to each page of the Scheduler along with its events, as shown in the following code example.
pageChange(page: string) {
const CurRoomData: Object[] = [];
const dm: DataManager = new DataManager({ json: this.eventData });
const dm1: DataManager = new DataManager({ json: this.categoryDataSource });
const groupFieldId = this.scheduleObj.resources[0].field;
const val: any = this.projectDataSource[parseInt(page as string, 10) - 1];
const CurResData: Object[] = dm1.executeLocal(new Query().where('DoctorGroupId', 'equal', val.id));
const curAppData: Object[] = dm.executeLocal(new Query().where(groupFieldId, 'equal', val.id));
CurRoomData.push(this.projectDataSource[val.id - 1]);
this.scheduleObj.resources[0].dataSource = CurRoomData;
this.scheduleObj.resources[1].dataSource = CurResData;
this.scheduleObj.eventSettings.dataSource = curAppData;
this.scheduleObj.dataBind();
}
Step 4: In Scheduler’s actionComplete event and Pager’s click functions, call the pageChange custom function to load the custom resource count on initial load and on each page click.
onActionComplete(args: ActionEventArgs): void {
if (!this.flag) {
const page: string = '1' as string;
this.pageChange(page);
}
}
onSlide(args: PageEventArgs): void {
const page: string = args.currentPage;
this.pageChange(page);
this.flag = true;
}Step 5: Run the sample. The scheduler with the pager option at the bottom will be displayed as shown below.
Figure 1: Scheduler with Pager option at bottom.
Please refer to the example from the following GitHub link.
Example – Scheduler_with_Pager
Conclusion
I hope you enjoyed learning how to add paging option for Angular Scheduler with multiple resources.
You can refer to our Angular Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Scheduler example to understand how to create and manipulate data.
For current customers, you can check out our 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 other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
