|
@@ -9,8 +9,6 @@ export class Calendar extends Component {
|
|
|
|
|
|
|
|
|
setDate = (e) => {
|
|
|
- console.log(moment().format('YYYY-MM-DD') === moment(24).format('YYYY-MM-DD'))
|
|
|
- console.log(moment().format('YYYY-MM-DD'))
|
|
|
console.log(moment(e.target.id).format('YYYY-MM-DD'))
|
|
|
// console.log(this.props.doctors[0].shedule.find(el => el.data === e.target.id) ? this.props.doctors[0].shedule.find(el => el.data === e.target.id)._id : 'No such shedule')
|
|
|
|
|
@@ -18,37 +16,54 @@ export class Calendar extends Component {
|
|
|
|
|
|
|
|
|
render() {
|
|
|
+ moment.locale('ru', {
|
|
|
+ week : {
|
|
|
+ dow:1
|
|
|
+ }
|
|
|
+ });
|
|
|
const {doctors}=this.props
|
|
|
const {current} = this.state
|
|
|
const daysArray = []
|
|
|
for (let x=1; x <= current.daysInMonth();x++){
|
|
|
- daysArray.push(x)
|
|
|
+ daysArray.push(current.date(x).format('YYYY-MM-DD'))
|
|
|
}
|
|
|
- for (let x=1; x < current.startOf('month').weekday();x++){
|
|
|
- console.log(current.add(x,"days").format('dddd'))
|
|
|
+ const prevMonth = moment(current).subtract(1,'months')
|
|
|
+ const startDay = current.startOf('month').day() === 0 ? 7 : current.startOf('month').day()
|
|
|
+ for (let x=1; x < startDay ;x++){
|
|
|
+ daysArray.unshift(prevMonth.endOf('month').subtract(x-1,'days').format('YYYY-MM-DD'))
|
|
|
}
|
|
|
- console.log(current.startOf('month').weekday())
|
|
|
return (
|
|
|
- <div style={{margin:"100px 20px"}}>
|
|
|
+ <div style={{display:'flex',flexDirection:'column',margin:"100px 20px"}}>
|
|
|
<div style={{display:'flex',margin:'20px'}}>
|
|
|
- <button onClick={() => this.setState({current:current.add(-1,"month")})}>{'<'}</button>
|
|
|
- <h3>{moment(current).format('MMMM-YYYY')}</h3>
|
|
|
+ <button onClick={() => this.setState({current:current.subtract(1,"month")})}>{'<'}</button>
|
|
|
+ <h3>{current.format('MMMM-YYYY')}</h3>
|
|
|
<button onClick={() => this.setState({current:current.add(1,"month")})}>{'>'}</button>
|
|
|
</div>
|
|
|
+ <div style={{display:'flex',}}>
|
|
|
+ {moment.weekdays(true).map(el => (
|
|
|
+ <p key={el} style={{margin:'0 20px'}}>{el}</p>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
<div style={{display:'flex',flexWrap:'wrap',maxWidth:'700px',margin:'5px'}}>
|
|
|
+
|
|
|
{daysArray.map(el => (
|
|
|
<button
|
|
|
key={el}
|
|
|
- id={current.date(el).format('YYYY-MM-DD')}
|
|
|
+ id={el}
|
|
|
+ disabled={
|
|
|
+ moment(el).format('YYYY-MM-DD') < moment().format('YYYY-MM-DD')
|
|
|
+ || (moment(el).day()===6)
|
|
|
+ || (moment(el).day()===0)
|
|
|
+ }
|
|
|
style={{
|
|
|
height:'100px',
|
|
|
width:'100px',
|
|
|
- backgroundColor:doctors[0] ? doctors[0].shedule.find(el => el.data === current.date(el).format('YYYY-MM-DD')) ? "lightgreen" : "coral" : null,
|
|
|
- border:moment().format('YYYY-MM-DD') === current.date(el).format('YYYY-MM-DD') ? "3px solid black" : null
|
|
|
+ backgroundColor:doctors[0] ? doctors[0].shedule.find(item => item.data === el) ? "lightgreen" : "coral" : null,
|
|
|
+ border:moment().format('YYYY-MM-DD') === moment(el).format('YYYY-MM-DD') ? "3px solid black" : null
|
|
|
}}
|
|
|
onClick={this.setDate}
|
|
|
>
|
|
|
- {current.date(el).format('DD')}
|
|
|
+ {moment(el).format('DD')}
|
|
|
</button>
|
|
|
))}
|
|
|
</div>
|