Calendar performance issues #1781

variable-content opened this Issue Jan 10, 2017 · 5 comments


None yet

3 participants


I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already
[ ] support request => Please do not submit support request here, instead see

Current behavior
Render speed is very slow when there are a large number (100+) of Calendar components on the page.

Expected behavior
Should be little to no lag to render.
Suggested fix is to only render of the calendar overlay when necessary (currently its rendered, but hidden with display: none;). I found that this dramatically sped up render times.

Minimal reproduction of the problem with instructions
Add this to the calendardemo.html template:
<button (click)="perfTest()">Perf Test
<div *ngIf="isPerfTest">
<p-calendar *ngFor="let i of arr" [(ngModel)]="date1">

And in the CaledarDemo component class:
export class CalendarDemo {
isPerfTest: boolean;
arr = Array(100).fill(1);
perfTest() {
this.isPerfTest = !this.isPerfTest;

Please tell us about your environment:
Windows 10

  • Angular version: 2.X.X

  • PrimeNG version: 1.1.4

  • Browser: all

ilianiv commented Jan 13, 2017

Accordion component has the same issue #1808


PR to fix this issue is ready to be reviewed: #1817

@cagataycivici cagataycivici self-assigned this Jan 16, 2017
@cagataycivici cagataycivici added this to the 2.0 milestone Jan 16, 2017
@cagataycivici cagataycivici changed the title from Calendar performance issue to Calendar performance issues Jan 18, 2017
@cagataycivici cagataycivici added enhancement and removed review labels Jan 18, 2017

Merged 1817.


Also removed creation of a new date for checking if day is today to reduce memory usage. Calendar performance has been improved significantly. Thank you.


Awesome, thanks for taking a look!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment