Forked from : https://github.com/hsuanxyz/ion-range-calendar
- Supports date range.
- Supports multi date.
- Supports HTML components.
- Disable weekdays or weekends.
- Setting days event.
- Setting localization.
- Material design.
"@ionic/angular": ">=7.0.0"
npm i @googlproxer/ion-range-calendar date-fns date-fns-tz
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '@ionic/angular';
import { MyApp } from './app.component';
...
import { IonRangeCalendarModule } from '@googlproxer/ion-range-calendar';
@NgModule({
declarations: [
MyApp,
...
],
imports: [
IonicModule.forRoot(),
IonRangeCalendarModule
],
bootstrap: [MyApp],
...
})
export class AppModule {}
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
...
import { IonRangeCalendarModule } from "ion-range-calendar";
@NgModule({
declarations: [
MyApp,
...
],
imports: [
IonicModule.forRoot(MyApp),
// See CalendarComponentOptions for options
IonRangeCalendarModule.forRoot({
doneLabel: 'Save',
closeIcon: true
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
...
]
})
export class AppModule {}
<ion-range-calendar [(ngModel)]="date" (change)="onChange($event)" [type]="type" [format]="'yyyy-MM-dd'">
</ion-range-calendar>
import { Component } from '@angular/core';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
date: string;
type: 'string'; // 'string' | 'js-date' | 'time' | 'object'
constructor() { }
onChange($event) {
console.log($event);
}
...
}
<ion-range-calendar [(ngModel)]="dateRange" [options]="optionsRange" [type]="type" [format]="'yyyy-MM-dd'">
</ion-range-calendar>
import { Component } from '@angular/core';
import { CalendarComponentOptions } from '@googlproxer/ion-range-calendar';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
dateRange: { from: string; to: string; };
type: 'string'; // 'string' | 'js-date' | 'time' | 'object'
optionsRange: CalendarComponentOptions = {
pickMode: 'range'
};
constructor() { }
...
}
<ion-range-calendar [(ngModel)]="dateMulti" [options]="optionsMulti" [type]="type" [format]="'yyyy-MM-dd'">
</ion-range-calendar>
import { Component } from '@angular/core';
import { CalendarComponentOptions } from '@googlproxer/ion-range-calendar';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
dateMulti: string[];
type: 'string'; // 'string' | 'js-date' | 'time' | 'object'
optionsMulti: CalendarComponentOptions = {
pickMode: 'multi'
};
constructor() { }
...
}
Name |
Type |
Default |
Description |
options |
CalendarComponentOptions |
null |
options |
format |
string |
'yyyy-MM-dd' |
date-fns format string |
type |
string |
'string' |
value type |
readonly |
boolean |
false |
readonly |
Name |
Type |
Description |
change |
EventEmitter |
event for model change |
monthChange |
EventEmitter |
event for month change |
select |
EventEmitter |
event for day select |
selectStart |
EventEmitter |
event for day select |
selectEnd |
EventEmitter |
event for day select |
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<string> |
['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<number> |
[] |
week to be disabled (0-6) |
monthFormat |
string |
'MMM yyyy' |
month title format |
weekdays |
Array<string> |
['S', 'M', 'T', 'W', 'T', 'F', 'S'] |
weeks text |
weekStart |
number |
0 (0 or 1) |
set week start day |
daysConfig |
Array<DaysConfig> |
[] |
days configuration |
maxRange |
number |
0 |
The maximum range of the selection in days |
Import ion-range-calendar in component controller.
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import {
CalendarModal,
CalendarModalOptions,
DayConfig,
CalendarResult
} from '@googlproxer/ion-range-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 = await myCalendar.onDidDismiss();
const date: CalendarResult = event.data;
console.log(date);
}
}
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 = await myCalendar.onDidDismiss();
const date = event.data;
const from: CalendarResult = date.from;
const to: CalendarResult = date.to;
console.log(date, from, to);
}
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 = await myCalendar.onDidDismiss();
const date: CalendarResult = event.data;
console.log(date);
}
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 = await myCalendar.onDidDismiss();
const date: CalendarResult = event.data;
console.log(date);
}
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 = await myCalendar.onDidDismiss();
const date: CalendarResult = event.data;
console.log(date);
}
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 = await myCalendar.onDidDismiss();
const date: CalendarResult = event.data;
console.log(date);
}
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<Date> |
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<number> |
[] |
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<string> |
['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 |
maxRange |
number |
0 |
The maximum range of the selection in days |
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 |
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'
|
Name |
Type |
Notes |
time |
number |
unix milliseconds |
unix |
number |
unix seconds |
dateObj |
Date |
JS Date |
string |
string |
format: yyyy-MM-dd
|
years |
number |
year |
months |
number |
month |
date |
number |
day |