Блог

редактировать: я предполагаю, что проблема заключается в правиле класса ‘off’, но пока не может быть решена.

Я пытаюсь исправить компонент календаря vue моей компании. Я этого не делал, просто выполнял обслуживание в системе и обнаружил это странное поведение.

Текущие правила в этом компоненте календаря не позволяют отображать 2021 месяц, пока «первый» (слева) также не будет 2021. Возможно, пустая строка в ноябре может быть связана с IDK . (Я попытался удалить все, что я считал не связанным напрямую с отношением месяцев / лет, но при необходимости я могу отредактировать).

Кто-нибудь может мне помочь, пожалуйста? 🙂

часть 2020 / часть 2021 календарь

весь календарь на 2021 год

 //template

  <tr v-for="(dateRow, index) in calendar(mes)" :key="index">
    <slot name="date-slot" v-for="(date, idx) in dateRow">
      <td
        :class="dayClass(date, mes)"
        @click="dateClick(date)"
        @mouseover="hoverDate(date)"
        :key="`${idx}-${mes}`"
      >
        <p>{{ date.getDate() }}</p>
      </td>
    </slot>
  </tr>
 

 //script

    calendar(index) {
      let add = index - 1;
      let month = this.month   add;
      let year = this.currentMonthDate.getFullYear();
      let firstDay = new Date(year, month - 1, 1);
      let lastMonth = firstDay.getMonth() - 1;
      let daysInLastMonth = new Date(year, month - 1, 0).getDate();
      let dayOfWeek = firstDay.getDay();
      let calendar = [];
      for (let i = 0; i < 6; i  ) {
        calendar[i] = [];
      }
      let startDay = daysInLastMonth - dayOfWeek   1;
      if (startDay > daysInLastMonth) startDay -= 7;
      let curDate = new Date(year, lastMonth, startDay, 12, 0, 0);
      for (
        let i = 0, col = 0, row = 0;
        i < 6 * 7;
        i  , col  , curDate.setDate(curDate.getDate()   1)
      ) {
        if (i > 0 amp;amp; col % 7 === 0) {
          col = 0;
          row  ;
        }
        calendar[row][col] = new Date(curDate.getTime());
      }
      return calendar;
    },


    dayClass(date, index) {
      let add = index - 1;
      let dt = new Date(date);

      dt.setHours(0, 0, 0, 0);

      let start = new Date();
      let end = new Date();

      let in_range = false;
      let index_range_date = 0;

      this.dateRanges.forEach((r, index) => {
        if (r.start amp;amp; r.end) {
          let startAux = new Date(r.start);
          startAux.setHours(0, 0, 0, 0);

          let endAux = new Date(r.end);
          endAux.setHours(0, 0, 0, 0);

          if (dt >= startAux amp;amp; dt <= endAux) {
            in_range = true;
            index_range_date = index;

            start = startAux;
            start.setHours(0, 0, 0, 0);

            end = endAux;
            end.setHours(0, 0, 0, 0);
          }
        }
      });

      let classes = {
        off: dt.getMonth()   1 !== this.month   add,
        weekend: date.getDay() === 6 || date.getDay() === 0,
        today: dt.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0),
        active:
          dt.setHours(0, 0, 0, 0) == new Date(this.start).setHours(0, 0, 0, 0) ||
          dt.setHours(0, 0, 0, 0) == new Date(this.end).setHours(0, 0, 0, 0),
        "start-date": dt.getTime() === start.getTime(),
        "end-date": dt.getTime() === end.getTime()
        // 'disabled': dt <= new Date()
      };

      classes["in-range-"   index_range_date.toString()] = in_range;
      classes["hover-"   this.empty_range.toString()] = true;

      return classes;
    },
    checkYear() {
      if (this.$refs.yearSelect !== document.activeElement) {
        this.$nextTick(() => {
          this.year_text = this.currentMonthDate.getFullYear();
        });
      }
    },