Vuejs-Vue calendar: vue-calendar - A simple calendar components for Vue 2.1.5+, support custom content. No dependencies.

calendar

Chinese

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

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

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

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;
      }
      .title-box{
        font-size: 20px;
      }
    </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"
                   :render-title="renderTitle"
    
      />
    </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) },
          renderTitle(h,year,month){
            return h('div', {
              class: {
                'title-box': true
              }
            },[
              h('span',{},year+'年'),
              h('span',{},month+'月')
            ])
          },
          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 = (!!~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

Comments

  • custom class
    custom class

    Aug 14, 2018

    first,thanks for provide this package, it is very useful, but in my project, i need to custom week-title's class, so i change some class in package globally, but when i second use it in my project other place, it works not good, so it is very good to provide a props and so on to custom something, thanks again!

    Reply
  • 清明节和感恩节计算错误
    清明节和感恩节计算错误

    Nov 4, 2019

    看了下,发现2021年4月的清明节计算错误,后面的就没有再仔细的看了,有可能节气间隔时间有误。

    Reply
  • 修复判断是第几周bug
    修复判断是第几周bug

    Nov 5, 2019

    https://github.com/kylin-z/vue-calendar/issues/10

    Reply
  • 通过jsx自定义节日内容填加下拉框
    通过jsx自定义节日内容填加下拉框

    May 13, 2020

    通过jsx自定义节日内容填加下拉框的话,change事件会跟data-click冒泡执行

    Reply
  • i18n
    i18n

    Apr 1, 2018

    Hey, nice calendar! Would be great to add some i18n to support other languages ?

    Reply
  • 你这是怎么改的
    你这是怎么改的

    Jun 1, 2018

    能加个QQ和我简单说一下吗?是直接改src的文件,然后在webpack打包吗?用的是webpack的那个命令? 我的QQ:1284825730

    Reply
  • 单元格的高度自适应以及背景颜色
    单元格的高度自适应以及背景颜色

    Apr 2, 2018

    有example么,对前端还不太熟悉

                                                                                                                                                                                                           
    Reply
  • 怎么传日期进去呢
    怎么传日期进去呢

    Apr 2, 2018

    不自动选择当前日期,自己传日期进去显示传入日期的月份

    Reply
  • 为什么我把style粘进去没什么效果呢
    为什么我把style粘进去没什么效果呢

    Mar 29, 2018

    custom example里面放到我的component之后没效果

    Reply
  • 能不能添加个副标题
    能不能添加个副标题

    Mar 30, 2018

    在顶部年月之后添加副标题

                                                                                                                                                                                                           
    Reply