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.
$ npm install himmas-vue-calendar
<script src='dist/vue-calendar.js'>//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><!--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>| 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 |
-
<!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>
- IE9- not support
- based on vue.js v2.1.5+
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build