33 calendar logoc change success / カレンダーロジックを変更

[hasyrails]

要改善点

日付が同じ日に重複して予定が表示されてしまう 8/1の予定が9/1にも表示されてしまう

→予定表示のロジックを修正し改善する

[hasyrails]

なぜ重複表示が起こるのか

カレンダーの表示ロジックは下記参考 本当にこれだけ？JavaScript+vue.jsでカレンダー作成

getCalendar() {
    let startDate = this.getStartDate();
    const endDate = this.getEndDate();
    const weekNumber = Math.ceil(endDate.diff(startDate, "days") / 7);

    let calendars = [];
    for (let week = 0; week < weekNumber; week++) {
    let weekRow = [];
    for (let day = 0; day < 7; day++) {
        weekRow.push({
        date: startDate.get("date"),
        });
        startDate.add(1, "days");
    }
    calendars.push(weekRow);
    }
    return calendars;
},

この時、calendarsArrayは

calendars = [Arr(0),Arr(1),‥]
Arr(0) = [{date: 30},{date: 31},{date: 1},{date: 2},{date: 3},{date: 4},{date: 5}]
‥
Arr(5)=[‥{date:1},{date:2}]

の形。 keyがdateしかない

日付の数字のみで予定表示ロジックを組んでいるので、重複表示が起こる

<Schedule 
:devidedSchedule="devidedSchedule"
v-for="devidedSchedule in devidedSchedules"
v-if="devidedSchedule.date==day.date>
</Schedule>

改善するには

表示条件に年・月の一致を追加すれば良い

[hasyrails]

配列calendar内のオブジェクトに年・月の情報も追加

getCalendar() {
    let startDate = this.getStartDate();
    const endDate = this.getEndDate();
    const weekNumber = Math.ceil(endDate.diff(startDate, "days") / 7);

    let calendars = [];
    for (let week = 0; week < weekNumber; week++) {
    let weekRow = [];
    for (let day = 0; day < 7; day++) {
        weekRow.push({
        + year: startDate.get("year"),  // 追加
        + month: startDate.get("month"),  // 追加
        date: startDate.get("date"),
        });
        startDate.add(1, "days");
    }
    calendars.push(weekRow);
    }
    return calendars;
},

devidedScheduleにも年・月の情報を追加

devidedSchedules.push({
  title: this.schedules[m].title,
  color: this.schedules[m].color,
  icon: this.schedules[m].icon,
  commit: this.schedules[m].commit,
  yyyymm: moment(dateArrays[m][n]).format('YYYY/MM'),
+  year: moment(dateArrays[m][n]).year(),  // 追加
+  month: moment(dateArrays[m][n]).month(),  // 追加
  date: moment(dateArrays[m][n]).date(),
});

予定表示の条件を変更

<Schedule 
  :devidedSchedule="devidedSchedule"
  v-for="devidedSchedule in devidedSchedules"
  v-if="devidedSchedule.date==day.date&&devidedSchedule.month==day.month
  &&devidedSchedule.year==day.year"
>
</Schedule>

年・月の一致も条件に追加

[hasyrails]

表示機能を正しく実装成功

8/1の予定が9/1の予定として表示されるようなことはなくなった。

今月の日付と来月の日付を色で区別したい。