0

Estou com uma dúvida de como analisar a quantidade de dias de um mês para um determinado calendário, tenho que montar um "nav" com os dias semanais de cada mês, mas o problema é quando chego no último dia do mês, ele acrescenta para 32,33,34... gostaria de alguma dica para poder validar por mês.

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

Navegação mês Julho:

inserir a descrição da imagem aqui

Navegação próxima semana:

inserir a descrição da imagem aqui

É aqui onde tenho que validar o próximo mês...

1 Resposta 1

0

Eu fiz um calendário em React que se integra com uma api de feriados.

Para resolver o problema de dias e meses eu utilizei as variáveis dias e meses em forma de vetor:

this.state = {
      days: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
      months: [
        'January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December',
      ],
      weekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      lastMonth: 11,
      month: 0,
      nextMonth: 1,
      year: 0,
      currentMonth: 0,
      currentYear: 0,
      calendar: [
        { id: 'week-1', data: [0, 0, 0, 0, 0, 0, 0] },
        { id: 'week-2', data: [0, 0, 0, 0, 0, 0, 0] },
        { id: 'week-3', data: [0, 0, 0, 0, 0, 0, 0] },
        { id: 'week-4', data: [0, 0, 0, 0, 0, 0, 0] },
        { id: 'week-5', data: [0, 0, 0, 0, 0, 0, 0] },
        { id: 'week-6', data: [0, 0, 0, 0, 0, 0, 0] },
      ],
      holidays: [],
      holiday: '',
    };

Com esses vetores você não precisa ficar se preocupando com esses if e else enormes e o cada mês já tem o seu dia certo.

Caso você queira ver o meu código inteiro, clique nesse link.

Também tenho ele funcionando sem a api de feriados no meu codepen

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .