Skip to content

suijunqiang/react-native-calendar

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

Languages

  • JavaScript 57.3%
  • Objective-C 42.7%