IvanInvanov
@IvanInvanov
Новичок

Как сделать так, чтобы массив чисел в календаре начинался с первой позиции?

Добрый день, подскажите пожалуйста. Я пытаюсь написать календарь и у меня возникла проблема, что все числа месяцов начинаются со вторника, помогите мне сделать, так чтобы они начинались с понедельника. То есть все числа переместить на одну позицию назад.

Так выглядит календарь сейчас:
p0ei2.png

Код календаря:
<template>
  <div class="all">
    <div class="overflow-div">
      <div class="pagination">
        <div @click="prevPage" class="btn-left"><</div> 
        <p>{{ nameOfOneMonth }} {{ year }}</p>
        <div @click="nextPage" class="btn-right">></div> 
      </div>

        <div class="d_nameOfDays">
          <li v-for="day in nameOfDays" class="nameOfDays">{{ day }}</li>
        </div>
        <transition :name="nameOfClass" >
          <div :key="currentPage" class="fade_wrapper">
            <div v-for="(week, i) in getCalendar" class="d_day">
            <li v-for="day in week" class="li_day">
            <div class="day">{{ day }}</div>
              </li>
            </div>
          </div>
        </transition>
    </div>
  </div> 
</template>

<script>
  import json from './Calendar_data.json'
export default {
  data(){
    return{
      currentPage: 0,
      namesOfMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      nameOfOneMonth: '',
      nameOfDays: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
      date: new Date(),
      isActive: true,
      year: '',
      nameOfClass: '',
      eventsData: json
    }
  },
  computed: {
    getCalendar(){
      return this.buildCalendar();
    }
  },
  mounted(){
    this.year = this.date.getFullYear();
    this.currentPage = this.date.getMonth();
    this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
  },
  methods: {
    prevPage(){
      if (this.currentPage === 0) {
        this.currentPage = 12;
        this.year--;
      }
      this.nameOfClass = 'prev';
      this.currentPage--;
      this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
    },
    nextPage(){
      if (this.currentPage === 11) {
        this.currentPage = -1;
        this.year++;
      }
      this.nameOfClass = 'next';
      this.currentPage++;
      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();
    },
    buildCalendar(){
      let arrOfEvents = this.eventsData.events;
      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][daysInMonth] = [];
          massOfMonth[months][daysInMonth].push(daysInMonth)
          for(let z = 0; z < arrOfEvents.length; z++){
            let d = arrOfEvents[z].starts_at;
            let v = new Date(d);
            let memo = arrOfEvents[z].memo;
            if(daysInMonth == v.getDate()){
              massOfMonth[months][daysInMonth].push(memo)
            };
          }
        }
      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>
  • Вопрос задан
  • 113 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Azperin
Дилетант
Беглым взглядом могу предложить заменить let daysInMonth = 1 на 0
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы