himmas-vue-calendar

v1.3.3

Published

3 years ago

A calendar component for Vue.js

Downloads

0High
0Medium
0Low

kylin

calendar custom vue

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