基于Vue2和dayjs的完整日历。支持月和周视图。

安装和下载：

# Yarn
$ yarn add vue2-event-calendar

# NPM
$ npm install vue2-event-calendar --save

使用

Common usage.

// 导入组件
import 'vue2-event-calendar/default.css'
import Calendar from 'vue2-event-calendar'
Vue.component('Calendar', Calendar)

如果你的项目也使用了moment 或者 dayjs，可以使用无依赖版本。

import 'vue2-event-calendar/default.css'
// moment
import Calendar from 'vue2-event-calendar/dist/calendar-nodep.js'

// dayjs
import Calendar from 'vue2-event-calendar/dist/dayjs-nodep.js'
Vue.component('Calendar', Calendar)
// ...

<!-- template -->
<Calendar startDate="2018-03-07" :dateData="data">
  <div slot="header-left">
    <Button>month</Button>
    <Button>week</Button>
  </div>

  <div
    :class="['calendar-item', { 'is-otherMonth': !isCurMonth }]"
    slot-scope="item"
  >
    <div
      :class="['calendar-item-date']">
      {{item.date.date}}
    </div>
    <div class="calendar-item-name">{{item.data.title}}</div>
  </div
</Calendar>

自定义头部

<!-- template -->
<Calendar
  startDate="2018-03-07"
  :renderHeader="renderHeader"
  :dateData="data">
  <!-- content -->
</Calendar>

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])
    }
  }
}