Skip to content
A calendar component for Vue.js
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist 修复右侧按钮显示bug Jun 1, 2018
example defaultDate Apr 2, 2018
src/calendar 修复右侧按钮显示bug Jun 1, 2018
test defaultDate Apr 2, 2018
.babelrc init Feb 6, 2018
.editorconfig init Feb 6, 2018
.gitignore dist Feb 6, 2018 修改默认行数 Apr 3, 2018 修改默认行数 Apr 3, 2018
index.html init Feb 6, 2018
package-lock.json webpack配置添加output.library output.libraryTarget 以修复导出为{}的bug Feb 6, 2018
package.json 修复右侧按钮显示bug Jun 1, 2018
webpack.config.js readme Feb 7, 2018



This is a calendar component based on vue.js . support custom content. No dependencies. Currently, It only supports month view. You can click the control button to change the month.

Simple Live Demo



$ npm install himmas-vue-calendar


<script src='dist/vue-calendar.js'>


Global Registration

import Vue from 'vue'
import App from './App.vue'

import Calendar from 'himmas-vue-calendar'


new Vue({
  el: '#app',
  render: h => h(App)
  <div id="app">
    <!-- 'kl-' prefix -->
    <kl-calendar height="800px" width="800px"/>


  export default {
    name: 'App'

Local Registration

  <div id="app">
    <calendar height="800px" width="800px"/>

  import Calendar from 'himmas-vue-calendar'
  export default {
    name: 'App',


Attribute Description Type Accepted Values Default
width Calendar's width String - 100%
height Calendar's height String - 100%
border whether Calendar has vertical border Boolean true/false true
default-date default render date Date,String anything accepted by new Date() new Date()
show-lunar whether lunar info is visible.if render-content has been defined, this attribute does not work) Boolean true/false true
show-festival whether festival is visible.if render-content has been defined, this attribute does not work Boolean true/false true
show-term whether solar terms is visible.if render-content has been defined, this attribute does not work Boolean true/false true
week-count the number of weeks Number - 6
week-title-align the alignment of head information String left/right/center right
week-title head content Array - ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
render-content render function for date, support jsx Function(h,date) -
show-title whether title bar is visible Boolean true/false true
show-control-btn whether right control btn group is visible.if render-title has been defined, this attribute does not work Boolean true/false true
render-title render function for title bar, support jsx Function(h,year,month) -
before-render callback before rendering Function(year,month,next) -


Event Description params
year-change This event will be fired when the currently rendered year changes year,month
month-change This event will be fired when the currently rendered month changes year,month
date-click This event will be fired when you click a date date


Method Description params
renderThisMonth render a month year, month
getRenderedMonth get the currently rendered month information


render-content second param date

Key Description
date Date Object
year year
month the month of the year
day the day of the month
weekDay the day of the week(0-6)
lunar lunar info
festival festival
term solar term
isToday isToday
isWeekend isWeekend
isOtherMonthDay whether it belongs to the current rendering month
renderYear the current rendering year
renderMonth the current month is rendered
isDefaultDate isDefaultDate


  • default

  • custom example

    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      .date-box {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        flex: 1;
        display: flex;
        justify-content: center;
        color: #999;
        font-size: 12px;
        color: #f43;
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        background: #f43;
        width: 20px;
        height: 20px;
        color: #fff;
        line-height: 20px;
        text-align: center;
        background: #fb0;
        color: #fff;
      } .second-info{
        color: #fff;
        background: #f6f8fa;
      .holiday .sign{
        display: block;
      .date-box.other-month .second-info,.date-box.other-month .first-info{
        color: #999;
        border: 3px solid #fb0;
        font-size: 20px;
    <script src="./lib/vue.min.js"></script>
    <script src="../dist/vue-calendar.js"></script>
    <div id="app">
      <kl-calendar width="600px" height="500px"
      new Vue({
        el: '#app',
        data() {
          return {
            weekTitle: ['', '', '', '', '', '', ''],
            holiday: [
        methods: {
          twoDigit:function(num){ return ('000'+num).slice(-2) },
            return h('div', {
              class: {
                'title-box': true
          renderContent(h, data) {
            var {isToday,isWeekend,isOtherMonthDay, year, day, month, renderYear, renderMonth, lunar, weekDay, festival, term} = data
            // lunar对象中存有农历数据
            var {lunarDayChiness} = lunar
            //第二行展示的数据的优先级为 节日>节气>农历日
            var secondInfo = festival ?
              festival : (term ? term : (lunarDayChiness || ''))
            var dateStr = `${year}-${this.twoDigit(month)}-${this.twoDigit(day)}`
            var isHoliday = (!! || isWeekend
            return h('div', {
              class: {
                'date-box': true,
            }, [h('div',{
              class: {
                'first-info': true
              class: {
                'second-info': true,
              class: {
                'sign': true


  • IE9- not support
  • based on vue.js v2.1.5+

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
You can’t perform that action at this time.