Simple Lunar Calendar For Vue.js

Simple Lunar Calendar For Vue.js

A vue component for lunar calendar that uses Moment.js for date operations.

npm npm npm


A vue component for lunar calendar. Uses Moment.js for date operations.

  • This is the Korean lunar calendar. It is different from Chinese Lunar Calendar
  • You can also use it as a solar(gregorian) calendar

Online demo


npm install vue-lunar-calendar --save

or using Yarn

yarn add vue-lunar-calendar


  1. import your project
import lunarCalendar from 'vue-lunar-calendar'
  1. Declare to component your project
Vue.component('lunar-calendar', lunarCalendar)


new Vue({
  components: {'lunar-calendar': lunarCalendar}
  // or components: {lunarCalendar}
  1. use in your project.


Property Desc Type Default values
firstDayOfWeek Set the first day of Week Number 0 ( sunday )
disableDaysBeforeToday Disable days before today or not Boolean -
disabledFunc Use to decide if the day is disabled or not. Function null
defaultDate Init the selected date String -
showLunar Show or hide lunar Boolean false
showLunarButton Show or hide lunar check button Boolean true
lang Language String 'ko'
dateLang Language of date String 'en'


Addr Language
ko Korean
en English
it Italian
cn Chinese
vi Vietnamese
fr French
ja Japanese

If you want to add to language, please check


Event Desc params
change Emit when cell is clicked Function

Run the project

If you want to run this project

npm run start

or using Yarn

yarn start

open user browser


If you want to build this project

# Build the project
npm run build
# Build the demo
npm run demo

or using Yarn

# Build the project
yarn build
# Build the demo
yarn demo

Thanks for


Github Repository

Tags: #VueJs