Mount calendar with React

Asked

Viewed 1,644 times

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:

inserir a descrição da imagem aqui

Navigation next week:

inserir a descrição da imagem aqui

This is where I have to validate next month...

1 answer

0


I made a calendar in React that integrates with a holiday api.

To solve the problem of days and months I used the variable days and months in vector form:

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: '',
    };

With these vectors you don’t have to worry about those huge if and Else and each month already has its right day.

If you want to see my entire code, click on this link.

I also have it running without the holiday api in my codepen

Browser other questions tagged

You are not signed in. Login or sign up in order to post.