ion2-calendar-menusifu

downloads-url !MIT Licenselicense-imagelicense-url
A configurable and selectable range dates calendar component for ionic2

install

if you do not use moment $ npm install moment --save
$ npm install ion2-calendar-menusifu --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

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

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