/daisy-calendar

vue日历组件（vue-calendar），可高度自定义使用方法

Primary LanguageHTML

自定义日历

一、使用流程

1.安装

npm install daisy-calendar

2.导入

import calendar from "daisy-calendar";
Vue.use(calendar);

3.基本使用

<div style="width:100%;height:400px;">
    <calendar></calendar>
</div>

4.自定义显示方式

例如每月 1 号需要显示为“开始”字样，当然你可以做任何 diy，包括每天使用 canvas 画出也可以

<div style="width:100%;height:400px;">
    <calendar>
        <template #default="{date, tool}" class="day-holder">
          <div v-if="tool.isSameMonth">
            <div v-if="date.getDate() == 1">
              <span>开始</span>
            </div>
            <div v-else>
              {{ date.getDate() }}
            </div>
          </div>
        </template>
    </calendar>
</div>

二、属性、事件、插槽

seedDate: new Date(), startOfWeek: 1, mondayToSunday: ["一", "二", "三", "四", "五", "六", "日"]

属性

属性名 含义 默认值
seedDate 使用该属性计算默认显示的月份 当天
startOfWeek 一周第一天是星期几，0-6 分表表示周天到周六 1
mondayToSunday 周一到周天分别对应的 text 是什么 中文“一到日”

事件

事件 含义
onDateClick 点击日期触发
onDateChange 选中的日期发生改变时触发
onMonthChange 月份发生天改变时触发

插槽

插槽名 含义 参数
default 绘制日布局的模版 date:格子日期 seedDate：种子日期 tool：判断工具 data：相关数据
navbar 绘制日历导航的模版（上下月按钮、当前年月显示） seedDate：种子日期