Vue2 Calendar Component

Full calendar base on Vue2 and dayjs. Support month and week view. Custom date item style with scopeSlots.

中文文档

📺Live demo

Install

// npm
npm install vue2-event-calendar --save

// yarn
yarn add vue2-event-calendar

Import and Usage

Import

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

Or import as a component

import 'vue2-event-calendar/dist/vue2-event-calendar.css'
import { Calendar } from 'vue2-event-calendar'
// ...

export default {
  components: { Calendar }
}

Common usage

<!-- 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>

Get full control use body slot. Data structure is a matrix and the size is 6*7.

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

  <template v-slot:body="{ data }">
    <transition name="fade">
      <div class="calendar-body-grid" :key="indentifier">
        <div v-for="(row, index) in data"
          :key="index"
          class="calendar-body-row">
          <div v-for="col in row"
            :key="col.date.date"
            :class="['calendar-item', { 'is-otherMonth': !col.isCurMonth }]">
            <div
              :class="['calendar-item-date']">
              {{col.date.date}}
            </div>
            <div class="calendar-item-name">{{col.data.title}}</div>
          </div>
        </div>
      </div>
    </transition>
  </template>
</Calendar>

Customize header use renderHeader props

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

Props

parameter	description	type	default	acceptable value
startDate	calendar start date	String, timestamp, Date	new Date()
dateData	calendar data, item object must have date params to match date(params key can use matchKey to modify)	Object, Array
matchKey	if dateData is Array, specify which key of dateData object as calendar date match key	String	date
locale	set weekdays locale text, custom this text use weekDateShort props. If want to use custom local, use weekLocaleData customize you locale	String	en	zh-cn, en
weekLocaleData	set body weekdays text, begin with sunday, if set this props, locale will be not work	array
firstDay	start day of the week, 0 to 6, 0 as Sunday	Number	0	0 - 6
mode	component view mode	String	month	month, week
prefixCls	component style namespace	String	vue-calendar
renderHeader	redner function for header	Function({ prev, next, selectedDate })

Event Props

parameter	description	params
onMonthChange	trigger when calendar date change	(date) parameter has two key startDay and endDay of selected month
onPrev	trigger after clicking the prev button	same as onMonthChange param
onNext	trigger after clicking the next button	same as onMonthChange param

Methods

name	description	params
changeDate	set calendar display month	(date) accept String or Date Object

Slots

name	description
header-left	header left panel
header-right	header right panel

Scope-slots

name	description
default	custom content for date item, the scope param is { isPrevMonth, isPrevLastDay, isNextMonth, isNextFirstDay, isToday, isCurMonth, data, date }, { data } is an Array, include all matching date data
body	return all date item in scope param, data structure is a 6*7 matrix, and the date item is same as default scope slot