Primeng p-calendar in p-overlay

<!doctype html>

<html>

<head>
  <script src="./lib/main.ts"></script>
</head>

<body>
  <my-app>
    loading...
  </my-app>
</body>

</html>

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CalendarModule } from 'primeng/calendar';
import { OverlayPanelModule } from 'primeng/overlaypanel';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'my-app',
    templateUrl: './lib/main.html',
})
export class App {
    name: string;

    selectedDate = new Date();

    constructor() {
        this.name = `Angular! v${VERSION.full}`;
    }
}

@NgModule({
    imports: [
        BrowserModule,
        CalendarModule,
        OverlayPanelModule,
        FormsModule
    ],
    declarations: [App],
    bootstrap: [App],
})
export class AppModule {}

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

h1,
p {
    font-family: sans-serif;
}

/deep/ .date-overlay-panel .date-override-panel .action-wrapper {
    padding: 10px;
}

/deep/ .date-overlay-panel .ui-overlaypanel-content {
    padding: unset;
}

<div>
	<h1>Hi {{name}}</h1>

	<p>currently selected date: {{selectedDate | date:'yyyy/MM/dd HH:mm:ss OO'}}</p>
	<p>click this button to show the calendar</p>
	<button (click)="datePanel.show($event)">
        Select Date
        </button>
</div>

<div>
  <!-- <p-overlayPanel [appendTo]="'body'" #datePanel styleClass="date-overlay-panel">
      <div class="date-override-panel" fxLayout="column" #calendarWrapper>
          <p-calendar [(ngModel)]="selectedDate"
                      [showTime]="true"
                      [hourFormat]="24"
                      [monthNavigator]="true"
                      [yearNavigator]="true"
                      [yearRange]="getYearRangeStr()"
                      [inline]="true">
          </p-calendar>
      </div>
  </p-overlayPanel> -->
</div>

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.3",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/animations": "7.2.4",
        "@angular/cdk": "7.3.1",
        "@angular/common": "7.2.4",
        "@angular/compiler": "7.2.4",
        "@angular/core": "7.2.4",
        "@angular/flex-layout": "7.0.0-beta.23",
        "@angular/forms": "7.2.4",
        "@angular/http": "7.2.4",
        "@angular/material": "7.3.1",
        "@angular/platform-browser": "7.2.4",
        "@angular/platform-browser-dynamic": "7.2.4",
        "@angular/router": "7.2.4",
        "font-awesome": "4.7.0",
        "font-awesome-list": "4.7.0",
        "hammerjs": "2.0.8",
        "md-icons-codepoints": "1.0.2",
        "primeicons": "1.0.0",
        "primeng": "7.0.5",
        "rxjs": "6.4.0",
        "core-js": "^2.5.5",
        "zone.js": "^0.8.26"
    },
    "main": "./lib/main.ts",
    "plnkr": {
        "runtime": "system",
        "useHotReload": true
    }
}

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}