어드민 수정건 수정

frontend/src/components/modal/calendar.vue

@@ -0,0 +1,141 @@
+<template>
+<!--  <div class="dimmed" @click="calendarCancel();"></div>-->
+  <div class="datepicker">
+    <div class="datepicker-head">
+      <div class="datepicker-btn">
+        <a href="#" class="datepicker-prev" @click="calendarData(-1)"><span></span></a>
+        <a href="#" class="datepicker-next" @click="calendarData(1)"><span></span></a></div>
+      <div class="datepicker-title">
+        <span>{{ year }}.</span>
+        <span>{{ month }}</span>
+      </div>
+    </div>
+    <table class="datepicker-calender">
+      <tbody>
+      <tr v-for="(date, idx) in dates" :key="idx">
+        <td v-for="(day, secondIdx) in date"
+            :key="secondIdx"
+            :class="{
+              'disabled': idx === 0 && day >= lastMonthStart || dates.length - 1 === idx && nextMonthStart > day,
+              'today': day === today && month === currentMonth && year === currentYear
+              }"
+        >
+          <a href="#" @click="selectDay(day)">{{ day }}</a>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dates: [],
+      currentYear: 0,
+      currentMonth: 0,
+      year: 0,
+      month: 0,
+      lastMonthStart: 0,
+      nextMonthStart: 0,
+      today: 0,
+    };
+  },
+  created() { // 데이터에 접근이 가능한 첫 번째 라이프 사이클
+    const date = new Date();
+    this.currentYear = date.getFullYear(); // 이하 현재 년, 월 가지고 있기
+    this.currentMonth = date.getMonth() + 1;
+    this.year = this.currentYear;
+    this.month = this.currentMonth;
+    this.today = date.getDate(); // 오늘 날짜
+    this.calendarData();
+  },
+  methods: {
+    calendarData(arg) { // 인자를 추가
+      if (arg < 0) { // -1이 들어오면 지난 달 달력으로 이동
+        this.month -= 1;
+      } else if (arg === 1) { // 1이 들어오면 다음 달 달력으로 이동
+        this.month += 1;
+      }
+      if (this.month === 0) { // 작년 12월
+        this.year -= 1;
+        this.month = 12;
+      } else if (this.month > 12) { // 내년 1월
+        this.year += 1;
+        this.month = 1;
+      }
+      const [
+        monthFirstDay,
+        monthLastDate,
+        lastMonthLastDate,
+      ] = this.getFirstDayLastDate(this.year, this.month);
+      this.dates = this.getMonthOfDays(
+          monthFirstDay,
+          monthLastDate,
+          lastMonthLastDate,
+      );
+      console.log(this.lastMonthStart)
+    },
+    getFirstDayLastDate(year, month) {
+      const firstDay = new Date(year, month - 1, 1).getDay(); // 이번 달 시작 요일
+      const lastDate = new Date(year, month, 0).getDate(); // 이번 달 마지막 날짜
+      let lastYear = year;
+      let lastMonth = month - 1;
+      if (month === 1) {
+        lastMonth = 12;
+        lastYear -= 1;
+      }
+      const prevLastDate = new Date(lastYear, lastMonth, 0).getDate(); // 지난 달 마지막 날짜
+      return [firstDay, lastDate, prevLastDate];
+    },
+    getMonthOfDays(
+        monthFirstDay,
+        monthLastDate,
+        prevMonthLastDate,
+    ) {
+      let day = 1;
+      let prevDay = (prevMonthLastDate - monthFirstDay) + 1;
+      const dates = [];
+      let weekOfDays = [];
+      while (day <= monthLastDate) {
+        if (day === 1) {
+          // 1일이 어느 요일인지에 따라 테이블에 그리기 위한 지난 셀의 날짜들을 구할 필요가 있다.
+          for (let j = 0; j < monthFirstDay; j += 1) {
+            if (j === 0) this.lastMonthStart = prevDay; // 지난 달에서 제일 작은 날짜
+            weekOfDays.push(prevDay);
+            prevDay += 1;
+          }
+        }
+        weekOfDays.push(day);
+        if (weekOfDays.length === 7) {
+          // 일주일 채우면
+          dates.push(weekOfDays);
+          weekOfDays = []; // 초기화
+        }
+        day += 1;
+      }
+      const len = weekOfDays.length;
+      if (len > 0 && len < 7) {
+        for (let k = 1; k <= 7 - len; k += 1) {
+          weekOfDays.push(k);
+        }
+      }
+      if (weekOfDays.length > 0) dates.push(weekOfDays); // 남은 날짜 추가
+      this.nextMonthStart = weekOfDays[0]; // 이번 달 마지막 주에서 제일 작은 날짜
+      return dates;
+    },
+    selectDay(day){
+      const year = this.year
+      const month = this.month.toString().length < 2 ? '0'+ this.month : this.month
+      const dd = day.toString().length < 2 ? '0' + day : day;
+      const getDate = year + '-' + month + '-' + dd
+      this.$parent.calendarCalbackFnc(getDate);
+    },
+    calendarCancel(){
+      this.$parent.openEndPicker= false
+      this.$parent.openStartPicker= false
+    }
+  },
+};
+</script>