I
I
Ivan Ivanov2019-07-16 11:48:18
JavaScript
Ivan Ivanov, 2019-07-16 11:48:18

How to fix a bug in the calendar?

Good afternoon, I made a calendar that only works well in 2019. I tried to redo it for all years starting from the current year, but nothing works for me, please tell me what I'm doing wrong.
When the current year ends, this error appears: 5d2d8f987a5eb486748860.png
My code on GitHub
My code:

<template>
  <div>
    <div class="pagination">
      <button @click="prevPage"
            :disabled="currentPage === 0"
            >Pref</button> 
      <p>{{ currentPage }} {{ nameOfOneMonth }} {{ year }}</p>
      <button @click="nextPage"
            >Next</button> 
    </div>

    <div class="calendar">
        <div class="nameOfDays"><li v-for="days in nameOfDays">{{ days }}</li></div>
        <div v-for="(monthInCalendar, index) in getCalendar" :key = "index" class="month">
        {{ monthInCalendar }}</div>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
      currentPage: 0,
      namesOfMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      nameOfOneMonth: 'January',
      nameOfDays: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
      date: new Date(),
      year: ''
    }
  },
  computed: {
    getCalendar(){
      return this.buildCalendar();
    }
  },
  mounted(){
    this.year = this.date.getFullYear();
  },
  methods: {
    prevPage(){
      this.currentPage--;
      if(this.currentPage % 11 == 0){
        this.currentPage == 11;
        this.year--;
      }
      this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
    },
    nextPage(){
      this.currentPage++;
      if(this.currentPage+1 % 11 == 0){
        this.currentPage == 0;
        this.year++; 
      }
      this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
    },
    getYear(){
      this.year = this.date.getFullYear();
    },
    getLastDayOfMonth(month) { // нахождение числа последнего дня в месяце
      let dateDaysInMonth = new Date(this.year, month + 1, 0);
      return dateDaysInMonth.getDate();
    },
    getNumberOfFirstDayInMonth(month){ //нахождение номера первого дня в месяце
      let dateFirstDayInMonth = new Date(this.year, month, 1);
      return dateFirstDayInMonth.getDay();
    },
    buildCalendar(){
      let massOfMonth = [];
      for (let months = 0; months < 12; months++){
        massOfMonth.push(months);
        massOfMonth[months] = [];
        for ( let daysInMonth = 1; daysInMonth <= this.getLastDayOfMonth(months); daysInMonth++){
          massOfMonth[months].push(daysInMonth);
        }
        // Заполняем начало каждого месяца числами из прошлого месяца
        if(this.getNumberOfFirstDayInMonth(months) > 0){
          let t = this.getLastDayOfMonth(months-1) + 1;
          for(let b = 0; b <= this.getNumberOfFirstDayInMonth(months) - 2; b++){
            t--;
            massOfMonth[months].unshift(t)
          }
        }else if(this.getNumberOfFirstDayInMonth(months) === 0){
          let u = this.getLastDayOfMonth(months-1) + 1;
          for(let nulldays = 0; nulldays <= 5; nulldays++){
            u--;
            massOfMonth[months].unshift(u);
          }
        }
        //Заполняем конец каждого месяца числами из будущего месяца
        if(this.getNumberOfFirstDayInMonth(months + 1) > 1){
          let i = 0;
          for(let q = this.getNumberOfFirstDayInMonth(months + 1); q <= 7; q++){
            i++;
            massOfMonth[months].push(i);
          }
        } else if(this.getNumberOfFirstDayInMonth(months + 1) === 0){
          massOfMonth[months].push(1);
        }
      }

      // разбиение большого массива месяц на 
      // меньшие массивы которые имеют по 7 элементов
      var longArray = massOfMonth[this.currentPage];
      var size = 7;
      
      var newArray = new Array(Math.ceil(longArray.length / size)).fill("")
          .map(function() { 
            return this.splice(0, size) 
          }, longArray.slice());
       //--------------------------------------------------   
        return newArray; // вывод самого календаря
    }
  }
};
</script>

<style>
  .month{
    list-style-type: none;
    width: 180px;
    border: 1px solid black;
    display: flex;
    justify-content: space-between;
  }
  .pagination, .nameOfDays{
    display: flex;
  }
  .nameOfDays{
    width: 180px;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
  }
</style>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2019-07-16
@IvanInvanov

:disabled="currentPage === 0"

Well, what's the point in that? 0 is January, what, you can't switch to the previous year? Remove.
Yah? So you will switch from February to December. Check that the current month number is less than zero.
And it also doesn't work the way you think. Firstly, in order to get a zero remainder from the division, currentPage must be equal to 10, i.e., after October, you will have January. And secondly - operator precedence, google what it is. In reality, the remainder of dividing one by eleven is calculated here, and not the sum, i.e. (given that currentPage must not be negative) the condition will never be true. Check that the number of the current month is greater than the maximum (December, 11).
One is unable to distinguish between assignment and comparison operators.
Yes, you are doing everything right - without knowing the language, you are trying to master the framework.
This is the path to success.
Нет, это отличный способ стать говнокодером.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question