ngprime对话框中的ngprime日历出现问题

Question

我面临的问题是p日历未完全显示在p对话框组件内部。我尝试阅读其他文章的尝试是，我在p-calendar标签内应用了[appendTo]属性。但是它只能在一个对话框中起作用，而不能在另一个对话框中起作用。以下附件是我面临的问题的屏幕截图：

代码如下：

<p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true"
  >
  <div class="ui-g ui-fluid" *ngIf="teacher">

    <div class="ui-g-36" *ngFor="let _col of cols | chunkBy: 4">
      <div *ngFor="let col of _col">
        <div class="ui-g-9">
          <label for="{{col.field}}">{{col.header}}</label>
          <ng-container *ngIf="col.header != 'Gender' && col.header != 'Date of Birth'">
            <input pInputText id="{{col.field}}" [(ngModel)]="teacher[col.field]" />
          </ng-container>
          <ng-container *ngIf="col.header == 'Gender'">
            <p-dropdown id="{{col.field}}" [options]="gender" [(ngModel)]="teacher[col.field]"></p-dropdown>
          </ng-container>
          <ng-container *ngIf="col.header == 'Date of Birth'">
            <p-calendar id="{{col.field}}" [inputStyle]="{'width':'84%'}"  [appendTo]="body" [(ngModel)]="teacher[col.field]" dateFormat="yy-mm-dd" [showIcon]="true">
            </p-calendar>
          </ng-container>
        </div>
      </div>
    </div>
  </div>
  <p-footer>
    <div class="ui-dialog-buttonpane ui-helper-clearfix">
      <button type="button" pButton icon="fa fa-close" (click)="delete()" label="Delete"></button>
      <button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"></button>
      <button type="button" pButton icon="fa fa-close" (click)="close()" label="Close"></button>
    </div>
  </p-footer>
</p-dialog>