I
I
Ivan Ivanov2019-07-31 16:43:23
JavaScript
Ivan Ivanov, 2019-07-31 16:43:23

How can I make the array of numbers in the calendar start from the first position?

Good afternoon, tell me please. I'm trying to write a calendar and I'm having a problem that all the numbers of the months start on Tuesday, please help me to make them start on Monday. That is, move all numbers one position back.
This is what the calendar looks like now:
p0ei2.png
Calendar code:

<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>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexey, 2019-07-31
@Azperin

With a quick glance, I can suggest replacing let daysInMonth = 1 with 0

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question