Vue component weekcalender

typescript+vue开发的日历组件,使用swiper库来支持日历滑动功能,简单易用

Version: 1.1.1 Updated: 08/07/2018

By: ljcheibao License: MIT

Downloads Last 30 Days: 51

vue 日历(以周为单位)组件

typescript+vue开发的日历组件,使用swiper库来支持日历滑动功能,简单易用

npm NPM Version npm

代码示例

image image

  • 安装组件包

      npm install vue-component-weekcalender --save-dev
  • js代码(没有自定义(reset=false的情况)日期状态的实例)

    import Vue from 'vue';
    import VueWeekcalender from "vue-component-weekcalender";
    
    new Vue({
    el: '#app',
    components: {
      VueWeekcalender
    },
    data() {
      return {
        options: {
          showHeader: true,
          beginDate: "2018-07-30",
          endDate: "2018-08-12",
          currentDate: "2018-08-03"
        }
      }
    },
    methods: {
      chooseDayItemHandle: function (dayItem) {
        console.log(dayItem)
      },
    
      slideChangeHandle:function(item) {
        console.log(item);
      }
    }
    });
  • html模板

    <div id="app">
      <vue-weekcalender 
       @on-slide="slideChangeHandle"
       @on-click="chooseDayItemHandle"
       :option="options">
      </vue-weekcalender>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="./dist/index.js"></script>

  • 自定义日期每天状态的实例(reset=true的情况)

    import "./index.less";
    import Vue from 'vue';
    import VueWeekcalender from "vue-component-weekcalender";
    
    new Vue({
      el: '#app',
      components: {
        VueWeekcalender
      },
      data() {
        return {
          options: {
            showHeader: true,
            beginDate: "2018-07-01",
            endDate: "2018-09-16",
            currentDate: "2018-08-04"
          },
          reset: true,
          dayStatus: [{
            currentDate: "2018-08-13",
            dayClass: "day enabled",
            enabled: true,
            default: true
          }, {
            currentDate: "2018-08-14",
            dayClass: "day enabled",
            enabled: true,
            default: false
          }]
        }
      },
      methods: {
    
        changeStatus:function() {
          this.dayStatus= [{
            currentDate: "2018-08-04",
            dayClass: "day enabled",
            enabled: true,
            default: true
          }, {
            currentDate: "2018-08-14",
            dayClass: "day enabled",
            enabled: true,
            default: false
          }]
        },
    
        chooseDayItemHandle: function (dayItem) {
          console.log(dayItem)
        },
    
        slideChangeHandle: function (item) {
          console.log(item);
        }
      }
    });
  • html模板

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    
    <body style="margin:0;">
      <div id="app">
        <button @click="changeStatus">修改状态</button>
        <vue-weekcalender 
         @on-slide="slideChangeHandle"
         @on-click="chooseDayItemHandle"
         :option="options"
         :reset="reset"
         :status= "dayStatus">
        </vue-weekcalender>
      </div>
      <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
      <script src="./dist/index.js"></script>
    </body>
    
    </html>

组件API

  • calender props
属性 说明 类型 默认值
option option对象提供4个属性值:

showHeader(是否显示标题),
beginDate(开始时间:yyyy-MM-dd格式),
endDate(结束时间:yyyy-MM-dd格式),
currentDate(当前时间:yyyy-MM-dd格式)
object 空对象
reset 是否需要重置初始化生成的日历的每天日期,默认值为false,
该值设置为true以后,使用者可设置status属性,来自定义修改生成的日历每天日期状态,原来日历中每一项均不可点,即每一项的
enabled属性会被重置为false
boolean false
status 需要自定义的日期状态数组(reset属性为true有效),
数组的每一项是个object对象,对象提供一下几个属性:
currentDate:当前日期格式yyyy-MM-dd
dayClass:当前日期显示的样式名称
enabled:boolean类型,是否可用(可以点击)
default:boolean类型,是否是默认选中的一天,true为默认选中的一天,
需要注意的是,status的数组对象中,仅有一项default的值为true(有多个日期为选中状态,不符合实际需求吧)
Array []
  • calender events
方法名称 说明 参数
on-click 日历上某一天触发 当前日期对象,对象有以下属性:

currentDate:选中的日期,格式:yyyy-MM-dd,
dayClass:类名称,
dayDesc/day:几号,如:2,
enabled:是否可以点击,true表示可以点击
on-slide 左右滑动日历触发 返回滑动到的下一个日历的第一天日期,格式:yyyy-MM-dd格式

组件开发说明

  • 安装依赖

    npm/cnpm install
  • 编译

    npm run build
  • demo运行

    # cd test
    # npm/cnpm install
    # npm run build
    
    #把test目录的index.html在浏览器打开,切换到移动的端模拟器,可以预览在手机端的展示结果

    备注

    相互学习共同提高,欢迎使用并且issue

Categories: Vue js