demo(datepicker): beautify custom month layout demo

demo/src/app/components/datepicker/demos/custommonth/datepicker-custommonth.html

@@ -1,14 +1,24 @@
 <p>This datepicker uses a custom month layout.</p>
 
-<ngb-datepicker #dp
-                [startDate]="{month: 8, year: 2016}"
-                [displayMonths]="2"
-                [outsideDays]="'collapsed'"
-                [navigation]="'none'">
-  <ng-template ngbDatepickerMonths>
-    <div class="custom-month-view" *ngFor="let monthStruct of dp.state.months">
-      <span>{{i18n.getMonthFullName(monthStruct.month)}} {{monthStruct.year}}</span>
-      <ngb-datepicker-month [month]="monthStruct"></ngb-datepicker-month>
-    </div>
-  </ng-template>
-</ngb-datepicker>
+<div class="d-inline-block">
+
+  <div class="btn-group d-flex justify-content-end mb-2" role="group">
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="navigate(-1);">Prev</button>
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="today()">Today</button>
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="navigate(1)">Next</button>
+  </div>
+
+  <ngb-datepicker class="custom-datepicker px-3 pt-1 pb-3"
+                  #dp
+                  [displayMonths]="4"
+                  outsideDays="hidden"
+                  [showWeekdays]="false"
+                  navigation="none">
+    <ng-template ngbDatepickerMonths>
+      <div *ngFor="let month of dp.state.months">
+        <div class="text-primary p-1 font-weight-bold">{{ i18n.getMonthShortName(month.month) }} {{ month.year }}</div>
+        <ngb-datepicker-month class="border rounded" [month]="month"></ngb-datepicker-month>
+      </div>
+    </ng-template>
+  </ngb-datepicker>
+</div>

demo/src/app/components/datepicker/demos/custommonth/datepicker-custommonth.ts

@@ -1,27 +1,35 @@
-import {Component} from '@angular/core';
-import {NgbDatepickerI18n} from '@ng-bootstrap/ng-bootstrap';
+import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
+import {NgbDatepicker, NgbDatepickerI18n} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'ngbd-datepicker-custommonth',
   templateUrl: './datepicker-custommonth.html',
+  encapsulation: ViewEncapsulation.None,
   styles: [`
-    ngb-datepicker {
-      display: flex;
-      border: none;
+    .custom-datepicker .ngb-dp-header {
+      padding: 0;
     }
-    .custom-month-view {
-      margin: 1rem;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      border: 1px solid gray;
-      border-radius: 1rem 1rem 0 0;
-    }
-    .custom-month-view span{
-      font-weight: bold;
+    .custom-datepicker .ngb-dp-months {
+      display: grid;
+      grid-template-columns: auto auto;
+      grid-column-gap: 1rem;
+      grid-row-gap: 0.5rem;
     }
   `]
 })
 export class NgbdDatepickerCustommonth {
+
+  @ViewChild(NgbDatepicker, {static: true}) datepicker: NgbDatepicker;
+
   constructor(public i18n: NgbDatepickerI18n) {}
+
+  navigate(number: number) {
+    const {state, calendar} = this.datepicker;
+    this.datepicker.navigateTo(calendar.getNext(state.firstDate, 'm', number));
+  }
+
+  today() {
+    const {calendar} = this.datepicker;
+    this.datepicker.navigateTo(calendar.getToday());
+  }
 }