https://github.com/future-team/rc-calender-show
A component like iphone calender events show.
https://github.com/future-team/rc-calender-show
Last synced: 16 days ago
JSON representation
A component like iphone calender events show.
- Host: GitHub
- URL: https://github.com/future-team/rc-calender-show
- Owner: future-team
- License: mit
- Created: 2016-11-23T09:37:38.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-12T08:13:39.000Z (over 9 years ago)
- Last Synced: 2025-09-18T04:02:05.675Z (10 months ago)
- Language: JavaScript
- Size: 149 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Calender events show
A component like iphone calender events show.
## Usage
Install
```bash
$ npm install rc-calender-show --save
```
Use in react
```javascript
import React, {Component, PropTypes} from 'react'
import ReactDom from 'react/lib/ReactDOM'
import CalenderShow from 'rc-calender-show'
class Demo extends Component {
static propTypes = {
date: PropTypes.object
};
static defaultProps={
date: new Date()
};
constructor(props, context) {
super(props, context)
this.state = {
defaultDate: null,
date: null
}
}
componentWillMount() {}
componentDidMount() {}
componentWillReceiveProps() {}
shouldComponentUpdate() {return true}
dateChanged(date) {
this.setState({
date: date
})
}
weekChanged(weekRange) {
this.setMark(weekRange)
}
renderList() {
const date = this.state.date
return date ? (
这个列表渲染呢的时间为{date.getFullYear()} - {date.getMonth()+1} - {date.getDate()}
) : (出错啦！
)
}
setMark() {
const mark = [
{
date: '2016-11-20',
count: 1
},
{
date: '2016-11-23',
count: 100
},
{
date: '2016-11-26',
count: 10
},
{
date: '2016-11-21',
count: 0
},
{
date: '2016-11-22',
count: 0
}
]
this.setState({
mark: mark
})
}
render() {
return (
{ this.state.date && 你选择的日期是：{this.state.date.getFullYear()},{this.state.date.getMonth()+1},{this.state.date.getDate()}
}
{this.dateChanged(date)}} defaultDate={this.state.defaultDate} setMark={this.state.mark} weekChanged={::this.weekChanged}>
{
this.renderList()
}
)
}
}
ReactDom.render(
, document.getElementById('root')
)
```
the detail please checkout repo and run demo.
```bash
$ git clone https://github.com/future-team/rc-calender-show.git && cd rc-calender-show && npm install && npm run demo
```
## Contribute
Welcome create issue or pull request,:)