📅 ion2-calendar

English is not my native language; please excuse typing errors. 中文文档

• Support date range.
• Support multi date.
• Support HTML components.
• Disable weekdays or weekends.
• Setting days event.
• Setting localization.
• Material design.

Support

• ionic-angular ^3.0.0

Demo

live demo click me.

Usage

Installation

$ npm install ion2-calendar moment --save

Import module

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
...
import { CalendarModule } from "ion2-calendar";

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    CalendarModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ]
})
export class AppModule {}

Components Mode

Basic

<ion-calendar [(ngModel)]="date"
              (onChange)="onChange($event)"
              [type]="type"
              [format]="'YYYY-MM-DD'">
</ion-calendar>

import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  date: string;
  type: 'string'; // 'string' | 'js-date' | 'moment' | 'time' | 'object'
  constructor() { }

  onChange($event) {
    console.log($event);
  }
  ...
}

Date range

<ion-calendar [(ngModel)]="dateRange"
              [options]="optionsRange"
              [type]="type"
              [format]="'YYYY-MM-DD'">
</ion-calendar>

import { Component } from '@angular/core';
import { CalendarComponentOptions } from 'ion2-calendar'
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  dateRange: { from: string; to: string; };
  type: 'string'; // 'string' | 'js-date' | 'moment' | 'time' | 'object'
  optionsRange: CalendarComponentOptions = {
    pickMode: 'range'
  };
  constructor() { }
  ...
}

Multi Date

<ion-calendar [(ngModel)]="dateMulti"
              [options]="optionsMulti"
              [type]="type"
              [format]="'YYYY-MM-DD'">
</ion-calendar>

import { Component } from '@angular/core';
import { CalendarComponentOptions } from 'ion2-calendar'
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  dateMulti: string[];
  type: 'string'; // 'string' | 'js-date' | 'moment' | 'time' | 'object'
  optionsMulti: CalendarComponentOptions = {
    pickMode: 'multi'
  };
  constructor() { }
  ...
}

Input Properties

| Name | Type | Default | Description | | --------------- | ------------- | -------------- | ----------- | | options | CalendarComponentOptions| null | options | | format | string | 'YYYY-MM-DD' | value format | | type | string | 'string' | value type | | readonly | boolean | false | readonly |

Output Properties

| Name | Type | Description | | --------------- | ------------- | ----------- | | onChange | EventEmitter| event for model change | | monthChange | EventEmitter | event for month change | | onSelect | EventEmitter | event for click day-button | | onSelectStart | EventEmitter | event for click day-button | | onSelectEnd | EventEmitter | event for click day-button |

CalendarComponentOptions

| Name | Type | Default | Description | | --------------- | ------------- | ------------- | ----------- | | from | Date | new Date() | start date | | to | Date | 0 (Infinite) | end date | | color | string | 'primary' | 'primary', 'secondary', 'danger', 'light', 'dark' | | pickMode | string | single | 'multi', 'range', 'single' | | showToggleButtons | boolean | true | show toggle buttons | | showMonthPicker | boolean | true | show month picker | | monthPickerFormat | Array | ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'] | month picker format | | defaultTitle | string | '' | default title in days | | defaultSubtitle | string | '' | default subtitle in days | | disableWeeks | Array | [] | week to be disabled (0-6) | | monthFormat | string | 'MMM YYYY' | month title format | | weekdays | Array | ['S', 'M', 'T', 'W', 'T', 'F', 'S'] | weeks text | | weekStart | number | 0 (0 or 1) | set week start day | | daysConfig | Array<DaysConfig> | [] | days configuration |

Modal Mode

Basic

Import ion2-calendar in component controller.

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { CalendarModal, CalendarModalOptions, DayConfig, CalendarResult } from "ion2-calendar";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public modalCtrl: ModalController,
  ) { }

  openCalendar() {
    const options: CalendarModalOptions = {
      title: 'BASIC',
    };
    let myCalendar =  this.modalCtrl.create(CalendarModal, {
      options: options
    });

    myCalendar.present();

    myCalendar.onDidDismiss((date: CalendarResult, type: string) => {
      console.log(date);
    })
  }

}

Date range

Set pickMode to 'range'.

    openCalendar() {
        const options: CalendarModalOptions = {
          pickMode: 'range',
          title: 'RANGE'
        };
    
        let myCalendar = this.modalCtrl.create(CalendarModal, {
          options: options
        });
    
        myCalendar.present();
    
        myCalendar.onDidDismiss((date: { from: CalendarResult; to: CalendarResult }, type: string) => {
          console.log(date);
        });
  }

Multi Date

