rmc-calendar

React Mobile Calendar Component (web)

Screenshots

Development

npm i 
npm start

Example

http://localhost:8021/examples/

online example: http://gem-mine.github.io/rmc-calendar/

install

docs

Usage

import React, { Component } from 'react';

import { RMCCalendar } from '@gem-mine/rmc-calendar';
import '@gem-mine/rmc-calendar/assets/index.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  setVisiable = () => {
    this.setState({
      visible: !this.state.visible,
    });
  }

  render() {
    return (
      <div className="App">
        <Calendar
          visible={this.state.visible}
          onCancel={this.setVisiable}
          onOk={this.setVisiable}
        />
      </div>
    );
  }
}

export default App;

API

Calendar props

interface PropsType {
    /** 本地化 */
  locale?: Models.Locale;
  /** 关闭时回调 */
  onCancel?: () => void;
  /** 清除时回调 */
  onClear?: () => void;
  /** 确认时回调 */
  onOk?: (startDateTime?: Date, endDateTime?: Date) => void;
  /** (web only) 样式前缀，default: rmc-calendar */
  prefixCls?: string;
  /** 附加样式名称, default: '' */
  className?: string;
  style?: React.CSSProperties;
  /** header title, default: {locale.title} */
  title?: string;
  /** 选择类型，default: range，one: 单日，range: 日期区间 */
  type?: 'one' | 'range';
  /** 是否显示，default: false */
  visible?: boolean;
  /** 选中日期, 开始时间, 结束时间 */
  value?: SelectDateType;
  /** 默认展示，开始时间、结束时间 */
  defaultValue?: SelectDateType;
  /** 是否采用滑动翻页模式 */
  swiper?: boolean;
  /** 是否在日期区间模式显示起/止信息 */
  showBeginEndInfo?: boolean;

  // CalendarPanel
  /** 显示开始日期，default: today */
  defaultDate?: Date;
  /** 自定义内容追加到单元格内 */
  renderDateCellExtra?: (date: Date) => Models.ExtraData | void;
  /** 自定义内容覆盖单元格 */
  renderDateFullCell?: (data: Models.CellData) => React.ReactNode | void;
  /** 自定义确认框 */
  renderConfirm?: (data?: Models.ConfirmParams) => Models.ConfirmPanelData;
  /** 无限滚动优化（大范围选择），default: false */
  infinite?: boolean;
  /** 初始化月个数，default: 6 */
  initalMonths?: number;
  /** 可显示日期 */
  validRange?: [Date | undefined, Date | undefined];
  /** 不可选日期 */
  disabledDate?: (current: Date) => boolean;
  /** 设置月起始日(1-28)，default: 1 */
  firstDayOfMonth?: number;
  /** 设置周起始日(0-6)，default: 0 */
  firstDayOfWeek?: number;
  /** 选择日期回调，如果有返回值，选择范围将使用返回值 */
  onSelect?: (date: Date, state?: [Date | undefined, Date | undefined]) => SelectDateType | void;
}

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-calendar is released under the MIT license.