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

Gracias por leer