#174 (#174)

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);
+    })
+
+  }
+
+}

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 {
 }

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);
+  }
+}

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"

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>

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"