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;
  }
</sryle>

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