daisy-calendar v0.1.8

自定义日历

一、使用流程

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: "一", "二", "三", "四", "五", "六", "日"

属性

事件

插槽