gustavofulton/ion2-calendar

📅 A date picker for ionic2

ion2-calendar

A configurable and selectable range dates calendar component for ionic2

中文文档

English is not my native language; please excuse typing errors.

install

if you do not use moment $ npm install moment --save

$ npm install ion2-calendar --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

DEMO

date

 basic() {
    this.calendarCtrl.openCalendar({
      title:'basic demo',
    })
      .then( (res:any) => { console.log(res) })
      .catch( () => {} )
  }

date range

dateRange() {
    this.calendarCtrl.openCalendar({
      isRadio: false,
    })
      .then( (res:any) => { console.log(res) })
      .catch( () => {} )
  }

disable weekdays

  disableWeekdays() {
    this.calendarCtrl.openCalendar({
      disableWeekdays:[0,6]
    })
      .then( (res:any) => { console.log(res) })
      .catch( () => {} )
  }

weekdays title format

month title format

 settingDisplay() {
    this.calendarCtrl.openCalendar({
      monthTitle:' MMMM-yy ',
      weekdaysTitle:["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      closeLabel:''
    })
      .then( (res:any) => { console.log(res) })
      .catch( () => {} )
  }

days config

daysConfig() {

    let _daysConfig = [
      {
        date:new Date(2017,0,1),
        subTitle:'New Year\'s',
        marked:true
      },
      {
        date:new Date(2017,1,14),
        subTitle:'Valentine\'s',
        disable:true
      },
      {
        date:new Date(2017,3,1),
        subTitle:'April Fools',
        marked:true
      },
      {
        date:new Date(2017,3,7),
        subTitle:'World Health',
        marked:true
      },
      {
        date:new Date(2017,4,31),
        subTitle:'No-Smoking',
        marked:true
      },
      {
        date:new Date(2017,5,1),
        subTitle:'Children\'s',
        marked:true
      }
    ];

    _daysConfig.push(...this.days);

    this.calendarCtrl.openCalendar({
      from: new Date(2017,0,1),
      to  : new Date(2017,11.1),
      daysConfig:_daysConfig
    })
      .then( (res:any) => { console.log(res) })
      .catch( () => {} )
  }

API

openCalendar(Options,ModalOptions)

Options

Name	Type	Default	Description
from	Date	new Date()	start date
to	Date	0 (Infinite)	end date
title	string	'Calendar'	title
defaultDate	Date	none	let the view scroll to the default date
cssClass	string	''	Additional classes for custom styles, separated by spaces.
canBackwardsSelected	boolean	false	can backwards selected
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
weekStartDay	number	0 (0 or 1)	set week start day
daysConfig	Array<DaysConfig>	[]	days configuration

DaysConfig

Name	Type	Default	Description
cssClass	string	''	separated by spaces
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'

ModalOptions

Name	Type	Default	Description
showBackdrop	boolean	true	Whether to show the backdrop
enableBackdropDismiss	boolean	true	Whether the popover should be dismissed by tapping the backdrop

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

TODO

1. Add style settings.
2. Add default date, let the view scroll to the default date.
3. To today
4. Scroll backwards (#2)
5. Settings week start day(#5)

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Development

cd ion2-calendar
npm install
npm run build
# output ./dist files