[FIXED] PrimeNg Inline Calendar not working in Dialog

Issue

It seems like there is a bug with the primeng calendar (inline) component when used inside a dialog component. Is this a known issue with a workaround?

Image
In the left the calendar is instantiated in a regular component. In the right the calendar is instantiated inside a <p-dialog>

Taskcomponent:

<p-calendar [(ngModel)]="date" [inline]="true" [showWeek]="true" [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '1201'}"></p-calendar>

Dialog code:

<p-dialog position="top-right" header="Neuer Task" [(visible)]="displayTask" [closeOnEscape]="false" showEffect="fade" [style]="{width: '30%', height: '50%'}" (onHide)="closeAction()" >
  <p class="line-height-3 m-0">
    <cd-task></cd-task>
  </p>
</p-dialog>

Solution

I got it fixed by doing a little trick by adding an *ngIf="displayTask" to the calendar.

Answered By – Stefan

Answer Checked By – Candace Johnson (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published