All Projects → KimWooHyun → Vue Lunar Calendar

KimWooHyun / Vue Lunar Calendar

A vue component for lunar calendar.

Projects that are alternatives of or similar to Vue Lunar Calendar

Datetimepicker
React Native date & time picker component for iOS, Android and Windows
Stars: ✭ 1,151 (+1592.65%)
Mutual labels:  hacktoberfest
Mathexecutor
Simple math expresions parser and calculator
Stars: ✭ 67 (-1.47%)
Mutual labels:  hacktoberfest
Laravel Ecommerce
AvoRed an Open Source Laravel Shopping Cart
Stars: ✭ 1,151 (+1592.65%)
Mutual labels:  hacktoberfest
Portugol Webstudio
IDE online para o Portugol
Stars: ✭ 67 (-1.47%)
Mutual labels:  hacktoberfest
Gulp Wp Pot
Gulp plugin to generate pot file for WordPress plugins and themes
Stars: ✭ 67 (-1.47%)
Mutual labels:  hacktoberfest
H4ckt0b3rf3st 2020
Create Hacktoberfest Pull Requests
Stars: ✭ 68 (+0%)
Mutual labels:  hacktoberfest
Phpbu
PHP Backup Utility - Creates and encrypts database and file backups, syncs your backups to other servers or cloud services and assists you monitor your backup process
Stars: ✭ 1,147 (+1586.76%)
Mutual labels:  hacktoberfest
Talisman
By hooking into the pre-push hook provided by Git, Talisman validates the outgoing changeset for things that look suspicious - such as authorization tokens and private keys.
Stars: ✭ 1,155 (+1598.53%)
Mutual labels:  hacktoberfest
Yii2 Smarty
Yii 2 Smarty Extension.
Stars: ✭ 67 (-1.47%)
Mutual labels:  hacktoberfest
Ideogram
Insert emoji anywhere in elementary OS, even in non-native apps
Stars: ✭ 68 (+0%)
Mutual labels:  hacktoberfest
Genesis
🤖 Warframe Discord Cephalon
Stars: ✭ 67 (-1.47%)
Mutual labels:  hacktoberfest
Activity
⚡️ Activity app for Nextcloud
Stars: ✭ 67 (-1.47%)
Mutual labels:  hacktoberfest
Notify Py
💬 | A simple Python Module for sending cross-platform desktop notifications on Windows, macOS and Linux
Stars: ✭ 68 (+0%)
Mutual labels:  hacktoberfest
Ifme
Free, open source mental health communication web app to share experiences with loved ones
Stars: ✭ 1,147 (+1586.76%)
Mutual labels:  hacktoberfest
Alpakka
Alpakka is a Reactive Enterprise Integration library for Java and Scala, based on Reactive Streams and Akka.
Stars: ✭ 1,154 (+1597.06%)
Mutual labels:  hacktoberfest
Webargs
A friendly library for parsing HTTP request arguments, with built-in support for popular web frameworks, including Flask, Django, Bottle, Tornado, Pyramid, webapp2, Falcon, and aiohttp.
Stars: ✭ 1,145 (+1583.82%)
Mutual labels:  hacktoberfest
Multipletab
Multiple Tab Handler, Provides feature to close multiple tabs.
Stars: ✭ 67 (-1.47%)
Mutual labels:  hacktoberfest
Brawlstats
(A)sync python wrapper for the Brawl Stars API
Stars: ✭ 68 (+0%)
Mutual labels:  hacktoberfest
Adminlte
Pi-hole Dashboard for stats and more
Stars: ✭ 1,155 (+1598.53%)
Mutual labels:  hacktoberfest
Youtubeexplode.converter
Muxes and converts videos from YoutubeExplode
Stars: ✭ 68 (+0%)
Mutual labels:  hacktoberfest

npm npm npm

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

  1. import your project
import lunarCalendar from 'vue-lunar-calendar'
  1. Declare to component your project
Vue.component('lunar-calendar', lunarCalendar)

or

new Vue({
  components: {'lunar-calendar': lunarCalendar}
  // or components: {lunarCalendar}
})
  1. 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].