calendar

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.

View demo Download Source

Install

npm

$ npm install himmas-vue-calendar

script

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

Usage

Global Registration

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

import Calendar from 'himmas-vue-calendar'
Vue.use(Calendar)

//...

new Vue({
  el: '#app',
  render: h => h(App)
})


<!--app.vue-->
<template>
  <div id="app">
    <!-- 'kl-' prefix -->
    <kl-calendar height="800px" width="800px"/>
  </div>
</template>

<script>

  export default {
    name: 'App'
  }
</script>

Local Registration

<!--app.vue-->
<template>
  <div id="app">
    <calendar height="800px" width="800px"/>
  </div>
</template>

<script>
  import Calendar from 'himmas-vue-calendar'
  export default {
    name: 'App',
    components:{Calendar}
  }
</script>

Attributes

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
show-lunar whether lunar info is visible.if render-content is has been defined, this attribute does not work) Boolean true/false true
show-festival whether festival is visible.if render-content is has been defined, this attribute does not work Boolean true/false true
show-term whether solar terms is visible.if render-content is has been defined, this attribute does not work Boolean true/false true
week-count the number of weeks Number - 5
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) -
before-render callback before rendering Function(year,month,next) -

Events

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

Methods

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

date

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

example

  • default

  • custom example

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  .date-box {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .first-info{
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
  }
  .second-info{
    flex: 1;
    display: flex;
    justify-content: center;
    color: #999;
    font-size: 12px;
  }
  .second-info.festival{
    color: #f43;
  }
  .sign{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: #f43;
    width: 20px;
    height: 20px;
    color: #fff;
    line-height: 20px;
    text-align: center;
  }
  .date-box.today{
    background: #fb0;
    color: #fff;
  }
  .date-box.today .second-info{
    color: #fff;
  }
  .weekend{
    background: #f6f8fa;
  }
  .holiday .sign{
    display: block;
  }
  .date-box.other-month .second-info,.date-box.other-month .first-info{
    color: #999;
  }
  .date-box:hover{
    border: 3px solid #fb0;
  }
</style>
<body>
<script src="./lib/vue.min.js"></script>
<script src="../dist/vue-calendar.js"></script>
<div id="app">
  <kl-calendar width="600px" height="500px"
               :render-content="renderContent"
               :week-title="weekTitle"
               :border="false"
               :before-render="beforeRender"
               @year-change="changeHandle"
               @month-change="changeHandle"

  />
</div>
<script>

  Vue.use(Calendar)

  new Vue({
    el: '#app',
    data() {
      return {
        weekTitle: ['日', '一', '二', '三', '四', '五', '六'],
        holiday: [
          '2018-01-01',
          '2018-02-15',
          '2018-02-16',
          '2018-02-17',
          '2018-02-18',
          '2018-02-19',
          '2018-02-20',
          '2018-02-21',
        ]
      }
    },
    methods: {
      twoDigit:function(num){ return ('000'+num).slice(-2) },
      renderContent(h, data) {
        var {isToday,isWeekend,isOtherMonthDay, year, day, month, renderYear, renderMonth, lunar, weekDay, festival, term} = data

        // lunar info
        var {lunarDayChiness} = lunar

       
        var secondInfo = festival ?
          festival : (term ? term : (lunarDayChiness || ''))

        var dateStr = `${year}-${this.twoDigit(month)}-${this.twoDigit(day)}`

        var isHoliday = (!!~this.holiday.indexOf(dateStr)) || isWeekend

        return h('div', {
          class: {
            'date-box': true,
            'today':isToday,
            'weekend':isWeekend,
            'holiday':isHoliday,
            'other-month':isOtherMonthDay
          }
        }, [h('div',{
          class: {
            'first-info': true
          }
        },day),h('div',{
          class: {
            'second-info': true,
            'festival':festival
          }
        },secondInfo),h('div',{
          class: {
            'sign': true
          }
        },'休')])
      },
      beforeRender(year,month,next){
        console.log('before-render',year,month)
        next()
      },
      changeHandle(year,month){
        console.log('change',year,month)
      }
    }
  })
</script>
</body>
</html>

tips

  • 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

GitHub