Nourishing Plushie Monster

    himmas-vue-calendar

    1.3.3 • Public • Published

    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

    Install

    npm i himmas-vue-calendar

    DownloadsWeekly Downloads

    11

    Version

    1.3.3

    License

    MIT

    Unpacked Size

    320 kB

    Total Files

    20

    Last publish

    Collaborators

    • kylin