Why are not all events from the JSON file displayed, but only some?

Question

JavaScript

Good afternoon, please tell me why I do not display all the events in the day in which there is more than one of them. I suspect that this is due to the fact that my buildEvent() is not a computed property, but a method. But how to remake a calculated property from a method, I cannot understand, because I will need to pass parameters.
Problem example: There is a day on the screenshot (the 18th), two events 'Call with Kyiv' and 'Bike ride' should be shown there, but only the first event is shown.

Full code on Github

<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"
                v-bind:class="{   'currentDay': currentDayOnCalendar(i, day), }" >  
              <div class="day" 
                   v-bind:class="{  'grey': isAnotherMonth(i, day),
                                    'red': weekEndDayFunction(i, day) }">{{ day }}</div>
              <span v-for="event in buildEvents(i, day)" class="event">{{ event }}</span>
            </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: {
    isAnotherMonth(weekIndex, dayNumber) {
      if(weekIndex === 0 && dayNumber > 15) {
        // первая неделе и номер дня > 15
        return true
      }
      if (weekIndex === 4 && dayNumber < 15) {
        // последняя неделя и номер дня < 15
        return true
      }
      if (weekIndex === 5 && dayNumber < 15) {
        // последняя неделя и номер дня < 15
        return true
      }
      // день принадлежит текущему месяцу
      return false
    },
    buildEvents(weekIndex, dayNumber){
      let arrOfEvents = this.eventsData.events;
      for(let z = 0; z < arrOfEvents.length; z++){
        let dataStartOfEvent = arrOfEvents[z].starts_at;
        let getStartDataOfEvent = new Date(dataStartOfEvent);
        let dataEndOfEvent = arrOfEvents[z].ends_at;
        let getEndDataOfEvent = new Date(dataEndOfEvent);
        let memo = arrOfEvents[z].memo;
        if(getStartDataOfEvent.getDate() == getEndDataOfEvent.getDate()){
          if(dayNumber == getStartDataOfEvent.getDate() &&
            this.currentPage == getStartDataOfEvent.getMonth() &&
            this.year == getStartDataOfEvent.getFullYear() &&
            !this.isAnotherMonth(weekIndex, dayNumber)){
              return memo;
          }
        }else if(getStartDataOfEvent.getDate() != getEndDataOfEvent.getDate() &&
            !this.isAnotherMonth(weekIndex, dayNumber)){
          for(let b = getStartDataOfEvent.getDate(); b <= this.getLastDayOfMonth(getStartDataOfEvent.getMonth()); b++){
            if(dayNumber === b &&
            this.currentPage == getStartDataOfEvent.getMonth() &&
            this.year == getStartDataOfEvent.getFullYear()){
              return memo;
            }
          }
          for(let b = 0; b < getEndDataOfEvent.getDate(); b++){
            if(dayNumber === b &&
            this.currentPage == getEndDataOfEvent.getMonth() &&
            this.year == getEndDataOfEvent.getFullYear()){
               return memo
            }
          }
        }
      }
    },
    buildCalendar(){
      let massOfMonth = [];
      for (let months = 0; months < 12; months++){
        massOfMonth.push(months);
        massOfMonth[months] = [];
        for ( let daysInMonth = 0; daysInMonth < this.getLastDayOfMonth(months); daysInMonth++){
          massOfMonth[months].push(daysInMonth + 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>

Answer 1

Because exit the function as soon as the first event is found.
Do you even understand what he is doing return?
I'm sure you can write everything shorter than three times what it is now, but disassembling your code ... It's unlikely that anyone here will be able to do this, just make it work as expected. Add a label before the outer loop, and declare an array in which you will add events. It should become like this:

const events = [];

collectEvents:
for(let z = 0; z < arrOfEvents.length; z++){

return memoReplace everything with

events.push(memo);
continue collectEvents;

After the outer loop add return events;.