reworked calendar

src/App.js

@@ -19,6 +19,7 @@ import Reviews from "./components/Reviews"
 import Admin from './components/Admin/Admin'
 import Auth from './containers/auth'
 import Footer from "./components/Footer";
+import Calendar from "./components/Calendar"
 
 export class App extends React.Component {
 
@@ -51,7 +52,7 @@ export class App extends React.Component {
                         <Route exact path="/services" component={Services} />
                         <Route exact path="/doctors/:doctor" component={MoreInfo} />
                         <Route exact path="/services/:service" component={MoreInfo} />
-                        <Route exact path="/reviews" component={Reviews}/>
+                        <Route exact path="/reviews" component={Calendar}/>
                         <Route path="/admin/" component={Admin} />
                         <Route exact path="/appointment/:doctorId" component={Appointment}/>
                         <Route exact path="/auth" component={Auth} />

src/components/Calendar.js

@@ -1,54 +1,69 @@
 import React, {Component} from 'react';
+import moment from "moment";
+import {connect} from 'react-redux'
 
-class Calendar extends Component {
+export class Calendar extends Component {
+    state={
+        current:moment(),
+    };
 
-    componentDidMount() {
 
-    }
     setDate = (e) => {
-        console.log(`${new Date().getFullYear()}-${new Date().getMonth() < 10 ? '0' + new Date().getMonth() : new Date().getMonth()}-${e.target.id < 10 ? '0' + e.target.id : e.target.id}`)
-        document.getElementById('inp_date').value=`${new Date().getFullYear()}-${new Date().getMonth() < 10 ? '0' + new Date().getMonth() : new Date().getMonth()}-${e.target.id < 10 ? '0' + e.target.id : e.target.id}`
-    }
+        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')
+
+    };
 
-    render() {
-        const date = new Date();
-        const start = new Date(2019, 6, 1);
-        const month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-        const currentMonth = [];
-        const week = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс'];
-        for (let x = 1; x <= month[date.getMonth()]; x++) currentMonth.push(x);
-        const startOfMonth = week.indexOf(week.find(el => el === 'чт'));
-        console.log(date.getDate());
 
+    render() {
+        const {doctors}=this.props
+        const {current} = this.state
+        const daysArray = []
+        for (let x=1; x <= current.daysInMonth();x++){
+            daysArray.push(x)
+        }
+        for (let x=1; x < current.startOf('month').weekday();x++){
+            console.log(current.add(x,"days").format('dddd'))
+        }
+        console.log(current.startOf('month').weekday())
         return (
-            <div>
-                <table cols={7}>
-                    <caption><button>{'<'}</button>{start.toLocaleString('ru', {month: 'short'})}<button>{'>'}</button></caption>
-                    <tbody>
-                    <tr>
-                        {week.map(el => (<th key={el}>{el}</th>))}
-                    </tr>
-                    <tr >
-                        {currentMonth.map(el=> (el >startOfMonth && el<=7) ? <td key={el} className='cal__td'><button id={el -  startOfMonth} onClick={this.setDate}>{el -  startOfMonth}</button></td> : el <=7 ? <td key={el}><button id={el} disabled>none</button></td> : null) }
-                    </tr>
-                    <tr >
-                        {currentMonth.map(el=> (el > 7-startOfMonth && el <= 14-startOfMonth)?(<td key={el} className='cal__td'><button id={el} onClick={this.setDate}>{el}</button></td>):null)}
-                    </tr>
-                    <tr >
-                        {currentMonth.map(el=> (el > 14-startOfMonth && el <= 21-startOfMonth)?(<td key={el} className='cal__td' ><button id={el} onClick={this.setDate}>{el}</button></td>):null)}
-                    </tr>
-                    <tr >
-                        {currentMonth.map(el=> (el > 21-startOfMonth && el <= 28-startOfMonth)?(<td key={el} className='cal__td'><button id={el}  onClick={this.setDate}>{el}</button></td>):null)}
-                    </tr>
-                    <tr >
-                        {currentMonth.map(el=> el > 28-startOfMonth?(<td key={el} className='cal__td'><button id={el} onClick={this.setDate}>{el}</button></td>):null)}
-                    </tr>
-                    </tbody>
-                </table>
-                <input type="date" id='inp_date'/>
+            <div style={{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.add(1,"month")})}>{'>'}</button>
+                </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')}
+                            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
+                            }}
+                            onClick={this.setDate}
+                        >
+                            {current.date(el).format('DD')}
+                        </button>
+                    ))}
+                </div>
             </div>
         );
     }
 }
 
-export default Calendar
+const mapStateToProps = state => {
+    return {
+        doctors:state.app.doctors,
+    }
+};
+
+const mapDispatchToProps = {
+};
+
+export default connect (mapStateToProps,mapDispatchToProps)(Calendar)