https://github.com/kitwon/vue2-event-calendar
Full calendar base on Vue2 and momentjs.
https://github.com/kitwon/vue2-event-calendar
Last synced: 10 months ago
JSON representation
Full calendar base on Vue2 and momentjs.
- Host: GitHub
- URL: https://github.com/kitwon/vue2-event-calendar
- Owner: kitwon
- Created: 2018-03-06T06:28:44.000Z (almost 8 years ago)
- Default Branch: 1.0
- Last Pushed: 2022-12-10T17:15:51.000Z (almost 3 years ago)
- Last Synced: 2024-04-25T06:02:05.905Z (over 1 year ago)
- Language: Vue
- Size: 9.35 MB
- Stars: 76
- Watchers: 6
- Forks: 15
- Open Issues: 23
-
Metadata Files:
- Readme: README-CN.md
Awesome Lists containing this project
- awesome-vue - vue2-event-calendar - Full calendar base on Vue2 and momentjs. ` 📝 2 years ago` (UI Components [🔝](#readme))
- awesome-vue-zh - vue2事件日历 - Vue2的事件日历,支持自定义事件项和日历标题. (UI组件 / 日历)
- awesome-vue - vue2-event-calendar - An events calendar for Vue2, support customize event items and calendar header. (Components & Libraries / UI Components)
- awesome-vue - vue2-event-calendar ★35 - An events calendar for Vue2, support customize event items and calendar header. (UI Components / Calendar)
- awesome-vue - vue2-event-calendar - An events calendar for Vue2, support customize event items and calendar header. (UI Components / Calendar)
README
# Vue2 Calendar Component
Vue2 事件日历，有月和周两种模式，使用 scopeSlots 自定义日历展示。
[📺**Live demo**](https://kitwon.github.io/vue2-event-calendar/)
## 安装
```shell
// npm
npm install vue2-event-calendar --save
// yarn
yarn add vue2-event-calendar
```
## 使用
### 引入组件
```javascript
// import component
import 'vue2-event-calendar/dist/vue2-event-calendar.css'
import Calendar from 'vue2-event-calendar'
Vue.component('Calendar', Calendar)
```
或者作为一个组件引入
```javascript
import 'vue2-event-calendar/dist/vue2-event-calendar.css'
import { Calendar } from 'vue2-event-calendar'
// ...
export default {
components: { Calendar }
}
```
### 一般使用
```html
month
week
{{item.date.date}}
{{item.data.title}}
```
> 或者使用**body slot**自定义日历内容，scope返回的数据结构为一个大小为**6*7**的矩阵。
```html
month
week
{{col.date.date}}
{{col.data.title}}
```
### 自定义头部
```html
```
```javascript
export default {
// ...
methods: {
renderHeader({ prev, next, selectedDate }) {
const h = this.$createElement
const prevButton = h('div', {
on: {
click: prev
}
}, ['prev'])
const nextButton = h('div', {
on: {
click: next
}
}, ['next'])
return h('div', [prevButton, selectedDate, nextButton])
}
}
}
```
## Props
| parameter | description | type | default | acceptable value |
| -------------- | ------------------------------------------------------------------------------------------ | -------------------------------------- | ------------ | ---------------- |
| startDate | 日历开始日期 | String, timestamp, Date | new Date() | |
| dateData | 日历展示数据，数据对象中必须有 date 参数，或者你可以使用`matchKey`自定义匹配日期参数的名字 | Object, Array | | |
| matchKey | 如果数据是一个数组，设置数组对象匹配日期的参数名 | String | date | |
| locale | 设置日历顶部周标题显示语言 | String | en | zh-cn, en |
| weekLocaleData | 自定义周标题显示内容，如果使用这个 props，local 将不起作用 | array | | |
| firstDay | 设置每周第一天，默认周日，0 为周日 | Number | 0 | 0 - 6 |
| mode | 组件显示模式，默认为月日历 | String | month | month, week |
| prefixCls | 组件样式命名空间 | String | vue-calendar | |
| renderHeader | 头部渲染函数 | Function({ prev, next, selectedDate }) | | |
## Event Props
| parameter | description | params |
| ------------- | -------------------- | ---------------------------------------------------- |
| onMonthChange | 日历日期改变触发 | `(date)` 参数返回当前选择月或周的 startDay 和 endDay |
| onPrev | 选择上个日期时候触发 | 和`onMonthChange`返回一样 |
| onNext | 选择下个日期时候触发 | 和`onMonthChange`返回一样 |
## Methods
| name | description | params |
| ---------- | ------------------ | ----------------------------------------- |
| changeDate | 设置日历跳转的日期 | `(date)` 参数接收日期字符串或者`Date`对象 |
## Slots
| name | description |
| ------------ | ----------------- |
| header-left | 日历顶部左边 slot |
| header-right | 日历顶部右边 slot |
## Scope-slots
| name | description |
| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| default | scopslot 返回对象的参数{ isPrevMonth, isPrevLastDay, isNextMonth, isNextFirstDay, isToday, isCurMonth, data, date }, { data } 是一个数组，里面包含匹配日期的所有数据 |
| body | scope slot中返回所有日期对象，数据结构为6*7的矩阵，日期对象与上方的日期对象一样 |