[Vue] V-Calendar

 

V-Calendar

V-Calendar는 vue.js에서 간단한 속성 달력을 표시하기 위한 플러그인이다.

 

🚨주의사항

vue.js 버전이 2.5 이상이어야 한다.

 

 

설치

npm install v-calendar

 

불러오기

import Calendar from 'v-calendar/lib/components/calendar.umd'
import DatePicker from 'v-calendar/lib/components/date-picker.umd'

// Register components in your 'main.js'
Vue.component('calendar', Calendar)
Vue.component('date-picker', DatePicker)

// Or just use in separate component
export default {
  components: {
    Calendar,
    DatePicker
  }
  ...
}

 

 

 

💨 전체 넓이

구성 요소를 컨테이너의 전체 넓이로 확장하고 싶으면 is-expanded를 사용하면 된다.

<v-calendar is-expanded />

 

💨 타이틀 포지셔닝

제목 헤더를 왼쪽이나 오른쪽으로 정렬하고 싶으면 title-position을 사용하면 된다.

//왼쪽 정렬
<v-calendar title-position="left" />

//오른쪽 정렬
<v-calendar title-position="right" />

 

💨 색상

색상을 선택하고 싶으면 color를 사용하면 된다.

<v-date-picker
  color="red" //색상
  />

 

💨 다크모드

다크 모드를 사용하고 싶으면 is-dark를 사용하면 된다.

<v-date-picker
  is-dark //다크모드
  />

 

💨 언어

언어를 선택하고 싶으면 locale를 사용하면 된다.

<v-date-picker
  locale="en" // 영어 언어 선택
  />

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!