3.4.4 • Published 4 years ago

@paulitto/ion2-calendar v3.4.4

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

📅 ion2-calendar

NPM version Downloads MIT License

date

  • 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
  • @ionic/angular 4.0.0
  • @ionic/angular 5.0.0

Demo

live demo click me.

Usage

Installation

$ npm install @paulitto/ion2-calendar moment --save

Import module

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(),
    CalendarModule
  ],
  bootstrap: [MyApp],
  ...
})
export class AppModule {}

Change Defaults

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),
    // See CalendarComponentOptions for options
    CalendarModule.forRoot({
      doneLabel: 'Save',
      closeIcon: true
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ]
})
export class AppModule {}

Components Mode

Basic

<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);
  }
  ...
}

Date range

<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() { }
  ...
}

Multi Date

<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() { }
  ...
}

Input Properties

NameTypeDefaultDescription
optionsCalendarComponentOptionsnulloptions
formatstring'YYYY-MM-DD'value format
typestring'string'value type
readonlybooleanfalsereadonly

Output Properties

NameTypeDescription
changeEventEmitterevent for model change
monthChangeEventEmitterevent for month change
selectEventEmitterevent for click day-button
selectStartEventEmitterevent for click day-button
selectEndEventEmitterevent for click day-button

CalendarComponentOptions

NameTypeDefaultDescription
fromDatenew Date()start date
toDate0 (Infinite)end date
colorstring'primary''primary', 'secondary', 'danger', 'light', 'dark'
pickModestringsingle'multi', 'range', 'single'
showToggleButtonsbooleantrueshow toggle buttons
showMonthPickerbooleantrueshow month picker
monthPickerFormatArray['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']month picker format
defaultTitlestring''default title in days
defaultSubtitlestring''default subtitle in days
disableWeeksArray[]week to be disabled (0-6)
monthFormatstring'MMM YYYY'month title format
weekdaysArray['S', 'M', 'T', 'W', 'T', 'F', 'S']weeks text
weekStartnumber0 (0 or 1)set week start day
daysConfigArray<DaysConfig>[]days configuration

Modal Mode

Basic

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'
    };

    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

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: 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);
}

Disable weeks

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: any = await myCalendar.onDidDismiss();
  const date: CalendarResult = event.data;
  console.log(date);
}

Localization

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);
}

Days config

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: any = await myCalendar.onDidDismiss();
  const date: CalendarResult = event.data;
  console.log(date);
}

API

Modal Options

NameTypeDefaultDescription
fromDatenew Date()start date
toDate0 (Infinite)end date
titlestring'CALENDAR'title
colorstring'primary''primary', 'secondary', 'danger', 'light', 'dark'
defaultScrollToDatenonelet the view scroll to the default date
defaultDateDatenonedefault date data, apply to single
defaultDatesArraynonedefault dates data, apply to multi
defaultDateRange{ from: Date, to: Date }nonedefault date-range data, apply to range
defaultTitlestring''default title in days
defaultSubtitlestring''default subtitle in days
cssClassstring''Additional classes for custom styles, separated by spaces.
canBackwardsSelectedbooleanfalsecan backwards selected
pickModestringsingle'multi', 'range', 'single'
disableWeeksArray[]week to be disabled (0-6)
closeLabelstringCANCELcancel button label
doneLabelstringDONEdone button label
clearLabelstringnullclear button label
closeIconbooleanfalseshow cancel button icon
doneIconbooleanfalseshow done button icon
monthFormatstring'MMM YYYY'month title format
weekdaysArray['S', 'M', 'T', 'W', 'T', 'F', 'S']weeks text
weekStartnumber0 (0 or 1)set week start day
daysConfigArray<DaysConfig>[]days configuration
stepnumber12month load stepping interval to when scroll
defaultEndDateToStartDatebooleanfalsemakes the end date optional, will default it to the start

onDidDismiss Output { data } = event

pickModeType
single{ date: CalendarResult }
range{ from: CalendarResult, to: CalendarResult }
multiArray<CalendarResult>

onDidDismiss Output { role } = event

ValueDescription
'cancel'dismissed by click the cancel button
'done'dismissed by click the done button
'backdrop'dismissed by click the backdrop

DaysConfig

NameTypeDefaultDescription
cssClassstring''separated by spaces
dateDaterequiredconfigured days
markedbooleanfalsehighlight color
disablebooleanfalsedisable
titlestringnonedisplayed title eg: 'today'
subTitlestringnonesubTitle subTitle eg: 'New Year\'s'

CalendarResult

NameType
timenumber
unixnumber
dateObjDate
stringstring
yearsnumber
monthsnumber
datenumber

Thanks for reading