34 date font color condition / 日付の色表示の条件を変更

[hasyrails]

正しく条件分岐できていない

[hasyrails]

• 条件1

  v-if="day.month===currentMonth" style="background-color:red;"

• 条件2

  v-if="day.month!==currentMonth&&currentMonth!==13" style="background-color:blue;"

• 条件3

  v-if="day.month===12&&currentMonth===13" style="background-color:red;"

• 条件4

  v-if="day.month===1&&currentMonth===13" style="background-color:blue;"

[hasyrails]

背景色を条件分岐させようと

<div
  class="calendar-date"
  v-for="(day, index) in week"
  :key="index"
>
  <draggable  v-model="devidedSchedule" group="cards" @start="drag=true" @end="drag=false" :options="options">
    <Schedule 
          :devidedSchedule="devidedSchedule"
          v-for="devidedSchedule in devidedSchedules"
          v-if="devidedSchedule.date==day.date&&devidedSchedule.month==day.month&&devidedSchedule.year==day.year"
          style="flex:1;min-height:1px;min-width:1px;max-height:100px;max-width:150px;text-align: center;margin-bottom:10px;"
>
    </Schedule>
  </draggable>
</div>

の部分をv-ifで条件分岐させようとすると カレンダー表示の配列がバグる？

[hasyrails]

方針変更

色を変更するのは日付文字の色とする

<div v-if="day.month===currentMonth" style="font-weight:200;">{{day.date}}</div>
<div v-if="day.month!==currentMonth" style="color:#D3D3D3;">{{ day.date }}</div>

[hasyrails]

メソッドの変更

currentMonthが0になることに対し、 day.monthは正しい連動をすることで不整合が生じるのを prevMonth()メソッド / nextMonth()メソッドを変更することで解消

nextMonth() {
      this.currentDate = moment(this.currentDate).add(1, "month").format('YYYY/MM');
      if(this.currentMonth <11){
        this.currentMonth++;
      }else if(this.currentMonth===11){
        this.currentMonth = 12
      }else{
        this.currentMonthReset()
      }
    },
currentMonthReset(){
      this.currentMonth = 1
},
prevMonth() {
      this.currentDate = moment(this.currentDate).subtract(1, "month").format('YYYY/MM');

      if(this.currentMonth <=12 && this.currentMonth > 1){
        this.currentMonth--;
      }else if(this.currentMonth===1){
        this.currentMonth = 12
      }
      this.getCalendar();
},