vue v-calendar v-date-picker 년도 월 선택 팝업 추가

vue 컴포넌 중 아주 유용하게 쓸만한 것이 달력 컴포넌트다. vuetify 에는 수많은 기능이 있지만 그중 실제 실무에서 많이 사용하기도 했고 사용하면서 우와 이것도돼? 하며 달력을 아주 간단하게 만들어 볼수 있는 장점이 있다. 이벤트 핸들링도 상당히 간소한 편이다. 

처음 템플릿 작업이 조금 복잡하긴 하지만 한번 만들어 두면 유용하게 쓸수 있고 달력 내부에 div 조작도 html 코드 그대로 사용 할수 있어서 상당한 이점이 있다. 

 

아래는 간략하게 달력 노출 부분만 메모를 하고 오늘 찾은 기능은 상단에 년도를 클릭하면 년도/월을 선택 해서 바로 이동할 수 있는 기능을 추가 하며 코드 메모를 남겨 본다. 예전에는 셀렉트박스로 배열에 담아 불러 왔던 부분이 이제는 컴포넌트 호출 만으로도 가능하다니 참말로 신기한 부분이다. 

<v-calendar
  ref="calendar"
  v-model="focus"
  color="primary"
  :type="type"
  :locale="'ko-KR'"
  :events="events"
  :format="customFormat"
  @click:date="viewDay"
  @change="updateRange"
>
</v-calendar>

 

이때 아무 설정도 하지 않으면 모두 영어로 나오기에 한국에서 개발중이라면 locale 옵션을 사용해 보면 년도와 월 뒤에 한글도 넣을 수 있다. 아주 간단하게 한글로 샤라락 변환이 된다. 따지고 보면 변환이라기 보다는 날짜 뒤에 월 / 년 같은 글자를 붙이는 효과 이지만 말이다. 

 

v-date-picker 은 여러가지 타입이 있어서 년도/월만 선택 하는 month 도 있고 일수 까지 모두 선택 하게 하려면 type 정보를 빼면 기본은 우리가 알고 있는 현재 월의 모든 일수가 노출 되는 달력이 뜬다. 

<v-date-picker
  v-model="selectedPickerDate"
  type="month"
  @input="setFirstDayOfMonth"
  :locale="localeOptions"
/>

<script>
export default {
  data() {
    return {
      selectedPickerDate: null,
      localeOptions: {
        firstDayOfWeek: 1, // 월요일부터 시작하는 경우
        masks: {
          L: 'YYYY년 MM월', // 한글로 월을 표시하는 포맷
          l: 'YYYY-MM' // 기본 포맷
        },
        // 다른 locale 옵션들...
      }
    };
  },
  methods: {
    setFirstDayOfMonth(selectedDate) {
      // 선택된 날짜를 처리하는 로직
    }
  }
};
</script>

 

아래 코드는 년도월을 선택 후 해당 월로 이동하는 스크립트 예시다. v-model="focus" 로 캘린더에 명시 했기 때문에 해당 일자를 this.focus 에 넣어 주기만 하면 달력을 자동으로 선택된 달로 변경 된다. 참말로 편리한 세상이다.

async setFirstDayOfMonth(selectedPickerDate) {
  if (selectedPickerDate) {
    const dateParts = selectedPickerDate.split('-');
    const year = parseInt(dateParts[0], 10);
    const month = parseInt(dateParts[1], 10);
    const firstDayOfMonth = new Date(year, month - 1, 1);
    this.focus = firstDayOfMonth; 
  }
},

 

너무 예스러운 애기지만 예전에는 한국에 맞게 날짜 타입을 바꿀려면 맨붕이 오기도 하는데 요즘은 옵션 설정이 상당히 좋은거 같다. 달력도 참말로 계산법으로 한땀한땀 스크립트를 만들고 달력스크립트 있어요? 물어 보기도 하고 말이다. 달력 스크립트를 보유한 사람은 꽤 실력자 였으니 말이다.

 

vue 로 달력으로 삽질하고 있다면 도움이 되길 바란다.