FrontEnd/src/components/Days.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

import React, { Component } from 'react';

class Days extends Component {
  //Get the amount of days in a particular month
  amountDays(year, month) {
    return new Date(year, month + 1, 0).getDate();
  }

  firstDayInMonth(year, month) {
    return new Date(year,month+1,-1).getDay();
  }

  render() {
    var amountDays = this.amountDays(this.props.year, this.props.month);
    var firstDayInMonth = this.firstDayInMonth(this.props.year, this.props.month);
    var day = 1;
    var allDays = []; //Final array to push
    for (var i = 0; i < 6; i++) {
      var weeksArray = [];
      for (var j = 0; j < 7; j++) {
        if ((i === 0 && j < firstDayInMonth) || day > amountDays) {
          weeksArray.push(<div className="day-box"> </div>); //Empty box
        } else {
          if (this.props.selectedDay === day && this.props.month === this.props.selectedMonth && this.props.year === this.props.selectedYear) {
            weeksArray.push(<div key={day} onClick={this.props.actionselectdate.bind(this, day)} id="selected-day" className="day-box beautiful-day noselect" >{day}</div>);
            day++;
          } else {
            weeksArray.push(<div key={day} onClick={this.props.actionselectdate.bind(this, day)} className="day-box beautiful-day noselect" >{day}</div>);
            day++;
          }
        }
      }
      allDays.push(<div>{weeksArray}</div>);
    }

    return (
      <div>
      <div id="day-zone">{allDays}</div>
      </div>
    );
  }
}

export default Days;