Skip to content

vczero/react-native-calendar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

10883e7 · Nov 21, 2015

History

11 Commits
Nov 21, 2015
Jul 22, 2015
Jul 22, 2015
Jul 23, 2015
Jul 22, 2015
Jul 22, 2015
Jul 23, 2015

Repository files navigation

react-native-calendar

React-Native日历组件

###一、安装

npm install rn-calendar

###二、效果

###三、用法指南 (1)示例Demo

var React = require('react-native');
var Calendar = require('rn-calendar');

var{
  View,
  AppRegistry,
  StyleSheet,
  StatusBarIOS
} = React;

StatusBarIOS.setHidden(true);

var Index = React.createClass({
  render: function(){
    var holiday = {
      '2015-10-1': '国庆节',
      '2015-9-10': '教师节',
      '2016-1-1': '元旦节',
      '2015-11-11': '双十一'
    };
    var check = {
      '2015-10-1': 'checked',
      '2015-9-1': 'checked',
      '2015-7-10': 'checked',
      '2015-9-10': 'checked'
    };
    var headerStyle ={
      backgroundColor: '#3C9BFD',
      color:'#fff',
      fontSize: 15,
      fontWeight:500,
    };
    return (
      <View style={styles.container}>
        <Calendar
          touchEvent={this.press}
          headerStyle={headerStyle}
          holiday={holiday}
          check={check}
          />
      </View>
    );
  },

  press: function(str){
    alert(str);
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'blue'
  }
});

AppRegistry.registerComponent('reactCalendar', () => Index);

(2)属性

touchEvent:用户点击时获取的时间,可选
headerStyle:星期条的颜色和字体样式设置, 可选
holiday: 需要显示的节假日, 可选
check: 需要选中的日期,可选

About

React-Native-Calendar 日历组件

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published