❤
npm
Sign UpSign In

vue-component-weekcalender

1.1.1 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i vue-component-weekcalender

Repository

github.com/ljcheibao/vue-component-weekcalender

Homepage

github.com/ljcheibao/vue-component-weekcalender#readme

Weekly Downloads

4

Version

1.1.1

License

MIT

Unpacked Size

919 kB

Total Files

29

Last publish

Collaborators

  • shangshanruoshui
Try on RunKit
Report malware