[v-calendar] 달력 라이브러리 아주 쉽게 만드는 가이드

728x90

안녕하세요.

vue.js를 사용해서 front-end 개발을 진행하고 있습니다.

달력을 만들어야 하는 요구사항이 있어서 이번에 v-calendar 라이브러리를 사용하면서 사용팁을 공유하고자 합니다.

1. 라이브러리 설치

터미널을 여시고, 프로젝트 홈 경로에서 다음 명령어를 입력합니다.

npm i --save v-calendar

2. 사용할 vue 파일에서 import 하기

import VDatePicker from 'v-calendar/lib/components/date-picker.umd';

3. template에 등록해서 사용하기

<template>
  <VDatePicker
     locale="en"
     title-position="left"
     color="gray"
     v-model="endDate"
     @input="clickEndDate()"
     :model-config="modelConfig"
     is-required
     :style="{display:isShowEndCalendar}"
     style="z-index:1"
  />
</template>

pick 색상 변경하기

color="gray"

한글이 아닌 영문으로 달력을 표현하고 싶을 경우 옵션.

기본으로 사용하게 될 경우 한글로 달과 요일이 표시됩니다. 이를 영문으로 바꾸고 싶다면 아래와 같은 옵션을 주면 됩니다.

locale="en"

월/년 UI 위치 변경 옵션.

default

옵션 추가 후.

title-position="left"

그냥

vuetify의 vcalendar를 사용하는 것을 추천합니다.

v2.vuetifyjs.com/ko/components/date-pickers/