0
I’m having a question of how to analyze the amount of days a month for a certain calendar, I have to set up a "Nav" with the weekly days of each month, but the problem is when I arrive on the last day of the month, it adds to 32,33.34... would like some hint to be able to validate per month.
import React, { Component } from 'react'
import './index.css'
import Icon from './../icone/'
const diaAtual = new Date()
const last = first + 6
const segunda = new Date(diaAtual.setDate(first + 1))
const quarta = new Date(diaAtual.setDate(first + 3));
const sexta = new Date(diaAtual.setDate(last - 1));
class BarraNavegacao extends Component {
constructor(props) {
super(props);
this.state = {
segunda: segunda.getDate(),
quarta: quarta,
sextaDia: sexta.getDate(),
sextaAno: sexta.getFullYear(),
getMonth: ''
}
}
componentWillMount(){
this.returnMonth(sexta.getMonth())
}
acao = (event) => {
const target = event.currentTarget;
const targetID = target.id;
if (targetID === 'arrowLeft') {
const diaProximo = this.state.segunda - 6
const diaFinal = diaProximo + 6
this.setState({
segunda: diaProximo - 1,
sextaDia: diaFinal - 3
})
} else {
const diaProximo = this.state.segunda + 6
const diaFinal = diaProximo + 6
this.setState({
segunda: diaProximo + 1,
sextaDia: diaFinal - 1
})
}
}
returnMonth(mes){
if (mes === 0) {
this.setState({getMonth: "Janeiro"})
} else if (mes === 1) {
this.setState({getMonth: "Fevereiro"})
} else if (mes === 2) {
this.setState({getMonth: "Março"})
} else if (mes === 3) {
this.setState({getMonth: "Abril"})
} else if (mes === 4) {
this.setState({getMonth: "Maio"})
} else if (mes === 5) {
this.setState({getMonth: "Junho"})
} else if (mes === 6) {
this.setState({getMonth: "Julho"})
} else if (mes === 7) {
this.setState({getMonth: "Agosto"})
} else if (mes === 8) {
this.setState({getMonth: "Setembro"})
} else if (mes === 9) {
this.setState({getMonth: "Outubro"})
} else if (mes === 10) {
this.setState({getMonth: "Novembro"})
} else if (mes === 11) {
this.setState({getMonth: "Dezembro"})
}
}
render() {
return (
<nav className="secondBar">
<div className="navBarLeft">
<div id="arrowLeft" onClick={this.acao}>
<Icon style='material-icons cheLeft'>chevron_left</Icon>
</div>
<a href="#"className="weekDate">
<span>{this.state.segunda} - </span>
<span>{`${this.state.sextaDia} de ${this.state.getMonth} de ${this.state.sextaAno}`}</span></a>
<div id="arrowRight" onClick={this.acao}>
<Icon style='material-icons cheRight'>chevron_right</Icon>
</div>
</div>
<div className="navBarRight">
<div className="cardSession">
<Icon style='material-icons lensDis'>lens</Icon>
<span className="status">disponivel</span>
</div>
<div className="cardSession">
<Icon style='material-icons lensInd'>lens</Icon>
<span className="status">indisponivel</span>
</div>
<div className="cardSession">
<Icon style='material-icons lensPro'>lens</Icon>
<span className="status">próxima sessão</span>
</div>
<div className="cardSession">
<Icon style='material-icons lensEnc'>lens</Icon>
<span className="status">sessão encerrada</span>
</div>
</div>
</nav>
)
}
}
export default BarraNavegacao
Navigation month July:
Navigation next week:
This is where I have to validate next month...
Oops, vlw! Very useful.
– Marquin Ferreira
Not at all ;) Needing
– Alessander França