Numbers Produce Meaning

    vue-scheduling-calendar

    0.1.6 • Public • Published

    VueSchedulingCalendar

    一个用于排班展示的的 vue 日历组件

    展示图

    安装

    npm install vue-scheduling-calendar -S
    或者
    yarn add vue-scheduling-calendar

    使用

    main.js中引入插件并注册

    #main.js
    import VueSchedulingCalendar from "vue-scheduling-calendar";
    import "vue-scheduling-calendar/dist/vue-scheduling-calendar.css";
    Vue.use(VueSchedulingCalendar)
    在main.js中引入插件并注册

    在项目中使用 VueSchedulingCalendar

    <template>
      <Vue-scheduling-calendar />
    </template>

    参数

    参数 类型 必填 默认 说明
    showCalendar Boolean false true 控制日历是否显示
    mainColor String false #148eeb 主要颜色
    showCurrentDate Boolean false true 是否突出显示默认日期
    itemBorderRadius Boolean false true 日期点击按钮圆角
    currentTextColor String false #148eeb 选中字体颜色
    currentBackgroundColor String false "#eaf3fc" 选中项的背景颜色
    dateMonth String false ${new Date().getFullYear()}-${new Date().getMonth() + 1} 传入的年月 如2021-04-19或者2021/04/19,不传默认当前年月

    事件

    事件名 说明 回调参数
    dayClick 日历按钮点击事件,返回值年月日 YYYY-MM-DD或者YYYY/MM/DD

    slot

    名称 说明
    dataItem 作用域插槽,为每个日历的每一项内容,插槽内容在日期的下面居中展示,组件会给插槽绑定当前的日期内容,插槽内容v-slot:dataItem="slotProps" slotProps.item即为当前循环项,详见example
    footer 底部注脚,可插入一些图例之类的

    License

    MIT license

    Keywords

    none

    Install

    npm i vue-scheduling-calendar

    DownloadsWeekly Downloads

    0

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    300 kB

    Total Files

    11

    Last publish

    Collaborators

    • wzhdev