Giter VIP home page Giter VIP logo

m-calendar's Introduction

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.

m-calendar's People

Contributors

emersonlaurentino avatar likezero avatar silentcloud avatar zhang740 avatar ziluo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

m-calendar's Issues

Calendar 依赖 TimePicker 时缺少参数

@zhang740 @likezero 你们好,发现一个 Calendar 中 依赖 rmc-data-picker 传参的问题,问题描述如下:

https://github.com/react-component/m-calendar/blob/master/src/TimePicker.tsx#L64 中使用了 rmc-date-picker ,但是在代码中只向 rmc-date-picker 传递了少量的参数:

当前代码:

<DateTimePicker
      prefixCls={prefixCls}
      pickerPrefixCls={pickerPrefixCls}
      style={{
        height: height > 164 || height < 0 ? 164 : height,
        overflow: 'hidden'
      } as React.CSSProperties}
      mode="time"
      date={date}
      locale={locale}
      minDate={this.getMinTime(date)}
      maxDate={this.getMaxTime(date)}
      onDateChange={this.onDateChange}
      use12Hours
/>

理想代码:

<DateTimePicker
      prefixCls={prefixCls}
      pickerPrefixCls={pickerPrefixCls}
      style={{
        height: height > 164 || height < 0 ? 164 : height,
        overflow: 'hidden'
      } as React.CSSProperties}
      mode="time"
      date={date}
      locale={locale}
      minDate={this.getMinTime(date)}
      maxDate={this.getMaxTime(date)}
      onDateChange={this.onDateChange}
      use12Hours
      ...props // 这里应该解构剩余的参数到DateTimePicker中
/>

在 rmc-date-picker 中有 https://www.npmjs.com/package/rmc-date-picker#api 许多的参数没有传递进来,导致无法在 Calendar 中无法更好的控制 rmc-data-picker

目标:应该结构多余的参数到 rmc-date-pick

customizing the date Cell

What problem does this feature solve?
add some festival, holiday or another custom label on this

What does the proposed API look like?
see: antd - calendar - (dateCellRender / dateFullCellRender)

Display Month Name

I want to display months names (Jan, Feb, Mar, etc...) instead of numeric (2018/10), so I can do something like: October, 2018.

Is there a way to do this?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.