1.0.1 • Published 4 years ago
ion5-schedule v1.0.1
📅 ion5-schedule
- Soporte de rango de fechas.
- Soporte de múltiples fechas.
- Soporte de componentes HTML.
- Desactivar dÃas laborables o fines de semana.
- Evento de dÃas de configuración.
- Configuración de localización.
Soporte
- @ionic/angular
^5.0.0
Uso
Instalación
$ npm install ion5-schedule moment --save
Importación de Módulos
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '@ionic/angular';
import { MyApp } from './app.component';
...
import { CalendarModule } from 'ion5-schedule';
@NgModule({
declarations: [
MyApp,
...
],
imports: [
IonicModule.forRoot(),
CalendarModule
],
bootstrap: [MyApp],
...
})
export class AppModule {}
Cambiar valores predeterminados
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
...
import { CalendarModule } from "ion5-schedule";
@NgModule({
declarations: [
MyApp,
...
],
imports: [
IonicModule.forRoot(MyApp),
// Consulte CalendarComponentOptions para conocer las opciones.
CalendarModule.forRoot({
doneLabel: 'Save',
closeIcon: true
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
...
]
})
export class AppModule {}
Modo de componentes
Básico
<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);
}
...
}
Rango de fechas
<ion-calendar [(ngModel)]="dateRange"
[options]="optionsRange"
[type]="type"
[format]="'YYYY-MM-DD'">
</ion-calendar>
import { Component } from '@angular/core';
import { CalendarComponentOptions } from 'ion5-schedule';
@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() { }
...
}
Fecha múltiple
<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() { }
...
}
Propiedades de entrada
Nombre | Tipo | Defecto | Descripción |
---|---|---|---|
options | CalendarComponentOptions | null | options |
format | string | 'YYYY-MM-DD' | value format |
type | string | 'string' | value type |
readonly | boolean | false | readonly |
Propiedades de salida
Nombre | Tipo | Descripción |
---|---|---|
change | EventEmitter | evento para cambio de modelo |
monthChange | EventEmitter | evento por cambio de mes |
select | EventEmitter | evento para hacer clic en el botón del dÃa |
selectStart | EventEmitter | evento para hacer clic en el botón del dÃa |
selectEnd | EventEmitter | evento para hacer clic en el botón del dÃa |
CalendarComponentOptions
Nombre | Tipo | Default | Descripción |
---|---|---|---|
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 | ['ENE', 'FEB', 'MAR', 'ABR', 'MAY', 'JUN', 'JUL', 'AGO', 'SEP', 'OCT', 'NOV', 'DIC'] | 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 | ['SA', 'LU', 'MA', 'MI', 'JU', 'VI', 'DO'] | weeks text |
weekStart | number | 0 (0 or 1) | set week start day |
daysConfig | Array<DaysConfig> | [] | days configuration |
Modo modal
Básico
Importe ion5-schedule en el controlador del componente.
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import {
CalendarModal,
CalendarModalOptions,
DayConfig,
CalendarResult
} from 'ion5-schedule';
@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
Establezca pickMode en '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);
}
Desactivar semanas
Utilice el Ãndice, por ejemplo: [0, 6]
denota domingo y sábado.
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);
}
Localización
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);
}
Configuración de dÃas
Configurar un dÃa.
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
Opciones del modo modal
Nombre | Tipo | Defecto | 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 | Tipo |
---|---|
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
Nombre | Tipo | Defecto | Descripción |
---|---|---|---|
cssClass | string | '' | separados por espacios |
date | Date | required | dÃas configurados |
marked | boolean | false | resaltar el color |
disable | boolean | false | inhabilitar |
title | string | none | tÃtulo mostrado, por ejemplo: 'today' |
subTitle | string | none | subtÃtulo mostrado, por ejemplo: 'New Year\'s' |
CalendarResult
Nombre | Tipo |
---|---|
time | number |
unix | number |
dateObj | Date |
string | string |
years | number |
months | number |
date | number |