All Projects → vczero → React Native Calendar

vczero / React Native Calendar

Licence: mit
React-Native-Calendar 日历组件

Programming Languages

javascript
184084 projects - #8 most used programming language

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: 需要选中的日期,可选
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].