A calendar component for Vue.js

Overview

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
You might also like...
A lightweight calendar component for Vue2

vue2-calendar Check out the demo here on Code Sandbox: Introduction This is a simple and small event calendar component for Vue js. It is very lightwe

vue calendar fullCalendar. no jquery required. Schedule events management
vue calendar fullCalendar. no jquery required. Schedule events management

##vue-fullcalendar Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only su

An elegant calendar and datepicker plugin for Vue.
An elegant calendar and datepicker plugin for Vue.

An elegant calendar and datepicker plugin for Vuejs. npm i --save v-calendar Documentation For full documentation, visit vcalendar.io. Attributes High

Vue.js wrapper for TOAST UI Calendar

Vue TOAST UI Calendar A Vue.js wrapper for TOAST UI Calendar Installation npm install --save tui-calendar @lkmadushan/vue-tuicalendar Usage Example Tr

Toast UI Calendar for Vue

TOAST UI Calendar for Vue This is Vue component wrapping TOAST UI Calendar. 🚩 Table of Contents Collect statistics on the use of open source Install

A Vue JS full calendar, no dependency, no BS. :metal:

vue-cal A Vue JS full calendar, no dependency, no BS. 🤘 Installation npm i vue-cal Vue 3 npm i [email protected] Demo & Documentation antoniandre.github

A full 12-Month view calendar made by vue.js.
A full 12-Month view calendar made by vue.js.

English | 繁體中文 There is no full year (12 months on a page) calendar right now, the Vue-material-year-calendar is designed to solve this problem. 🔥 12

Simple and clean calendar written in Vue.js
Simple and clean calendar written in Vue.js

Vuelendar Simple and clean calendar written in Vue.js. Check out full Vuelendar's documentation here. Features Select single date Select range of date

Full Calendar based on Vue.js

Vue Spring Calendar It's a Vue based component which provides the functionality of a full-calendar that shows daily events. Installation npm install v

Comments
  • custom class

    custom class

    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!

    opened by jiaoguanwen 0
Owner
Kylin
Kylin
A vue component for lunar calendar.

vue-lunar-calendar A vue component for lunar calendar. Uses Moment.js for date operations. This is the Korean lunar calendar. It is different from Chi

Kim WooHyun 70 Aug 20, 2022
Simple Vue component to show a month-grid calendar with events

VueSimpleCalendar Introduction vue-simple-calendar is a flexible, themeable, lightweight calendar component for Vue that supports multi-day scheduled

Richard Tallent 762 Jan 3, 2023
A simple infinite calendar component in Vue 2

vue-infinite-calendar A simple infinite calendar component in Vue 2 Build Setup # install dependencies npm install # serve with hot reload at localho

Rares S 15 Feb 28, 2022
A calendar component for Vue.js

calendar Chinese This is a calendar component based on vue.js . support custom content. No dependencies. Currently, It only supports month view. You c

Kylin 47 Aug 16, 2022
vue 2.x calendar component

vue2-calendar vue 2 calendar, datepicker component which supported lunar or date event Live Demo >> This project is not only a vue component, but also

Terry Cai 485 Dec 18, 2022
Vue.js Functional Calendar | Component/Package

Vue Functional Calendar Modern calendar and datepicker module for Vue.js Demo Demo: https://y3jnxov469.codesandbox.io/ Lightweight, high-performance c

Manuk 425 Dec 27, 2022
📅 A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+

?? A calendar component for vue3.0. Support gesture sliding, range selection, according to the week switch...

飞翔的荷兰人 434 Jan 3, 2023
a horizontal calendar component for Vue.js

a horizontal calendar component for Vue.js

jacques 37 Aug 10, 2022
A simple vue calendar component. Base for further development and styling.

vue-simple-calendar A simple vue calendar component with minimal css. A base for further development/styling. DEMO Dependencies date-fns, lodash-es In

Roman Ranniew 6 Jun 15, 2022
Calendar component

vue-calendar-picker Calendar component vue-calendar-picker demo on jsfiddle Example - basic <template> <calendar></calendar> </template> <script>

Franck Freiburger 47 Nov 24, 2022