当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

ion2-calendar

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者陶烨赫

操作系统跨平台

开源组织无

适用人群未知

软件概览

�� ion2-calendar

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 2.x
@ionic/angular 4.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(),
    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

Name	Type	Default	Description
options	CalendarComponentOptions	null	options
format	string	'YYYY-MM-DD'	value format
type	string	'string'	value type
readonly	boolean	false	readonly

Output Properties

Name	Type	Description
change	EventEmitter	event for model change
monthChange	EventEmitter	event for month change
select	EventEmitter	event for click day-button
selectStart	EventEmitter	event for click day-button
selectEnd	EventEmitter	event for click day-button

CalendarComponentOptions

Name	Type	Default	Description
from	Date	`new Date()`	start date
to	Date	0 (Infinite)	end date
color	string	`'primary'`	'primary', 'secondary', 'danger', 'light', 'dark'
pickMode	string	`single`	'multi', 'range', 'single'
showToggleButtons	boolean	`true`	show toggle buttons
showMonthPicker	boolean	`true`	show month picker
monthPickerFormat	Array	`['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']`	month picker format
defaultTitle	string	''	default title in days
defaultSubtitle	string	''	default subtitle in days
disableWeeks	Array	`[]`	week to be disabled (0-6)
monthFormat	string	`'MMM YYYY'`	month title format
weekdays	Array	`['S', 'M', 'T', 'W', 'T', 'F', 'S']`	weeks text
weekStart	number	`0` (0 or 1)	set week start day
daysConfig	Array<*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

Name	Type	Default	Description
from	Date	`new Date()`	start date
to	Date	0 (Infinite)	end date
title	string	`'CALENDAR'`	title
color	string	`'primary'`	'primary', 'secondary', 'danger', 'light', 'dark'
defaultScrollTo	Date	none	let the view scroll to the default date
defaultDate	Date	none	default date data, apply to single
defaultDates	Array	none	default dates data, apply to multi
defaultDateRange	{ from: Date, to: Date }	none	default date-range data, apply to range
defaultTitle	string	''	default title in days
defaultSubtitle	string	''	default subtitle in days
cssClass	string	`''`	Additional classes for custom styles, separated by spaces.
canBackwardsSelected	boolean	`false`	can backwards selected
pickMode	string	`single`	'multi', 'range', 'single'
disableWeeks	Array	`[]`	week to be disabled (0-6)
closeLabel	string	`CANCEL`	cancel button label
doneLabel	string	`DONE`	done button label
clearLabel	string	null	clear button label
closeIcon	boolean	`false`	show cancel button icon
doneIcon	boolean	`false`	show done button icon
monthFormat	string	`'MMM YYYY'`	month title format
weekdays	Array	`['S', 'M', 'T', 'W', 'T', 'F', 'S']`	weeks text
weekStart	number	`0` (0 or 1)	set week start day
daysConfig	Array<*DaysConfig*>	`[]`	days configuration
step	number	`12`	month load stepping interval to when scroll
defaultEndDateToStartDate	boolean	`false`	makes the end date optional, will default it to the start

onDidDismiss Output `{ data } = event`

pickMode	Type
single	{ date: *CalendarResult* }
range	{ from: *CalendarResult, to: CalendarResult* }
multi	Array<*CalendarResult*>

onDidDismiss Output `{ role } = event`

Value	Description
'cancel'	dismissed by click the cancel button
'done'	dismissed by click the done button
'backdrop'	dismissed by click the backdrop

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 eg: `'today'`
subTitle	string	none	subTitle subTitle eg: `'New Year\'s'`

CalendarResult

Name	Type
time	number
unix	number
dateObj	Date
string	string
years	number
months	number
date	number

Thanks for reading

使用案例

jQuery Ion.Calendar 日期/日历

在线实例实例演示默认实例演示每周第一天实例演示输入框插件实例演示 HTML data 属性实例演示回调函数1 实例演示回调函数2 使用方法 <div id="calendar"></div> 复制 <script> $(function() { $("#calendar").ionCalendar({ lang: 'zh-cn'
IT英语2-编程词汇编程英语词汇

IT英语2-编程词汇编程英语词汇 A2A integration A2A整合 abstract 抽象的 abstract base class (ABC)抽象基类 abstract class 抽象类 abstraction 抽象、抽象物、抽象性 access 存取、访问 access level访问级别 access function 访问函数 account 账户 actio
Struts2学习总结 ---- OGNL 表达式语言

OGNL---- 表达式语言 1. 访问bean属性: 直接通过属性链的形式进行设值与取值  <s:form action="login"> <s:textfield name="user.username" lable="用户名" /> <s:textfield name="user.password" lable="密码" /> <s:submit /> </
【转载】Struts2学习总结 ---- OGNL 表达式语言

OGNL---- 表达式语言 1. 访问bean属性: 直接通过属性链的形式进行设值与取值  <s:form action="login"> <s:textfield name="user.username" lable="用户名" /> <s:textfield name="user.password" lable="密码" /> <s:submit /> </

ion2-calendar

�� ion2-calendar

Support

Demo

Usage

Installation

Import module

Change Defaults

Components Mode

Basic

Date range

Multi Date

Input Properties

Output Properties

CalendarComponentOptions

Modal Mode

Basic

Date range

Multi Date

Disable weeks

Localization

Days config

API

Modal Options

onDidDismiss Output `{ data } = event`

onDidDismiss Output `{ role } = event`

DaysConfig

CalendarResult

Thanks for reading

同类工具

相关阅读

相关文章

相关问答

相关文档

ion2-calendar

�� ion2-calendar

Support

Demo

Usage

Installation

Import module

Change Defaults

Components Mode

Basic

Date range

Multi Date

Input Properties

Output Properties

CalendarComponentOptions

Modal Mode

Basic

Date range

Multi Date

Disable weeks

Localization

Days config

API

Modal Options

onDidDismiss Output { data } = event

onDidDismiss Output { role } = event

DaysConfig

CalendarResult

Thanks for reading

同类工具

相关阅读

相关文章

相关问答

相关文档

onDidDismiss Output `{ data } = event`

onDidDismiss Output `{ role } = event`