달력(web, vue, bootstrap, scss)

<template>
  <div class="container_guideService">
    <div class="calendar">
      <div class="title">
        <button
          class="btn btn-primary"
          v-on:click="
            arrangeDateData(
              new Date(dateInfo.year, dateInfo.jsMonth - 1, dateInfo.date)
            )
          "
          :disabled="
            dateInfo.jsMonth < new Date().getMonth() + 1 ? 'disabled' : false
          "
        >
          before
        </button>
        <h3>{{ dateInfo.year }}/{{ dateInfo.month }}</h3>
        <button
          class="btn btn-primary"
          v-on:click="
            arrangeDateData(
              new Date(dateInfo.year, dateInfo.jsMonth + 1, dateInfo.date)
            )
          "
          :disabled="
            dateInfo.jsMonth > new Date().getMonth() ? 'disabled' : false
          "
        >
          next
        </button>
      </div>

      <div class="dateOfWeek_sub">
        <p>일</p>
        <p>월</p>
        <p>화</p>
        <p>수</p>
        <p>목</p>
        <p>금</p>
        <p>토</p>
      </div>
      <div class="dates">
        <div
          class="ex_date_box"
          v-for="date in dateInfo.startDay"
          :key="date"
        ></div>
        <div
          class="date_box"
          :class="[
            whichDate(dateInfo.year, dateInfo.month, date),
            editImpossibleDate(dateInfo.year, dateInfo.jsMonth, date),
          ]"
          v-for="(date, i) in dateInfo.lastDate"
          :key="date"
          v-on:click="chooseDate(dateInfo.year, dateInfo.month, date)"
        >
          {{ i + 1 }}
        </div>
      </div>
    </div>
    <p>
      선택한 날짜 :
      {{
        dateInfo.chosenDate.year +
        "/" +
        dateInfo.chosenDate.month +
        "/" +
        dateInfo.chosenDate.date
      }}
    </p>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const dateInfo = reactive({
      chosenDate: {},
    });

    const arrangeDateData = (para = new Date()) => {
      let today = para;
      let year = today.getFullYear();
      dateInfo.year = year;
      let month = today.getMonth() + 1;
      dateInfo.month = month;
      let jsMonth = today.getMonth();
      dateInfo.jsMonth = jsMonth;

      let date = today.getDate();
      dateInfo.date = date;

      let startDay = new Date(year, jsMonth, 1).getDay();
      dateInfo.startDay = startDay;
      let lastDate = new Date(year, jsMonth + 1, 0).getDate();
      dateInfo.lastDate = lastDate;
    };

    const editImpossibleDate = (year, jsMonth, date) => {
      let dateObj = new Date(year, jsMonth, date);
      if (dateObj.getDay() === 0 || dateObj.getDay() === 6) {
        return "impossibleDate";
      } else {
        return "possibleDate";
      }
      //여기에 else if 로 axios요청 불가능 날짜 가져오기
    };

    const chooseDate = (year, month, date) => {
      if (editImpossibleDate(year, month - 1, date) == "impossibleDate") {
        return;
      } else {
        dateInfo.chosenDate.year = year;
        dateInfo.chosenDate.month = month;
        dateInfo.chosenDate.date = date;
      }
    };

    const whichDate = (year, month, date) => {
      if (editImpossibleDate(year, month - 1, date) == "impossibleDate") {
        return "";
      } else if (
        year == dateInfo.chosenDate.year &&
        month == dateInfo.chosenDate.month &&
        date == dateInfo.chosenDate.date
      ) {
        return "chosenDate";
      } else {
        return "";
      }
    };

    //요일찾는건 걍 뭐..

    arrangeDateData();

    return {
      dateInfo,
      arrangeDateData,
      chooseDate,
      editImpossibleDate,
      whichDate,
    };
  },
};
</script>

<style lang="scss" scoped>
.container_guideService {
  width: 100%;

  .calendar {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    .title {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    .dateOfWeek_sub {
      display: flex;
      justify-content: space-around;
      width: 100%;
      p {
        margin: 0;
        font-weight: 900;
      }
    }
    .dates {
      display: flex;
      flex-direction: row;

      flex-wrap: wrap;
      width: 100%;

      .ex_date_box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 14.28%;
        height: 60px;
      }
      .date_box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 14.28%;
        height: 60px;
      }
      .impossibleDate {
        color: red;
        background-color: #eee;
        opacity: 0.5;
      }
      .possibleDate {
        color: green;
      }
      .chosenDate {
        background-color: blue;
        color: white;
      }
    }
  }
}
</style>