08 modify calendar date / 表示されている日付を修正

[hasyrails]

来月であるはずの日付が今月になっている

<div 
          v-for="devidedSchedule in devidedSchedules"
          v-if="devidedSchedule.date==day.date&&devidedSchedule.yyyymm==currentDate">
            {{devidedSchedule.title}}
          </div>

v-ifを所望機能に反映するためには カレンダーの日付の実装を修正要

[hasyrails]

修正方針

~~JavaScriptでカレンダーを自作したら勉強になった ~~

Date使用の実装　→ Moment.jsで書き換え

カレンダーロジックは変更なしのまま進める

[hasyrails]

実装案

Calendarsの構造は

[[],[],[],[],[]]

要素の配列を全て結合して重複を削除する →削除してからカレンダーに再配置‥

【JavaScript】Arrayの重複を排除する最もシンプルな方法

→他の方針で実装

[hasyrails]

オブジェクトの比較

if (calendars[0][0] != {date:moment(this.currentDate).startOf("month").date()}){
        calendars[0].splice(0,1);
        calendars[0].splice(0,0,'');
      }

ifの判定が 等しいはずの月の初日でもfalseとなって削除されてしまう？？

JSON.stringify()　を使う

JavaScriptでのObject比較方法

[hasyrails]

先月分の末日として表示されている日付を消去する処理

weekRow１列目（cakendars[0]）　に対する処理ハードコーディング

if (JSON.stringify(calendars[0][0]) != JSON.stringify({date:moment(this.currentDate).startOf("month").date()})){
        calendars[0].splice(0,1);
        calendars[0].splice(0,0,'');
      }
      if (JSON.stringify(calendars[0][1]) != JSON.stringify({date:moment(this.currentDate).startOf("month").date()})){
        calendars[0].splice(1,1);
        calendars[0].splice(1,0,'');
      }
      if (JSON.stringify(calendars[0][2]) != JSON.stringify({date:moment(this.currentDate).startOf("month").date()})){
        calendars[0].splice(2,1);
        calendars[0].splice(2,0,'');
      }

この処理をwhileで実装する

調査

[while 条件を満たしたらstop]で検索 break文

検索結果がJavaだったため js記述に修正 for - JavaScript - MDN Web Docs - Mozilla

実装成功

for (let s = 0; s <= 6; s++){
        if(JSON.stringify(calendars[0][s]) != JSON.stringify({date:moment(this.currentDate).startOf("month").date()})){
          calendars[0].splice(s,1);
          calendars[0].splice(s,0,'');
        }
        else{
          break;
        }
      }

[hasyrails]

次月の日付として表示されている日付を消去

while文が良さそう

while文の場合は、まず条件式を評価し、その条件式が見合ってはじめて、繰り返し処理を始めます。

ハードコーディング

if (JSON.stringify(calendars[4][0]) == JSON.stringify({date:moment(this.currentDate).startOf("month").date()})){
        // 条件を満たさないので何もしない
      }
      if (JSON.stringify(calendars[4][1]) == JSON.stringify({date:moment(this.currentDate).startOf("month").date()})){
        // 条件を満たさないので何もしない
      }
      if (JSON.stringify(calendars[4][2]) == JSON.stringify({date:moment(this.currentDate).startOf("month").date()})){
        // 条件を満たさないので何もしない
      }
      if (JSON.stringify(calendars[4][3]) == JSON.stringify({date:moment(this.currentDate).startOf("month").date()})){
        // 条件を満たさないので何もしない
      }
      if (JSON.stringify(calendars[4][4]) == JSON.stringify({date:moment(this.currentDate).startOf("month").date()})){
        calendars[4].splice(4,1);
        calendars[4].splice(4,0,'');
      }
      if (JSON.stringify(calendars[4][5]) == JSON.stringify({date:moment(this.currentDate).startOf("month").date()+1})){
        calendars[4].splice(5,1);
        calendars[4].splice(5,0,'');
      }
      if (JSON.stringify(calendars[4][6]) == JSON.stringify({date:moment(this.currentDate).startOf("month").date()+2})){
        calendars[4].splice(6,1);
        calendars[4].splice(6,0,'');
      }

whileで実装

for (let s=0; s<=6; s++){
        while(JSON.stringify(calendars[4][0]) == JSON.stringify({date:moment(this.currentDate).startOf("month").date()})){

        }
      }

?となったので実装変更

[hasyrails]

実装成功