Set pickMode to 'multi'.

    openCalendar() {
        const options = {
          pickMode: 'multi',
          title: 'MULTI'
        };
    
        let myCalendar =  this.modalCtrl.create(CalendarModal, {
          options: options
        });
    
        myCalendar.present();
    
        myCalendar.onDidDismiss((date: CalendarResult[], type: string) => {
          console.log(date);
        })
      }

Disable weeks

Use index eg: [0, 6] denote Sunday and Saturday.

  openCalendar() {
    const options: CalendarModalOptions = {
      disableWeeks: [0, 6]
    };

    let myCalendar =  this.modalCtrl.create(CalendarModal, {
      options: options
    });

    myCalendar.present();

    myCalendar.onDidDismiss((date: CalendarResult, type: string) => {
      console.log(date);
    });
  }

Localization

your root module

import { NgModule, LOCALE_ID } from '@angular/core';
...

@NgModule({
  ...
  providers: [{ provide: LOCALE_ID, useValue: "zh-CN" }]
})

...

 openCalendar() {
    const options: CalendarModalOptions = {
      monthFormat: 'YYYY 年 MM 月 ',
      weekdays: ['天', '一', '二', '三', '四', '五', '六'],
      weekStart: 1,
      defaultDate: new Date()
    };

    let myCalendar =  this.modalCtrl.create(CalendarModal, {
      options: options
    });

    myCalendar.present();

    myCalendar.onDidDismiss((date: CalendarResult, type: string) => {
      console.log(date);
    });
  }

Days config

Configure one day.

openCalendar() {
    let _daysConfig: DayConfig[] = [];
    for (let i = 0; i < 31; i++) {
      _daysConfig.push({
        date: new Date(2017, 0, i + 1),
        subTitle: `$${i + 1}`
      })
    }

    const options: CalendarModalOptions = {
      from: new Date(2017, 0, 1),
      to: new Date(2017, 11.1),
      daysConfig: _daysConfig
    };

    let myCalendar =  this.modalCtrl.create(CalendarModal, {
      options: options
    });

    myCalendar.present();

    myCalendar.onDidDismiss((date: CalendarResult, type: string) => {
      console.log(date);
    });
  }

API

Modal Options

| Name | Type | Default | Description | | --------------- | ------------- | ------------- | ----------- | | from | Date | new Date() | start date | | to | Date | 0 (Infinite) | end date | | title | string | 'CALENDAR' | title | | color | string | 'primary' | 'primary', 'secondary', 'danger', 'light', 'dark' | | defaultScrollTo | Date | none | let the view scroll to the default date| | defaultDate | Date | none | default date data, apply to single| | defaultDates | Array | none | default dates data, apply to multi | | defaultDateRange | { from: Date, to: Date } | none | default date-range data, apply to range | | defaultTitle | string | '' | default title in days | | defaultSubtitle | string | '' | default subtitle in days | | cssClass | string | '' | Additional classes for custom styles, separated by spaces. | | canBackwardsSelected | boolean | false | can backwards selected | | pickMode | string | single | 'multi', 'range', 'single' | | disableWeeks | Array | [] | week to be disabled (0-6) | | closeLabel | string | CANCEL | cancel button label | | doneLabel | string | DONE | done button label | | closeIcon | boolean | false | show cancel button icon | | doneIcon | boolean | false | show done button icon | | monthFormat | string | 'MMM YYYY' | month title format | | weekdays | Array | ['S', 'M', 'T', 'W', 'T', 'F', 'S'] | weeks text | | weekStart | number | 0 (0 or 1) | set week start day | | daysConfig | Array<DaysConfig> | [] | days configuration |

onDidDismiss Output [, param1]

| pickMode | Type | | ------------- | ----- | | single | { date: CalendarResult } | | range | { from: CalendarResult, to: CalendarResult } | | multi | Array<CalendarResult> |

onDidDismiss Output [, param2]

| Value | Description | | --------- | ----- | | 'cancel' | dismissed by click the cancel button | | 'done' | dismissed by click the done button | | 'backdrop' | dismissed by click the backdrop |

DaysConfig

| Name | Type | Default | Description | ------------- | ------------- | -------- | --------------- | | cssClass | string | '' | separated by spaces| | date | Date | required | configured days | | marked | boolean | false | highlight color | | disable | boolean | false | disable | | title | string | none | displayed title eg: 'today' | | subTitle | string | none | subTitle subTitle eg: 'New Year\'s' |

CalendarResult

| Name | Type | | ------------- | ------- | | time | number | | unix | number | | dateObj | Date | | string | string | | years | number | | months | number | | date | number |

Thanks for reading