做react native 项目的时候需要用到日历组件 ，但是在网上找的都不是自己想要的样式和功能 ，所以自己动手写了一个 符合自己项目的 ，
calendar.js 代码如下
import {Component} from "react";
/**
* 日历组件
*/
var React=require('react');
var ReactNative=require('react-native');
var{
StyleSheet,
View,
Text,
ListView,
TouchableOpacity,
Dimensions
} = ReactNative;
import moment from 'moment';
import lodash from 'lodash';
import PropTypes from 'prop-types';
const width=Dimensions.get('window').width
const height=Dimensions.get('window').height
class Index extends Component{
constructor(props){
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state={
dataSource: ds.cloneWithRows(['row 1', 'row 2']),
tmpDataSources:[],
myMonth:moment(new Date()).format('YYYY年MM月'),
}
}
render() {
return(
<View style={{paddingHorizontal:width*0.05,backgroundColor:this.props.bgColor?this.props.bgColor:"#ff5754",paddingBottom:10}}>
<View style={{flexDirection:'row',alignItems:'center',justifyContent:'center',paddingVertical:10}}>
<TouchableOpacity onPress={this.left} style={styles.leftIcon}>
<Text style={{color:this.props.dayColor?this.props.dayColor:"#fff",fontSize:16}}>上一月 </Text>
</TouchableOpacity>
<View style={{width:width*0.4,height:50,alignItems:'center',justifyContent:'center'}}>
<Text style={{fontSize:16,color:this.props.dayColor?this.props.dayColor:"#fff"}}>{this.state.myMonth}</Text>
</View>
<TouchableOpacity onPress={this.right} style={styles.leftIcon}>
<Text style={{color:this.props.dayColor?this.props.dayColor:"#fff",fontSize:16}}>下一月</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row',paddingBottom:10}}>
<Text style={[styles.line,{color:this.props.headTextColor}]}>一</Text>
<Text style={[styles.line,{color:this.props.headTextColor}]}>二</Text>
<Text style={[styles.line,{color:this.props.headTextColor}]}>三</Text>
<Text style={[styles.line,{color:this.props.headTextColor}]}>四</Text>
<Text style={[styles.line,{color:this.props.headTextColor}]}>五</Text>
<Text style={[styles.line,{color:this.props.headTextColor}]}>六</Text>
<Text style={[styles.line,{color:this.props.headTextColor}]}>日</Text>
</View>
<View style={{color:this.props.bgColor}}>
<ListView dataSource={this.state.dataSource}
pageSize={7}
contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',width:width}}
renderRow={(rowData,sectionId,rowId) =>
<View style={styles.row}>
{
rowData.isSelected?
<TouchableOpacity
onPress={()=>this.myClickDate(rowId)}
style={[styles.littleRow,{backgroundColor:this.props.activeBgColor}]}>
<Text style={{color:this.props.activeTextColor}}>{rowData.id}</Text>
</TouchableOpacity>
:
<TouchableOpacity
onPress={()=>this.myClickDate(rowId)}
style={[styles.littleRow]}>
<Text style={{color:this.props.textColor}}>{rowData.id}</Text>
</TouchableOpacity>
}
</View>
}
/>
</View>
</View>
)
}
componentDidMount(){
this.monthDay(moment(new Date()).format('YYYY-MM-DD'))
}
monthDay=(date)=> {
var daysArr =[];
var currentWeekday = moment(date).date(1).weekday(); // 获取当月1日为星期几
var currentMonthDays = moment(date).daysInMonth(); // 获取当月天数
if(currentWeekday==0){ //如果是0的话就是周日
currentWeekday=7;
}
for(var i=1;i<currentWeekday;i++){
daysArr.push({id:''})
}
var YYMM=moment(date,'YYYY-MM-DD').format('YYYYMM')
var nowDate=moment(new Date()).format('YYYYMMDD');
for(var i=1;i<=currentMonthDays;i++){
var myDate=moment(YYMM+i,'YYYYMMD').format('YYYYMMDD')
console.log(moment(nowDate).diff(myDate,'days')==0,moment(new Date).date())
if(moment(new Date).date()===moment(myDate,'YYYYMMDD').date()){
daysArr.push({id:i,isSelected:true})
}else{
daysArr.push({id:i})
}
}
this.setState({
dataSource:this.state.dataSource.cloneWithRows(daysArr),
tmpDataSources:daysArr
})
}
left=()=>{
this.setState({
myMonth: moment(this.state.myMonth, 'YYYY年MM月').subtract('month', 1).format('YYYY年MM月')
})
this.monthDay(moment(this.state.myMonth,'YYYY年MM月').subtract('month',1).format('YYYY-MM-DD'))
}
right=()=>{
this.setState({
myMonth: moment(this.state.myMonth, 'YYYY年MM月').add('month', 1).format('YYYY年MM月')
})
this.monthDay(moment(this.state.myMonth,'YYYY年MM月').add('month',1).format('YYYY-MM-DD'))
}
myClickDate=(index)=>{
let {tmpDataSources}=this.state;
tmpDataSources.forEach((item)=>{
item.isSelected=false;
})
tmpDataSources[index].isSelected=true;
this.setState({
dataSource:this.state.dataSource.cloneWithRows(lodash.cloneDeep(tmpDataSources)),
tmpDataSources
})
console.log(tmpDataSources,moment(new Date()).day())
this.props.callback(tmpDataSources[index]);
}
}
const styles = StyleSheet.create({
line:{
flex:1,
textAlign:'center',
color:'#ff8c87'
},
row:{
width:width*0.9/7,
height:width*0.9/7,
alignItems:'center',
justifyContent:'center',
},
littleRow:{
width:width*0.1,
height:width*0.1,
alignItems:'center',
justifyContent:'center',
borderRadius:width*0.2,
},
leftIcon:{
height:50,
width:width*0.3,
alignItems:'center',justifyContent:'center',
}
})
Index.defaultProps={
bgColor:'#ff6060',
headTextColor:'#ff8c87',
textColor:'#fff',
activeBgColor:'#fff',
activeTextColor:'#ff6060'
}
Index.PropTypes={
bgColor:PropTypes.string.isRequired,
headTextColor:PropTypes.string.isRequired,
textColor:PropTypes.string.isRequired,
activeBgColor:PropTypes.string.isRequired,
callback:PropTypes.func.isRequired
}
export default Index
使用方法：
import Calendars from './src/index'
<Calendars callback={this.callback}/>
callback=(data)=>{
console.log(data)
}
具体效果看下图
QQ20180825-000523.png
网友评论