Skip to content
📅 A date picker components for ionic2 /ionic3 / ionic4
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: add no-response robot config (#226) Feb 20, 2019
demo-lazyload chore: rename lazyload demo Jan 20, 2018
demo release: 2.1.7 Mar 22, 2018
dev feat: add ability to set global defaults Mar 7, 2019
src feat: add ability to set global defaults Mar 7, 2019
.editorconfig chore: add .editorconfig Jan 20, 2018
.gitignore
.npmignore
.travis.yml chore: add build badge in README Dec 19, 2017
LICENSE Initial commit Jan 1, 2017
README-CN.md docs: update README (#220) Jan 29, 2019
README.md feat: add ability to set global defaults Mar 7, 2019
gulpfile.js feat(ionic4): migrated Components to work with Ionic 4 Sep 12, 2018
ng-package.json #174 (#174) Jun 21, 2018
package.json
public_api.ts #174 (#174) Jun 21, 2018
tsconfig.json
tslint.json build: change directory structure and the build script Jan 3, 2018

README.md

📅 ion2-calendar

Build Status Dependency Status NPM version Downloads MIT License

date

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 2.x
  • @ionic/angular 4.0.0

Demo

live demo click me.

Usage

Installation

$ npm install ion2-calendar@next 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(),
    CalendarModule
  ],
  bootstrap: [MyApp],
  ...
})
export class AppModule {}

Change Defaults

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),
    // See CalendarComponentOptions for options
    CalendarModule.forRoot({
      doneLabel: 'Save',
      closeIcon: true
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ]
})
export class AppModule {}

Components Mode

Basic

<ion-calendar [(ngModel)]="date"
              (change)="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
change EventEmitter event for model change
monthChange EventEmitter event for month change
select EventEmitter event for click day-button
selectStart EventEmitter event for click day-button
selectEnd 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'
    };

    const myCalendar = await this.modalCtrl.create({
      component: CalendarModal,
      componentProps: { options }
    });

    myCalendar.present();

    const event: any = await myCalendar.onDidDismiss();
    const date: CalendarResult = event.data;
    console.log(date);
  }
}

Date range

Set pickMode to 'range'.

openCalendar() {
  const options: CalendarModalOptions = {
    pickMode: 'range',
    title: 'RANGE'
  };

  const myCalendar = await this.modalCtrl.create({
    component: CalendarModal,
    componentProps: { options }
  });

  myCalendar.present();

  const event: any = await myCalendar.onDidDismiss();
  const date = event.data;
  const from: CalendarResult = date.from;
  const to: CalendarResult = date.to;

  console.log(date, from, to);
}

Multi Date

Set pickMode to 'multi'.

openCalendar() {
  const options = {
    pickMode: 'multi',
    title: 'MULTI'
  };

  const myCalendar = await this.modalCtrl.create({
    component: CalendarModal,
    componentProps: { options }
  });

  myCalendar.present();

  const event: any = await myCalendar.onDidDismiss();
  const date: CalendarResult = event.data;
  console.log(date);
}

Disable weeks

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

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

  const myCalendar = await this.modalCtrl.create({
    component: CalendarModal,
    componentProps: { options }
  });

  myCalendar.present();

  const event: any = await myCalendar.onDidDismiss();
  const date: CalendarResult = event.data;
  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()
  };

  const myCalendar = await this.modalCtrl.create({
    component: CalendarModal,
    componentProps: { options }
  });

  myCalendar.present();

  const event: any = await myCalendar.onDidDismiss();
  const date: CalendarResult = event.data;
  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
  };

  const myCalendar = await this.modalCtrl.create({
    component: CalendarModal,
    componentProps: { options }
  });

  myCalendar.present();

  const event: any = await myCalendar.onDidDismiss();
  const date: CalendarResult = event.data;
  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
step number 12 month load stepping interval to when scroll

onDidDismiss Output { data } = event

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

onDidDismiss Output { role } = event

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

You can’t perform that action at this time.