const {
Button,
ButtonGroup,
} = Reactstrap;
}
componentDidMount(){
//총 42칸 제작 = 7*6
//달 시작
//
console.log(new Date( this.year , this.today.getMonth() ,
1).toLocaleDateString())
//달 끝
//
console.log(new Date( this.year , this.today.getMonth()+1 ,
0).toLocaleDateString())
//토요일=6
}
componentWillUnmount()
{
}
_prevMonth = () => {
let dt = new Date(this.state.now)
dt.setMonth(dt.getMonth() - 1)
this.setState({
now : dt
})
}
_today = () => {
this.setState({
now : new Date()
})
}
_nextMonth = () => {
let dt = new Date(this.state.now)
dt.setMonth(dt.getMonth() + 1)
this.setState({
now : dt
})
}
_getFirstDate =(today) => {
return new Date( today.getFullYear() ,today.getMonth() , 1)
}
_getLastDate =(today) => {
return new Date( today.getFullYear() ,today.getMonth()+1 , 0)
}
_getDayOfWeek=(day) =>{
return this.days[day.getDay()]
}
_getPrevDay = (date) =>{
let target = new Date(date)
let dayNumber = new Date(date).getDay()
target.setDate(target.getDate()-dayNumber)
return target
}
_getDateformat = (date) =>{
return { yyyy : date.getFullYear(),
MM : date.getMonth()+1,
dd : date.getDate()
}
}
_getDayArray = () =>{
let arr = []
let firstDay = this._getFirstDate(this.state.now)
let preDay = this._getPrevDay(firstDay)
for(let i = 0 ; i < 42 ; i++){
let pushDate = new Date(preDay)
arr.push(this._setData(pushDate))
preDay.setDate(preDay.getDate()+1)
}
return arr
}
_setData = (date) =>{
return {
date : date,
dayOfWeek : this.days[date.getDay()],
isMonth : date.getMonth() == this.state.now.getMonth() ? true : false ,
isToday : date.toLocaleDateString()
== new Date().toLocaleDateString() ?
true : false
}
}
_getCalendar = () =>{
let list = this._getDayArray()
return list.map( (value , index) => {
return <Day
key={index}
day={value.date.getDate()}
month={value.date.getMonth()+1}
year={value.date.getMonth()}
dayOfWeek={value.dayOfWeek}
isMonth={value.isMonth}
isToday={value.isToday}
></Day>
})
}
_displayHeaderDate =
() =>{
let dt = this.state.now
return dt.getFullYear()+'년 '+ parseInt(dt.getMonth()+1) +'월'
}
render() {
return (
<div className="outer">
<div className="header">
<h1>{this._displayHeaderDate()}</h1>
<div className="btnGroup" >
<ButtonGroup >
<Button onClick={this._prevMonth} ><</Button>
<Button onClick={this._today} >Today</Button>
<Button onClick={this._nextMonth} >></Button>
</ButtonGroup>
{/* <button
onClick={this._prevMonth}><</button>
<button
onClick={this._today}>Today</button>
<button
onClick={this._nextMonth}>></button> */}
</div>
</div>
<div className="main">
{this.state.now ? this._getCalendar() : '로딩'}
</div>
</div>
)
}
}