📅 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

3mpe/ion2-calendar

📅 ion2-calendar

Support

Demo

Usage

Installation

Import module

Components Mode

Basic

Date range

Multi Date

Input Properties

Output Properties

CalendarComponentOptions

Modal Mode

Basic

Date range

Multi Date

Disable weeks

Localization

Days config

API

Modal Options

onDidDismiss Output [, param1]

onDidDismiss Output [, param2]

DaysConfig

CalendarResult

Thanks for reading