Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/wangdaodao/vue-lunar-calendar-pro

一个支持农历，节气，假日的日历面板！
https://github.com/wangdaodao/vue-lunar-calendar-pro

calendar lunar-calendar vue

Last synced: 2 months ago
JSON representation

一个支持农历，节气，假日的日历面板！

Host: GitHub
URL: https://github.com/wangdaodao/vue-lunar-calendar-pro
Owner: wangdaodao
Created: 2019-11-05T02:16:35.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-01-06T02:16:40.000Z (over 1 year ago)
Last Synced: 2024-02-26T10:07:31.954Z (4 months ago)
Topics: calendar, lunar-calendar, vue
Language: JavaScript
Homepage: http://demo.const.team/calendar/
Size: 1.49 MB
Stars: 79
Watchers: 2
Forks: 25
Open Issues: 10
Metadata Files:
- Readme: README.md

Lists

awesome-vue - vue-lunar-calendar-pro - A vue component for lunar calendar. Uses calendar.js for date operations. (Components & Libraries / UI Components)
awesome-vue - vue-lunar-calendar-pro - A vue component for lunar calendar. Uses calendar.js for date operations. (Components & Libraries / UI Components)
awesome-vue - vue-lunar-calendar-pro - A vue component for lunar calendar. Uses calendar.js for date operations. (Components & Libraries / UI Components)
awesome-vue - vue-lunar-calendar-pro - 一个支持农历，节气，假日的日历面板！ ` 📝 3 days ago` (UI Components [🔝](#readme))

README

        # Calendar 日历

![NPM Publish](https://github.com/wangdaodao/vue-lunar-calendar-pro/actions/workflows/npm-publish.yml/badge.svg) ![NPM version](https://img.shields.io/npm/v/vue-lunar-calendar-pro.svg) ![GitHub stars](https://img.shields.io/github/stars/wangdaodao/vue-lunar-calendar-pro.svg) ![GitHub issues](https://img.shields.io/github/issues/wangdaodao/vue-lunar-calendar-pro.svg) ![GitHub forks](https://img.shields.io/github/forks/wangdaodao/vue-lunar-calendar-pro.svg)

* 😊 基于 vue 2.0 开发的轻量，高性能日历组件；

* 😘 支持农历，节气，假日显示；

* 😍 原生 js 开发，无第三方库；

* 😂 支持现代浏览器(IE >= 9)；

* 👍 感谢 [calendar.js](https://github.com/jjonline/calendar.js)

## 安装

### NPM

```bash

npm i vue-lunar-calendar-pro --save

```

### CDN

目前可以通过 [unpkg.com/vue-lunar-calendar-pro](https://unpkg.com/vue-lunar-calendar-pro) 或者 [www.jsdelivr.com/package/npm/vue-lunar-calendar-pro](https://www.jsdelivr.com/package/npm/vue-lunar-calendar-pro) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

🚩 建议使用 CDN 引入组件的用户在链接地址上锁定版本，以免将来组件升级时受到非兼容性更新的影响。🚩 

```html

```

## 使用

### 全局使用

```js

// main.js

import Vue from 'vue'

import App from './App.vue'

// ...

import 'vue-lunar-calendar-pro/dist/calendar.css';

import Calandar from 'vue-lunar-calendar-pro'

Vue.use(Calandar)

// ...

new Vue({

  el: '#app',

  render: h => h(App)

})

```

```html

  


    

  


  export default {

    name: 'App'

  }

```

### 本地注册

```html

  


    

  


  import 'vue-lunar-calendar-pro/dist/calendar.css';

  import Calendar from 'vue-lunar-calendar-pro'

  export default {

    name: 'App',

    components:{Calendar}

  }

```

## 例子

### 基本单选

🔸 设置 `default-date` 来指定当前显示的月份。如果 `default-date` 未指定，则显示当月。

基本单选: [demo1](http://demo.const.team/calendar/demo1.html)

```html

  

  
默认日期：{{defaultDate}}

  选中日期：{{date}}


  export default {

    data() {

      return {

        defaultDate:"2018-06-26",

        date: ["2019-09-07"]

      }

    },

  }

```

### 基本多选

🔸 设置 `multiple` 开启日期多选。

基本多选: [demo2](http://demo.const.team/calendar/demo2.html)

```html

  

  
选中日期：{{date}}


  export default {

    data() {

      return {

        date: [ "2019-09-07", "2019-10-10", "2019-10-16", "2019-10-15", "2019-10-22", "2019-10-18" ] 

      }

    },

  }

```

### 设置周起始日

🔸 设置 `first-day-of-week` 来指定周起始日。如果 `first-day-of-week` 未指定则按照周日为起始日。

设置周起始日: [demo3](http://demo.const.team/calendar/demo3.html)

```html

  

  
选中日期：{{date}}


  export default {

    data() {

      return {

        date: ["2019-09-07"]

      }

    },

  }

```

### 高亮日期

🔸 设置 `highlighter-date` 高亮日期。

高亮日期: [demo4](http://demo.const.team/calendar/demo4.html)

```html

  

  
选中日期：{{date}}

  高亮日期：{{highlighter}}


  export default {

    data() {

      return {

        date: [ "2019-09-07", "2019-10-10", "2019-10-16", "2019-10-15", "2019-10-22", "2019-10-18" ] ,

        highlighter: ["2019-12-24","2020-01-25","2020-02-13","2020-02-24","2020-02-26","2020-06-26"]

      }

    },

  }

```

### 某些日期不可选

🔸 设置 `disabled-date` 来指定当哪些日期不可选。

某些日期不可选: [demo5](http://demo.const.team/calendar/demo5.html)

```html

  

  
选中日期：{{date}}

  不可选日期：{{disableddate}}


  export default {

    data() {

      return {

        date: [ "2019-09-07", "2019-10-10", "2019-10-16", "2019-10-15", "2019-10-22", "2019-10-18" ],

        disableddate: ["2019-11-02","2019-11-08","2019-11-21"]

      }

    },

  }

```

### 设置日期区间

🔸 设置 `max-date` 和 `min-date` 来设置日期区间。

设置日期区间: [demo6](http://demo.const.team/calendar/demo6.html)

```html

  

  
选中日期：{{date}}

  日期区间：2019-05-01 至 2019-12-31

  不可选日期：{{disableddate}}


  export default {

    data() {

      return {

        date: [ "2019-09-07", "2019-10-10", "2019-10-16", "2019-10-15", "2019-10-22", "2019-10-18" ],

        disableddate: ["2019-11-02","2019-11-08","2019-11-21"]

      }

    },

  }

```

### 自定义Render

🔸 内置 `render` 方法，参数为`year, month`，配合其他组件使用。另外，通过设置名为 `dateCell` 的 `scoped-slot` 来自定义日历单元格中显示的内容。在 `scoped-slot` 可以获取到 `date`（当前单元格的日期对象），详情解释参考下方的 `API` 文档。

自定义Render: [demo7](http://demo.const.team/calendar/demo7.html)

```html

  


    

    

  


  

    

      

        


          属性：

          date：{{date.date}}

          year：{{date.year}}

          month：{{date.month}}

          day：{{date.day}}

          weekDay：{{date.weekDay}}

          gzDay：{{date.gzDay}}

          gzMonth：{{date.gzMonth}}

          gzYear：{{date.gzYear}}

          lunarMonth：{{date.lunarMonth}}

          lunar：{{date.lunar}}

          animal：{{date.animal}}

          astro：{{date.astro}}

        

        点击

      

    

  

  
选中日期：{{date}}


  export default {

    data() {

      return {

        value1: "",

        date: ["2019-09-30","2019-09-28","2019-09-25","2019-10-01"]

      }

    },

    methods: {

      changeDate(val){

        console.log("val", val)

        var dateArr = val.split("-");

        this.$refs.calendar.render(dateArr[0], dateArr[1]);

      }

    },

  }

```

## 属性

| 参数             | 说明          | 类型      | 可选值        | 默认值  |

|-----------------|-------------- |---------- |------------ |-------- |

| default-date|默认渲染日期|Date,String|能被new Date()解析的|new Date()|

| select-date | 绑定值         | Array | —  | —      |

| highlighter-date | 高亮日期         | Array | —  | —      |

| disabled-date | 不可选日期         | Array | —  | —      |

| max-date | 最大可选日期         | Date,String | 能被new Date()解析的  | —      |

| min-date | 最小可选日期         | Date,String | 能被new Date()解析的  | —      |

| show-lunar | 是否渲染农历         | Boolean | —  | true      |

| show-festival | 是否渲染节日         | Boolean | —  | true      |

| show-term | 是否渲染节气         | Boolean | —  | true      |

| show-week | 是否高亮周末         | Boolean | —  | true      |

| show-title | 是否显示头部标题栏(年月日/按钮)         | Boolean | —  | true      |

| week-count | 每月显示的行的数量         | Number | —  | 6      |

| first-day-of-week | 周起始日         | Number | 1 到 7  |  7   |

| multiple | 是否多选         | Boolean | —  | false      |

## 事件

| 事件名	| 说明 | 参数 |

|---|---|---|

| year-change  | 当前渲染的年份变化时会触发该事件  |  year,month |

| month-change  | 当前渲染的月份变化时会触发该事件  |  year,month |

| date-click  | 点击某个日期格子时会触发该事件  |  date |

## 插槽

| 参数	| 说明 |

|---|---|

| dateCell  | 当前单元格的日期对象  |

## Date 对象

| 字段	| 说明  |

|---|---|

| date  | Date对象  | 

| year  | 年  | 

| month  | 月  | 

| day  | 日  | 

| weekDay  | 周几(0-6)  | 

| lunar  | 农历日 | 

| lunarMonth  | 农历日 | 

| festival  | 节日 | 

| lunarFestival  | 农历节日 | 

| term  | 节气 | 

| astro  | 星座 | 

| animal  | 属相 | 

| gzDay  | 干支天 | 

| gzMonth  | 干支月 | 

| gzYear  | 干支年 | 

| isToday  | 是否为今天 | 

| isSelect  | 是否选中 | 

| isWeekend  | 是否为周末 | 

| isOtherMonthDay  | 是否属于当前渲染月份 | 

| renderYear  | 当前渲染年份 | 

| renderMonth  | 当前渲染月份 | 

| isDefaultDate  | 是否是默认日期 |