popbean-react/src/bs3/calendar/cal-month.jsx

let me think about something,comming soon...

var React = require('react');
//
var MonthCell = React.createClass({
	getDefaultProps:function(){
		return {
			data:{

			}
		};
	},
	render:function(){
		return(
			<div className="cal-cell1 cal-cell">
				<div className="cal-month-day cal-day-outmonth cal-day-weekend cal-month-first-row">
					<span className="pull-right">{this.props.data.label}</span>
				</div>
			</div>
		);
	}
});
function yyyy_mm_dd(date){
	var month = date.getMonth()+1;
	month = (month > 9) ? month : '0'+ month;
	return date.getFullYear()+'-'+month+'-'+(date.getDate()>9?date.getDate():'0'+date.getDate());
}
var CalMonth = React.createClass({
	getDefaultProps:function(){
		var current_date = yyyy_mm_dd(new Date());
		return {
			colcount:7,
			rowcount:6,
			renderComponent:MonthCell,
			data:current_date
		};
	},
	make:function(){//需要根据this.props.data(yyyy-mm-01)计算起点位置
		//FIXME 计算起点
		var selected_data = new Date(this.props.data);
		var month_first = new Date(selected_data.getFullYear(),selected_data.getMonth(),1);
		var start_pos = month_first.getDay()-1;//得到起始位置
		var month_end = new Date(selected_data.getFullYear(),selected_data.getMonth()+1,0);
		var end_pos = month_end.getDay()-1;//得到终点位置
		var month_date = month_end.getDate();//本月天数

		var item_list = this.props.events || [];//FIXME 得按照日期来
		var colcount = this.props.colcount;
		var rowcount = this.props.rowcount;
		var ret = new Array(colcount*rowcount);
		//
		for(var i=0,len=item_list.length;i<len;i++){
			var tmp_date = new Date(item_list[i]['date']);
			if(tmp_date.getMonth() == selected_data.getMonth()){
				var pos = start_pos+tmp_date.getDate()-1;
				ret[pos] = item_list[i];
			}
		}
		var tmp = [];
		for(var i=0,len=ret.length;i<len;i+=colcount){
			var row = Math.ceil((i/colcount));
			tmp[row] = [];
			for(var ii=0,llen=colcount;ii<llen;ii++){
				tmp[row][ii] = ret[(row)*colcount+ii];
			}
		}
		return tmp;
	},
	render:function(){
		var days = ['周一','周二','周三','周四','周五','周六','周日'];
		var rows = this.make();
		console.log('rows',rows);
		var self = this;
		return (
			<div>
				<div className="cal-row-fluid cal-row-head">
					{days.map(function(d){
						return (<div className="cal-cell1">{d}</div>);
					})}
				</div>
				<div className="cal-month-box">
					{rows.map(function(row){
						return (
							<div className="cal-row-fluid cal-before-eventlist">
								{row.map(function(item){
									return React.createElement(self.props.renderComponent,{data:item});
								})}
							</div>
						);
					})}
				</div>
			</div>
		);
	}
});
module.exports = CalMonth;