Socket
Socket
Sign inDemoInstall

ion4-calendar

Package Overview
Dependencies
1
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ion4-calendar

A date picker component for ionic4


Version published
Maintainers
1
Weekly downloads
11
increased by37.5%

Weekly downloads

Readme

Source

📅 ion2-calendar

Build Status Dependency Status NPM version Downloads MIT License

date

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

Demo

live demo click me.

Usage

Installation

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

Components Mode

Basic

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

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
onChangeEventEmitterevent for model change
monthChangeEventEmitterevent for month change
onSelectEventEmitterevent for click day-button
onSelectStartEventEmitterevent for click day-button
onSelectEndEventEmitterevent 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',
    };
    let myCalendar =  this.modalCtrl.create(CalendarModal, {
      options: options
    });

    myCalendar.present();

    myCalendar.onDidDismiss((date: CalendarResult, type: string) => {
      console.log(date);
    })
  }

}

Date range

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

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

Disable weeks

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

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

    let myCalendar =  this.modalCtrl.create(CalendarModal, {
      options: options
    });

    myCalendar.present();

    myCalendar.onDidDismiss((date: CalendarResult, type: string) => {
      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
    };

    let myCalendar =  this.modalCtrl.create(CalendarModal, {
      options: options
    });

    myCalendar.present();

    myCalendar.onDidDismiss((date: CalendarResult, type: string) => {
      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
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

onDidDismiss Output [, param1]

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

onDidDismiss Output [, param2]

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

Keywords

FAQs

Last updated on 15 Dec 2018

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc