Skip to content
React-Native-Calendar 日历组件
Branch: master
Clone or download
vczero Merge pull request #3 from daemonchen/master
fixed type error  fontWeight should be NSString
1
Latest commit 10883e7 Nov 21, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example fixed type error Nov 21, 2015
.gitignore Initial commit Jul 22, 2015
LICENSE Initial commit Jul 22, 2015
README.md
calendar.js add example Jul 22, 2015
demo.png
npm.png add npm png Jul 23, 2015

README.md

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: 需要选中的日期,可选
You can’t perform that action at this time.