Vue 기반 주간 전환 지원 달력

<template>
 <div class="date">
  <!--       -->
  <div class="month">
  <p>{{ currentYear }} {{ currentMonth }} </p>
  </div>
  <!--    -->
  <ul class="weekdays">
  <li> </li>
  <li> </li>
  <li> </li>
  <li> </li>
  <li> </li>
  <li> </li>
  <li> </li>
  </ul>
  <!--    -->
  <ul class="days">
  <li @click="pick(day)" v-for="(day, index) in days" :key="index">
   <!--  -->
   <span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
   <span v-else>
   <!--  -->
   <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>
   <span v-else>{{ day.getDate() }}</span>
   </span>
  </li>
  </ul>
 </div>
</template>

<script>


 export default {
 name: 'date',

 data () {
  return {
  currentYear: 1970, //   
  currentMonth: 1, //   
  currentDay: 1, //   
  currentWeek: 1, //   
  days: [],
  }
 },

 mounted () {

 },

 created () {
  this.initData(null)
 },

 methods: {
  formatDate (year, month, day) {
  const y = year
  let m = month
  if (m < 10) m = `0${m}`
  let d = day
  if (d < 10) d = `0${d}`
  return `${y}-${m}-${d}`
  },

  initData (cur) {
  let date = ''
  if (cur) {
   date = new Date(cur)
  } else {
   date = new Date()
  }
  this.currentDay = date.getDate()   //        
  this.currentYear = date.getFullYear()  //     
  this.currentMonth = date.getMonth() + 1 //     
  this.currentWeek = date.getDay() // 1...6,0 //    
  if (this.currentWeek === 0) {
   this.currentWeek = 7
  }
  const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)//       - - 
  this.days.length = 0
  //      ，      7   ，  6          ，         ，        i<= 35- this.currentWeek
  /* eslint-disabled */
  for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
   const d = new Date(str)
   d.setDate(d.getDate() - i)
   // console.log(y:" + d.getDate())
   this.days.push(d)
  }
  for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
   const d = new Date(str)
   d.setDate(d.getDate() + i)
   this.days.push(d)
  }
  },

  //     
  weekPre () {
  const d = this.days[0] //        7     7 
  d.setDate(d.getDate() - 7)
  this.initData(d)
  },

  //     
  weekNext () {
  const d = this.days[6] //        7     7 
  d.setDate(d.getDate() + 7)
  this.initData(d)
  },

  //              
  pickPre (year, month) {
  const d = new Date(this.formatDate(year, month, 1))
  d.setDate(0)
  this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
  },


  //              
  pickNext (year, month) {
  const d = new Date(this.formatDate(year, month, 1))
  d.setDate(35)
  this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
  },

  //       
  pick (date) {
  alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))
  },
 },
 }
</script>

<style lang="scss">
 @import "~base";

 .date {
 height: px2rem(180);
 color: #333;

 .month {
  font-size: px2rem(24);
  text-align: center;
  margin-top: px2rem(20);
 }

 .weekdays {
  display: flex;
  font-size: px2rem(28);
  margin-top: px2rem(20);

  li {
  flex: 1;
  text-align: center;
  }
 }

 .days {
  display: flex;

  li {
  flex: 1;
  font-size: px2rem(30);
  text-align: center;
  margin-top: px2rem(10);
  line-height: px2rem(60);

  .active {
   display: inline-block;
   width: px2rem(60);
   height: px2rem(60);
   color: #fff;
   border-radius: 50%;
   background-color: #fa6854;
  }

  .other-month {
   color: #e4393c;
  }
  }
 }
 }
</style>