📅 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
2.x - @ionic/angular
4.0.0
Demo
live demo click me.
Usage
Installation
$ npm install ion2-calendar@next moment --save
Import module
;;;...;
Change Defaults
;;;...;
Components Mode
Basic
;
Date range
;;
Multi Date
;;
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.
;;;
Date range
Set pickMode to 'range'.
openCalendar
Multi Date
Set pickMode to 'multi'.
openCalendar
Disable weeks
Use index eg: [0, 6]
denote Sunday and Saturday.
openCalendar
Localization
your root module
;... ...
openCalendar
Days config
Configure one day.
openCalendar
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 |
{ data } = event
onDidDismiss Output pickMode | Type |
---|---|
single | { date: CalendarResult } |
range | { from: CalendarResult, to: CalendarResult } |
multi | Array<CalendarResult> |
{ role } = event
onDidDismiss Output 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 |