chore: add demos in dev

dev/src/demos/modal-basic.ts → dev/src/demos/demo-modal-basic.ts

@@ -3,34 +3,40 @@ import { ModalController } from 'ionic-angular';
 
 import {
   CalendarModal,
+  CalendarModalOptions,
 } from '../ion2-calendar'
 
 @Component({
-  selector: 'demo-basic',
+  selector: 'demo-modal-basic',
   template: `
     <button ion-button (click)="openCalendar()">
       basic
     </button>
   `
 })
-export class ModalBasicComponent {
+export class DemoModalBasicComponent {
 
-  constructor(public modalCtrl: ModalController) { }
+  date: Date = new Date();
+
+  constructor(public modalCtrl: ModalController) {
+  }
 
   openCalendar() {
-    const options = {
+    const options: CalendarModalOptions = {
       title: 'BASIC',
-      canBackwardsSelected: true,
-      doneIcon: true,
-      closeIcon: true
+      defaultDate: this.date
     };
-    let myCalendar =  this.modalCtrl.create(CalendarModal, {
+
+    let myCalendar = this.modalCtrl.create(CalendarModal, {
       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/demo-modal-config-days.ts

@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+import { ModalController } from 'ionic-angular';
+
+import {
+  CalendarModal,
+  CalendarModalOptions,
+  DayConfig
+} from '../ion2-calendar'
+
+@Component({
+  selector: 'demo-modal-config-days',
+  template: `
+    <button ion-button (click)="openCalendar()">
+      config-days
+    </button>
+  `
+})
+export class DemoModalConfigDaysComponent {
+
+  date: Date = new Date(2017, 0, 2);
+
+  constructor(public modalCtrl: ModalController) {
+  }
+
+  openCalendar() {
+
+    const daysConfig: DayConfig[] = [];
+    for (let i = 1; i < 30; i++) {
+      daysConfig.push({
+        date: new Date(2017, 0, i + 1),
+        subTitle: `$${i + 1}`
+      })
+    }
+    daysConfig.push({
+      date: new Date(2017, 1, 1),
+      disable: true,
+      subTitle: 'disable',
+    });
+    daysConfig.push({
+      date: new Date(2017, 0, 1),
+      subTitle: 'New Year\'s',
+      cssClass: 'my-day'
+    });
+
+    const options: CalendarModalOptions = {
+      daysConfig,
+      from: new Date(2017, 0, 1),
+      to: new Date(2017, 11.1),
+      title: 'CONFIG DAYS',
+      defaultDate: this.date
+    };
+
+    let myCalendar = this.modalCtrl.create(CalendarModal, {
+      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/demo-modal-custom-style.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { ModalController } from 'ionic-angular';
+
+import {
+  CalendarModal,
+  CalendarModalOptions,
+} from '../ion2-calendar'
+
+@Component({
+  selector: 'demo-modal-custom-style',
+  template: `
+    <button ion-button (click)="openCalendar()">
+      custom-style
+    </button>
+  `
+})
+export class DemoModalCustomStyleComponent {
+
+  date: Date = new Date();
+
+  constructor(public modalCtrl: ModalController) {
+  }
+
+  openCalendar() {
+    const options: CalendarModalOptions = {
+      title: 'CUSTOM-STYLE',
+      defaultDate: this.date,
+      cssClass: 'my-class',
+    };
+
+    let myCalendar = this.modalCtrl.create(CalendarModal, {
+      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/demo-modal-default-scroll.ts

@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { ModalController } from 'ionic-angular';
+
+import {
+  CalendarModal,
+  CalendarModalOptions,
+} from '../ion2-calendar'
+
+@Component({
+  selector: 'demo-modal-default-scroll',
+  template: `
+    <button ion-button (click)="openCalendar()">
+      default-scroll-to
+    </button>
+  `
+})
+export class DemoModalDefaultScrollComponent {
+
+  date: Date = new Date(2017, 4, 1);
+
+  constructor(public modalCtrl: ModalController) {
+  }
+
+  openCalendar() {
+    const options: CalendarModalOptions = {
+      title: 'DEFAULT SCROLL',
+      from: new Date(2017, 1, 1),
+      defaultScrollTo: this.date,
+      defaultDate: this.date
+    };
+
+    let myCalendar = this.modalCtrl.create(CalendarModal, {
+      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/demo-modal-disable-week.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { ModalController } from 'ionic-angular';
+
+import {
+  CalendarModal,
+  CalendarModalOptions,
+} from '../ion2-calendar'
+
+@Component({
+  selector: 'demo-modal-disable-week',
+  template: `
+    <button ion-button (click)="openCalendar()">
+      disable-week
+    </button>
+  `
+})
+export class DemoModalDisableWeekComponent {
+
+  date: Date = new Date();
+
+  constructor(public modalCtrl: ModalController) {
+  }
+
+  openCalendar() {
+    const options: CalendarModalOptions = {
+      title: 'DISABLE-WEEK',
+      defaultDate: this.date,
+      disableWeeks: [0, 6],
+    };
+
+    let myCalendar = this.modalCtrl.create(CalendarModal, {
+      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/demo-modal-locale.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { ModalController } from 'ionic-angular';
+
+import {
+  CalendarModal,
+  CalendarModalOptions,
+} from '../ion2-calendar'
+
+@Component({
+  selector: 'demo-modal-locale',
+  template: `
+    <button ion-button (click)="openCalendar()">
+      locale
+    </button>
+  `
+})
+export class DemoModalLocaleComponent {
+
+  date: Date = new Date();
+
+  constructor(public modalCtrl: ModalController) {
+  }
+
+  openCalendar() {
+    const options: CalendarModalOptions = {
+      title: 'LOCALE',
+      defaultDate: this.date,
+      monthFormat: 'yyyy 年 MM 月',
+      weekdays: ['天', '一', '二', '三', '四', '五', '六'],
+      weekStart: 1,
+    };
+
+    let myCalendar = this.modalCtrl.create(CalendarModal, {
+      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/demo-modal-multi.ts

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { ModalController } from 'ionic-angular';
+
+import {
+  CalendarModal,
+  CalendarModalOptions,
+} from '../ion2-calendar'
+
+@Component({
+  selector: 'demo-modal-multi',
+  template: `
+    <button ion-button (click)="openCalendar()">
+      multi
+    </button>
+  `
+})
+export class DemoModalMultiComponent {
+
+  dates: Date[] = [
+    new Date(),
+    new Date(Date.now() + 24 * 60 * 60 * 1000),
+    new Date(Date.now() + 24 * 60 * 60 * 1000 * 2)
+  ];
+
+  constructor(public modalCtrl: ModalController) {
+  }
+
+  openCalendar() {
+    const options: CalendarModalOptions = {
+      pickMode: 'multi',
+      title: 'MULTI',
+      defaultDates: this.dates
+    };
+
+    let myCalendar = this.modalCtrl.create(CalendarModal, {
+      options: options
+    });
+
+    myCalendar.present();
+
+    myCalendar.onDidDismiss((dates, type) => {
+      if (type === 'done') {
+        this.dates = [...dates.map(e => e.dateObj)]
+      }
+      console.log(dates);
+      console.log(type);
+    })
+  }
+
+}