From 1bf108a5bb4ac48d4a19815160781fc04f6be3d0 Mon Sep 17 00:00:00 2001
From: fernandocode <lealfernandoleal@gmail.com>
Date: Tue, 19 Jun 2018 17:45:45 -0300
Subject: [PATCH] #174 (https://github.com/HsuanXyz/ion2-calendar/issues/174)

---
 dev/src/demos/demo-modal-custom-sub-header.ts | 46 +++++++++++++++++++
 dev/src/demos/demos.module.ts                 |  9 +++-
 dev/src/demos/sub-header-calendar-modal.ts    | 19 ++++++++
 .../components/calendar.modal.ts              |  2 +
 dev/src/pages/home/home.html                  |  1 +
 src/components/calendar.modal.ts              |  2 +
 6 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 dev/src/demos/demo-modal-custom-sub-header.ts
 create mode 100644 dev/src/demos/sub-header-calendar-modal.ts

diff --git a/dev/src/demos/demo-modal-custom-sub-header.ts b/dev/src/demos/demo-modal-custom-sub-header.ts
new file mode 100644
index 000000000..e82089078
--- /dev/null
+++ b/dev/src/demos/demo-modal-custom-sub-header.ts
@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { ModalController } from 'ionic-angular';
+import {
+  CalendarModalOptions,
+} from '../ion2-calendar'
+import { SubHeaderCalendarModal } from './sub-header-calendar-modal';
+
+@Component({
+  selector: 'demo-modal-custom-sub-header',
+  template: `
+    <button ion-button (click)="openCalendar()">
+      Custom Sub Header
+    </button>
+  `
+})
+export class DemoModalCustomSubHeaderComponent {
+
+  date: Date = new Date();
+
+  constructor(public modalCtrl: ModalController) {
+  }
+
+  openCalendar() {
+    const options: CalendarModalOptions = {
+      title: 'Custom Sub Header',
+      defaultDate: this.date,
+      canBackwardsSelected: true
+    };
+
+    let myCalendar = this.modalCtrl.create(SubHeaderCalendarModal, {
+      options: options
+    });
+
+    myCalendar.present();
+
+    myCalendar.onDidDismiss((date, type) => {
+      if (type === 'done') {
+        this.date = date.dateObj;
+      }
+      console.log(date);
+      console.log('type', type);
+    })
+
+  }
+
+}
diff --git a/dev/src/demos/demos.module.ts b/dev/src/demos/demos.module.ts
index 4bac783f9..d9ff70a47 100644
--- a/dev/src/demos/demos.module.ts
+++ b/dev/src/demos/demos.module.ts
@@ -17,11 +17,15 @@ import { DemoRangeComponent } from "./demo-range";
 import { DemoOptionsComponent } from "./demo-options";
 import { DemoEventsComponent } from "./demo-events";
 import { DemoMethodsComponent } from "./demo-methods";
+import { DemoModalCustomSubHeaderComponent } from './demo-modal-custom-sub-header';
+import { SubHeaderCalendarModal } from './sub-header-calendar-modal';
 
 const COMPONENTS = [
   DemoModalBasicComponent,
   DemoModalMultiComponent,
   DemoModalRangeComponent,
+  DemoModalCustomSubHeaderComponent,
+  SubHeaderCalendarModal,
   DemoModalDisableWeekComponent,
   DemoModalLocaleComponent,
   DemoModalCustomStyleComponent,
@@ -32,13 +36,14 @@ const COMPONENTS = [
   DemoRangeComponent,
   DemoOptionsComponent,
   DemoEventsComponent,
-  DemoMethodsComponent
+  DemoMethodsComponent,
 ];
 
 @NgModule({
   declarations: [...COMPONENTS],
   imports: [IonicModule.forRoot(MyApp), CalendarModule],
-  exports: [...COMPONENTS]
+  exports: [...COMPONENTS],
+  entryComponents: [...COMPONENTS],
 })
 export class DemosModule {
 }
diff --git a/dev/src/demos/sub-header-calendar-modal.ts b/dev/src/demos/sub-header-calendar-modal.ts
new file mode 100644
index 000000000..742b011a7
--- /dev/null
+++ b/dev/src/demos/sub-header-calendar-modal.ts
@@ -0,0 +1,19 @@
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+  template: `
+  <ion-calendar-modal #calendar>
+    <div sub-header>
+      <label>Date seleted: </label>
+      <span *ngFor="let d of calendar.datesTemp; let i = index">
+        <button *ngIf="d" [color]="calendar._d.color" ion-button (click)="toDate(d.time)">{{d.time | date: 'dd/MM/yyyy'}}</button>
+      </span>
+    </div>
+  </ion-calendar-modal>
+  `
+})
+export class SubHeaderCalendarModal {
+  toDate(p) {
+    console.log(p);
+  }
+}
\ No newline at end of file
diff --git a/dev/src/ion2-calendar/components/calendar.modal.ts b/dev/src/ion2-calendar/components/calendar.modal.ts
index 995bc329c..e1e932285 100755
--- a/dev/src/ion2-calendar/components/calendar.modal.ts
+++ b/dev/src/ion2-calendar/components/calendar.modal.ts
@@ -29,6 +29,8 @@ import { pickModes } from "../config";
         </ion-buttons>
 
       </ion-navbar>
+      
+      <ng-content select="[sub-header]"></ng-content>
 
       <ion-calendar-week
         [color]="_d.color"
diff --git a/dev/src/pages/home/home.html b/dev/src/pages/home/home.html
index c4c1be4f8..d2e2eea32 100644
--- a/dev/src/pages/home/home.html
+++ b/dev/src/pages/home/home.html
@@ -11,6 +11,7 @@ <h2>modal mode</h2>
   <demo-modal-basic></demo-modal-basic>
   <demo-modal-multi></demo-modal-multi>
   <demo-modal-range></demo-modal-range>
+  <demo-modal-custom-sub-header></demo-modal-custom-sub-header>
   <demo-modal-disable-week></demo-modal-disable-week>
   <demo-modal-locale></demo-modal-locale>
   <demo-modal-custom-style></demo-modal-custom-style>
diff --git a/src/components/calendar.modal.ts b/src/components/calendar.modal.ts
index 995bc329c..e1e932285 100755
--- a/src/components/calendar.modal.ts
+++ b/src/components/calendar.modal.ts
@@ -29,6 +29,8 @@ import { pickModes } from "../config";
         </ion-buttons>
 
       </ion-navbar>
+      
+      <ng-content select="[sub-header]"></ng-content>
 
       <ion-calendar-week
         [color]="_d.color"