tuhe32 / vue-lunar-calendar

A vue component for lunar calendar.

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

• demo

Install

npm install vue-lunar-calendar --save

Usage

1. import your project

import lunarCalendar from 'vue-lunar-calendar'

2. Declare to component your project

Vue.component('lunar-calendar', lunarCalendar)

or

new Vue({
  components: {'lunar-calendar': lunarCalendar}
  // or components: {lunarCalendar}
})

3. 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

If you want to add to language, please check here

Event

Event	Desc	params
change	Emit when cell is clicked	Function

Thanks for

@ClaudeSeo