mattlewis92 / angular-calendar

A flexible calendar component for angular 15.0+ that can display events on a month, week or day view.
https://mattlewis92.github.io/angular-calendar/
MIT License
2.72k stars 863 forks source link

Improve day view scheduler performance on users changes #1556

Open ap-t opened 2 years ago

ap-t commented 2 years ago

Is your feature request related to a problem? Please describe

My feature request is related to a performance issue that occurs in the day view scheduler (from demos), on sort, insert, or delete in the users array. When any of these operations are performed, which btw indirectly changes the hourColumns array, Angular is unnecessarily re-rendering all the .cal-day-column DOM elements which is leading to slower performance in this view. When I debugged the code I found the issue occurred because every hour column has the same first segment start date. Therefore the inherited trackByHourColumn (from CalendarWeekViewComponent) is not uniquely identifying each user's distinct hour column in this view.

Here's a stackblitz link that reproduces the issue when the sort button is clicked: https://stackblitz.com/edit/angular-81j8hc?file=demo%2Fcomponent.ts

Issue: Definition - from projects/angular-calendar/src/modules/week/calendar-week-view.component.ts

trackByHourColumn = (index: number, column: WeekViewHourColumn) =>
    column.hours[0] ? column.hours[0].segments[0].date.toISOString() : column;

Usage - from projects/demos/app/demo-modules/day-view-scheduler/day-view-scheduler.component.html

<div
  class="cal-day-column"
  *ngFor="let column of view.hourColumns; trackBy: trackByHourColumn"
>
...
</div>

Describe the solution you'd like

Change the hour columns trackBy function to uniquely identify each user's distinct hour column in the day view scheduler.

Here are two potential solutions I've implemented in my personal project.

Solution 1: https://github.com/ap-t/angular-calendar/commit/0c46af0bc58590d71c319e432386e0c84875767f

Solution 2: https://github.com/ap-t/angular-calendar/commit/8eede09986147fac8298fbdb946d2bef8c5539f2 Note: Simpler but in this implementation the hour column can only be fully optimized if the user has at least one event.

Describe your use case for implementing this feature

Sorting, adding, or deleting user(s) are valid use cases in the day view scheduler.

Additional context

N/A

matts-bot[bot] commented 2 years ago

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider sponsoring me