bangslosan/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

or using Yarn

yarn add vue-lunar-calendar

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"
    :cellClass="$style.cell"
  ></lunar-calendar>
</template>

<style module>
  .cell {
    background-color: #222944;
  }
</style>

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'
cellSeletedClass	cell seleted css class	String	-
customCells	custom cells	Array	-

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