Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ion4-calendar
Advanced tools
Readme
English is not my native language; please excuse typing errors. 中文文档
^3.0.0
live demo click me.
$ npm install ion2-calendar moment --save
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 {}
<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);
}
...
}
<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() { }
...
}
<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() { }
...
}
Name | Type | Default | Description |
---|---|---|---|
options | CalendarComponentOptions | null | options |
format | string | 'YYYY-MM-DD' | value format |
type | string | 'string' | value type |
readonly | boolean | false | readonly |
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 |
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 |
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);
})
}
}
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);
});
}
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);
})
}
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);
});
}
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);
});
}
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);
});
}
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 |
pickMode | Type |
---|---|
single | { date: CalendarResult } |
range | { from: CalendarResult, to: CalendarResult } |
multi | Array<CalendarResult> |
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 |
---|---|
time | number |
unix | number |
dateObj | Date |
string | string |
years | number |
months | number |
date | number |
FAQs
A date picker component for ionic4
The npm package ion4-calendar receives a total of 234 weekly downloads. As such, ion4-calendar popularity was classified as not popular.
We found that ion4-calendar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.