📅 ion2-calendar

Support

Demo

Usage

Installation

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

Output Properties

CalendarComponentOptions

Modal Mode

Basic

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

 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

 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

 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

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

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

onDidDismiss Output [, param1]

onDidDismiss Output [, param2]

DaysConfig

CalendarResult

Thanks for reading