ion2-calendar

ion2-calendar

A configurable and selectable range dates calendar component for ionic2

Usage

install

$ npm install ion2-calendar --save

if you do not use moment

$ npm install moment --save

import module

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } 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,
    ...
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

Use

import { Component } from '@angular/core';

import {CalendarController} from "ion2-calendar/dist";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public calendarCtrl: CalendarController
  ) {

  }

  openCalendar(){
    this.calendarCtrl.openCalendar({
      from:new Date()
    })
    .then( res => { console.log(res) } );
  }

}

Demo

date

date range

disable weekdays

weekdays title

month title

days config

API

openCalendar(Options)

Options

Name	Type	Default	Description
from	Date	new Date()	start date
to	Date	0 (Infinite)	end date
title	string	'Calendar'	title
isRadio	boolean	true	true for one day ,false for range dates
disableWeekdays	Array	[]	week to be disabled (0-6)
closeLabel	string	cancel	cancel button label ,can be an empty string
monthTitle	string	'MMM yyyy'	month title format
weekdaysTitle	Array	"Di_Lu_Ma_Me_Je_Ve_Sa".split("_")	weeks title
daysConfig	Array<DaysConfig>	[]	days configuration

DaysConfig

Name	Type	Default	Description
date	Date	required	configured days
marked	boolean	false	highlight color
disable	boolean	false	disable
title	string	none	displayed title example:'today'
subTitle	string	none	subTitle subTitle example:'christmas'

Output Promise

Name	Type	Description
from	Day	start date If isRadio it is false
to	Day	end date If isRadio it is false
date	Day	date If isRadio it is true

Day

Name	Type	Description
time	number	timestamp
marked	boolean	highlight color
disable	boolean	disable
title	string	displayed title
subTitle	string	subTitle subTitle

Environment

• Cordova CLI: 6.4.0
• Ionic Framework Version: 2.0.0-rc.4
• Ionic CLI Version: 2.1.18
• Ionic App Lib Version: 2.1.9
• Ionic App Scripts Version: 0.0.47
• OS: macOS Sierra
• Node Version: v6.9.2
• Xcode version: Xcode 8.2.1 Build version 8C1002