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 --saveor using Yarn
yarn add vue-lunar-calendarUsage
- import your project
import lunarCalendar from 'vue-lunar-calendar'- Declare to component your project
Vue.component('lunar-calendar', lunarCalendar)or
new Vue({   components: {'lunar-calendar': lunarCalendar}   // or components: {lunarCalendar} })- 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' | 
| cellClass | cell css class | String | - | 
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 startor using Yarn
yarn startopen 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 demoor using Yarn
# Build the project yarn build # Build the demo yarn demo 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
