Socket
Socket
Sign inDemoInstall

rmc-calendar

Package Overview
Dependencies
23
Maintainers
3
Versions
24
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

rmc-calendar

React Mobile Calendar Component(web and react-native)


Version published
Maintainers
3
Weekly downloads
16,025
decreased by-5.26%

Weekly downloads

Readme

Source

rmc-calendar


React Mobile Calendar Component (web)

NPM version react build status Test coverage gemnasium deps npm download

Screenshots

Development

npm i 
npm start

Example

http://localhost:8000/examples/

online example: http://react-component.github.io/m-calendar/

react-native (TBC)

./node_modules/rc-tools run react-native-init
npm run watch-tsc
react-native start
react-native run-ios

install

rmc-calendar

docs

Usage

import React, { Component } from 'react';

import { Calendar } from 'rmc-calendar';
import '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}
          onConfirm={this.setVisiable}
        />
      </div>
    );
  }
}

export default App;

API

Calendar props

interface PropsType {
    /** enter direction,default: vertical */
    enterDirection?: 'horizontal' | 'vertical';
    /** locale */
    locale?: GlobalModels.Locale;
    onCancel?: () => void;
    onConfirm?: (startDateTime?: Date, endDateTime?: Date) => void;
    /** choose time,default: false */
    pickTime?: boolean;
    /** (web only) prefix class,default: rmc-calendar */
    prefixCls?: string;
    /** shortcut render, need showShortcut: true */
    renderShortcut?: (select: (startDate?: Date, endDate?: Date) => void) => React.ReactNode;
    /** show header, default: true */
    showHeader?: boolean;
    /** show shortcut, default: false */
    showShortcut?: boolean;
    /** header title, default: {locale.title} */
    title?: string;
    /** select type, default: range,one: one-day, range: range */
    type?: 'one' | 'range';
    /** visible, default: false */
    visible?: boolean;

    // DatePicker Component
    /** default date for show, default: today */
    defaultDate?: Date;
    /** extra info of date */
    getDateExtra?: (date: Date) => DateModels.ExtraData;
    /** infinite scroll, default: true */
    infinite?: boolean;
    /** infinite scroll optimization, default: false */
    infiniteOpt?: boolean;
    /** inital generate months, default: 6 */
    initalMonths?: number;
    /** max date */
    maxDate?: Date;
    /** min date */
    minDate?: Date;
    /** select range has disable date */
    onSelectHasDisableDate?: (date: Date[]) => void;

    // TimePicker Component
    /** inital time of TimePicker */
    defaultTimeValue?: Date;
}

DatePicker props

export default interface PropsType {
    /** default date for show, default: today */
    defaultDate?: Date;
    /** select value of start date */
    startDate?: Date;
    /** select value of end date */
    endDate?: Date;
    /** extra info of date */
    getDateExtra?: (date: Date) => Models.ExtraData;
    /** infinite scroll, default: true */
    infinite?: boolean;
    /** infinite scroll optimization, default: false */
    infiniteOpt?: boolean;
    /** inital generate months, default: 6 */
    initalMonths?: number;
    /** locale */
    locale?: GlobalModels.Locale;
    /** max date */
    maxDate?: Date;
    /** min date */
    minDate?: Date;
    /** callback when click the cell of date */
    onCellClick?: (date: Date) => void;
    /** select range has disable date */
    onSelectHasDisableDate?: (date: Date[]) => void;
    /** (web only) prefix class */
    prefixCls?: string;
    /** select type, default: range,one: one-day, range: range */
    type?: 'one' | 'range';
}

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-calendar is released under the MIT license.

Keywords

FAQs

Last updated on 27 Jun 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc