popbean-react
Version:
let me think about something,comming soon...
66 lines • 2.19 kB
JSX
var React = require('react');
var CalWeek = React.createClass({
getDefaultProps:function(){
return {
events:[]
};
},
render:function(){
//FIXME 需要根据所在周核算出从[]
var heads = [
{"title":'周一','code':'06-11'},
{"title":'周二','code':'06-11'},
{"title":'周三','code':'06-11'},
{"title":'周四','code':'06-11'},
{"title":'周五','code':'06-11'},
{"title":'周六','code':'06-11'},
{"title":'周日','code':'06-11'}
];
return(
<div className="cal-week-box">
<div className="cal-offset1 cal-column"></div>
<div className="cal-offset2 cal-column"></div>
<div className="cal-offset3 cal-column"></div>
<div className="cal-offset4 cal-column"></div>
<div className="cal-offset5 cal-column"></div>
<div className="cal-offset6 cal-column"></div>
<div className="cal-row-fluid cal-row-head">
{heads.map(function(head){
return (
<div className="cal-cell1">{head.title}<br/>
<small><span>{head.code}</span></small>
</div>
);
})}
</div>
<div className="cal-row-fluid">
<div className="cal-cell4 cal-offset1 day-highlight dh-event-warning" data-event-class="event-warning">
<a href="#" className="cal-event-week">This is warning class event with very long title to check how it fits to evet in day view</a>
</div>
</div>
<div className="cal-row-fluid">
<div className="cal-cell4 cal-offset1 day-highlight dh-event-warning" data-event-class="event-warning">
<a href="#" className="cal-event-week">This is warning class event with very long title to check how it fits to evet in day view</a>
</div>
</div>
{this.props.events.map(function(event){
return (
<div className="cal-row-fluid">
<div className="cal-cell4 cal-offset1">
<a href="#" className="cal-event-week">{event.memo}</a>
</div>
</div>
);
})}
</div>
);
}
});
module.exports = CalWeek;
/* cal-cell4代表连续4天
<div className="cal-row-fluid">
<div className="cal-cell4 cal-offset1">
<a href="#" className="cal-event-week">{event.memo}</a>
</div>
</div>
*/