Need help with ion2-calendar?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

hsuanxyz
535 Stars 258 Forks MIT License 434 Commits 141 Opened issues

Description

📅 A date picker components for ionic2 /ionic3 / ionic4

Services available

!
?

Need anything else?

Contributors list

📅 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 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

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

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

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 | | clearLabel | string | null | clear 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 | | defaultEndDateToStartDate | boolean |
false
| makes the end date optional, will default it to the start |

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.