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

vue-lunar-calendar

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

Install

npm install vue-lunar-calendar --save

or using Yarn

yarn add vue-lunar-calendar

Usage

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

or

new Vue({
  components: {'lunar-calendar': lunarCalendar}
  // or components: {lunarCalendar}
})
  1. use in your project.
<template>
  <lunar-calendar
    @change="onChange"
    :firstDayOfWeek="parseInt(firstDayOfWeek)"
    :disableDaysBeforeToday="disableDaysBeforeToday"
    :defaultDate="defaultDate"
    :showLunarButton="showLunarButton"
  ></lunar-calendar>
</template>

Props

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'

Language

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 CONTRIBUTING.md

Event

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

http://0.0.0.0:8080/

Build

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

@ClaudeSeo

Github Repository

Tags: #VueJs