import React, {Component} from 'react';
import moment from 'moment';
import WeekCalendar from './weekCalendar';
class App extends Component {
constructor(props) {
super(props)
this.state = {
data: moment(),
weekViewMode: false,
isModalOpen: false,
notes: [{
date: '',
events: [{
name: '',
body: '',
time: ''
}]
}]
}
}
nextMonth = () => {
this.setState({
date: this.state.data.add(1, 'months')
})
}
prevMonth = () => {
this.setState({
date: this.state.data.subtract(1, 'months')
})
}
weekMode = () => {
this.setState({
weekViewMode: true
})
}
monthMode = () => {
this.setState({
weekViewMode: false
})
}
openModal = () => {
this.setState({
isModalOpen: true
})
}
closeModal = () => {
this.setState({
isModalOpen: false
})
}
res = ''
data = {}
nameHandleChange = (e) => {
this.data.name = e.target.value
}
bodyHandleChange = (e) => {
this.data.body = e.target.value
}
timeHandleChange = (e) => {
this.data.time = e.target.value
}
getDate = (date) => {
this.openModal()
this.res = moment(date).format('DD MM YYYY')
console.log(this.state)
}
makeNote = (date, data) => {
this.setState({
date: date,
notes: {...data}
})
console.log(this.state)
// this.closeModal()
}
render() {
const startWeek = this.state.data.startOf('month').week();
const endWeek = this.state.data.endOf('month').week();
let calendar = []
for (let week = startWeek; week < endWeek; week++) {
calendar.push({
week: week,
days: Array(7).fill(0).map((n, i) => moment().week(week).startOf('week').clone().add(n + i, 'day'))
})
}
return (
<div>
{this.state.isModalOpen ?
<div>
<label>name</label>
<input onChange={this.nameHandleChange}/>
<label>body</label>
<input onChange={this.bodyHandleChange}/>
<label>time</label>
<input type="time" onChange={this.timeHandleChange}/>
<button onClick={() => this.makeNote(this.res, this.data)}>Create</button>
</div> : null}
<button onClick={this.prevMonth}>prev</button>
<button onClick={this.nextMonth}>next</button>
<button onClick={this.weekMode}>week mode</button>
<button onClick={this.monthMode}>month mode</button>
<table style={{Border: "1px solid red "}}>
<td>S</td>
<td>M</td>
<td>T</td>
<td>W</td>
<td>T</td>
<td>F</td>
<td>S</td>
{this.state.weekViewMode ? <WeekCalendar/> :
calendar.map((week, weekIndex) => (
<tr key={weekIndex}>
{/*{week.week}*/}
{week.days.map((day, dayIndex) =>
<td onClick={() => this.getDate(day)} key={dayIndex}>{day.date()}</td>)}
</tr>))}
</table>
</div>
);
}
}
export default App;