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
- 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;
}
</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
![[issue] incorrect lunar date information](https://avatars.githubusercontent.com/u/5233691?v=4)
56 Oct 11, 2022
3 Oct 31, 2022
10 Dec 29, 2022
762 Jan 3, 2023
15 Feb 28, 2022
47 Aug 16, 2022
485 Dec 18, 2022
425 Dec 27, 2022
434 Jan 3, 2023
37 Aug 10, 2022
6 Jun 15, 2022
47 Nov 24, 2022
55 May 2, 2022
1.5k Dec 18, 2022
3.7k Dec 31, 2022
129 Aug 13, 2022
195 Dec 6, 2022
982 Dec 29, 2022
114 Dec 13, 2022