for(let s=0; s<=6; s++){
        let finalWeek = JSON.stringify(calendars[4][s]);

        switch(finalWeek){
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()}):
            calendars[4].splice(s,1);
            calendars[4].splice(s,0,'');
            break;
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()+1}):
            calendars[4].splice(s,1);
            calendars[4].splice(s,0,'');
            break;
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()+2}):
            calendars[4].splice(s,1);
            calendars[4].splice(s,0,'');
            break;
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()+3}):
            calendars[4].splice(s,1);
            calendars[4].splice(s,0,'');
            break;
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()+4}):
            calendars[4].splice(s,1);
            calendars[4].splice(s,0,'');
            break;
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()+5}):
            calendars[4].splice(s,1);
            calendars[4].splice(s,0,'');
            break;
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()+6}):
            calendars[4].splice(s,1);
            calendars[4].splice(s,0,'');
            break;
        }
      }

週が５列ある時も実装する

[hasyrails]

for(let s=0; s<=6; s++){
        let finalWeek = JSON.stringify(calendars[5][s]);

        switch(finalWeek){
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()}):
            calendars[5].splice(s,1);
            calendars[5].splice(s,0,'');
            break;
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()+1}):
            calendars[5].splice(s,1);
            calendars[5].splice(s,0,'');
            break;
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()+2}):
            calendars[5].splice(s,1);
            calendars[5].splice(s,0,'');
            break;
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()+3}):
            calendars[5].splice(s,1);
            calendars[5].splice(s,0,'');
            break;
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()+4}):
            calendars[5].splice(s,1);
            calendars[5].splice(s,0,'');
            break;
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()+5}):
            calendars[5].splice(s,1);
            calendars[5].splice(s,0,'');
            break;
          case JSON.stringify({date:moment(this.currentDate).startOf("month").date()+6}):
            calendars[5].splice(s,1);
            calendars[5].splice(s,0,'');
            break;
        }
      }

これをそのまま追加したのみだとエラー

calendarsの5列目がないため

場合分けが必要

[hasyrails]

switch処理を実装した後の不具合？

カレンダーが6列にならなければならない時に 表示されなくなった？

[hasyrails]

returnの位置重要

[hasyrails]

let weekRow5 = calendars[4]
      let FinalDateObject = JSON.stringify({date:moment(this.currentDate).endOf("month").date()})
      if(weekRow5.includes(FinalDateObject)){
        console.log('最終日あります');
      }else{
        console.log('最終日ないです');
      }

5列目に最終日ある時でも

console.log('最終日ないです');

が表示される

[hasyrails]

includeは「要素」の判定しかしない

オブジェクトは含まれているかの判定対象外 Array.prototype.includes() - MDN Web Docs - Mozilla JavaScript の Array.some と Array.includes の使い分け、値・参照型の動作の違い

someメソッドを使った

let weekRow5 = calendars[4]
      // let FinalDateObject = JSON.stringify({date: moment(this.currentDate).endOf("month").date()})
      let FinalDateObject = {date: moment(this.currentDate).endOf("month").date()}
      if(weekRow5.some(wR => wR.date === FinalDateObject.date)){
        console.log('最終日あります');
      }else{
        console.log('最終日ないです');
      }

判定がされている

[hasyrails]

実装成功

      let weekRow5 = calendars[4]
      let finalDateEl = calendars[4][6]
      let finalDate = Object.values(finalDateEl).[0]
      // let endDay = 
      // let FinalDateObject = JSON.stringify({date: moment(this.currentDate).endOf("month").date()})
      let finalDateObject = {date: moment(this.currentDate).endOf("month").date()};
      function beforeFinalDateObject(n) {
        return  {date: moment(this.currentDate).endOf("month").date() -n};
      }

      if(weekRow5.some(wR => wR.date === finalDateObject.date)){
        console.log('最終日あり');
      }else{
        console.log('最終日なし')
        switch(finalDate){
          case moment(this.currentDate).endOf("month").date()-1:
            calendars.push([finalDateObject,'','','','','','']);
            break;
          case moment(this.currentDate).endOf("month").date()-2:
            calendars.push([beforeFinalDateObject(1),finalDateObject,'','','','','']);
            break;
          case moment(this.currentDate).endOf("month").date()-3:
            calendars.push([beforeFinalDateObject(2),beforeFinalDateObject(1),finalDateObject,'','','','']);
            break;
          case moment(this.currentDate).endOf("month").date()-4:
            calendars.push([beforeFinalDateObject(3),beforeFinalDateObject(2),beforeFinalDateObject(1),finalDateObject,'','','']);
            break
        }

[hasyrails]

カレンダーの月で表示されない月が出てきてしまった

[hasyrails]

表示成功

if(calendars.length===5){　 // ===で代入ではなく、等しいことを条件にする
‥
}

// この処理の境界がちゃんと設定されていなかった

if(calendars.length===6){  // ===で代入ではなく、等しいことを条件にする
‥
}

[hasyrails]

予定の表示の条件を修正で正しく表示できた