Vuetify日历组件（v-calendar）的使用实践案例讲解

Vuetify 日历组件的使用教程

本文以自身使用场景为主题介绍 Vuetify 日历组件的用法，展示如何结合该组件处理日历上的事件、按钮、以及如何管理和显示支出和收入的流水数据。更多信息请查阅 Vuetify 官网资料。

在本文中，将重点介绍如何使用 Vuetify 日历组件及相关的插槽和功能，来展示一个日历页面，其中包括跨天显示事件、日期点击事件和动态按钮添加功能。

本文代码示例来自老狗开源的账本软件：【cashbook】

一、准备工作

在本教程中，使用的是 Vuetify 3.x 或更高版本，并且假设您已经在项目中正确安装和配置了 Vuetify。

由于该日历组件还在实验室阶段，是一个较新的组件，所以需要使用比较新的版本，如果你不知道哪个版本之后可以用该日历，建议查阅官网资料！

首先确保您已经引入了必要的 Vuetify 组件：

typescript
import { VCalendar } from "vuetify/labs/VCalendar";  // 引入 Vuetify 日历组件

接着，我们会通过 v-calendar 组件显示一个日历，并展示一些自定义的事件和按钮。

二、日历组件的基本用法

vue
<v-calendar
  ref="calendar"
  :month="nowMonth"
  :year="nowYear"
  :events="events"
>
  <!-- 日历头部插槽，自定义日历头部显示内容 -->
  <template v-slot:header="{ title }">
    <div class="calendar-header">
      <div>
        总收入：<b>{{ getInMonth() }}</b> &nbsp;
        总支出：<b>{{ getOutMonth() }}</b>
      </div>
      <div>
        <v-btn icon @click="changeDate('prev-month')">
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
        <h3>{{ dayToMonth(nowDate) }}</h3>
        <v-btn icon @click="changeDate('next-month')">
          <v-icon>mdi-chevron-right</v-icon>
        </v-btn>
      </div>
      <div>
        <v-btn color="primary" @click="showMonthAnalysis(dayToMonth(nowDate))">
          当月分析
        </v-btn>
      </div>
    </div>
  </template>

  <!-- 日历事件插槽，用于显示自定义事件 -->
  <template v-slot:event="{ day, allDay, event }">
    <div v-if="event.type === 'button'" class="event-button">
      <v-btn size="small" color="rgba(3, 150, 200, 0.5)" icon="mdi-plus" @click="addFlow(day)">
      </v-btn>
    </div>
    <p v-if="event.type === 'data'" class="event-data">
      <v-chip class="event-chip" :class="event.out ? outMoneyClass(event.money) : inMoneyClass(event.money)">
        {{ event.title }}: {{ event.money.toFixed(2) }}
      </v-chip>
    </p>
  </template>
</v-calendar>

v-slot:header 插槽用于自定义日历头部显示内容。在这里，我们展示了总收入和总支出。
v-slot:event 插槽用于自定义事件显示。根据事件类型（例如按钮或数据事件），我们在日历上添加按钮或数据记录。

三、日历事件的管理

在该示例中，我们动态管理事件，首先为每一天添加一个“按钮”类型的事件，然后根据当天的流水数据，更新或新增收入与支出事件。

1. 初始化事件数据

javascript
const events = reactive<CalendarDate[]>([]);

const initDailyButton = () => {
  const daysInMonth = new Date(nowYear.value, nowMonth.value + 1, 0).getDate(); // 获取本月的天数

  for (let day = 1; day <= daysInMonth; day++) {
    const buttonTitle = `button-${nowYear.value}-${nowMonth.value}-${day}`;
    const existingEvent = events.find(e => e.title === buttonTitle);
    if (!existingEvent) {
      events.unshift({
        type: "button",
        title: buttonTitle,
        day: `${nowYear.value}-${nowMonth.value + 1}-${day}`,
        start: new Date(`${nowYear.value}-${nowMonth.value + 1}-${day}`),
        end: new Date(`${nowYear.value}-${nowMonth.value + 1}-${day}`),
        color: "",
        allDay: true,
        out: false,
        money: 0,
      });
    }
  }
};

在 initDailyButton 函数中，我们为每个月的每一天添加一个“按钮”事件。这个事件的类型为 "button"，并为每一天设置了 start 和 end 时间，都是当天。

2. 添加收入与支出数据事件

通过 addFlow 方法，您可以动态为日历中的特定日期添加流水事件。根据流水类型（收入或支出），在相应的日期事件上添加或更新数据。

javascript
const addFlow = (day: any) => {
  addFlowItem.value.day = day.isoDate;
  showFlowEditDialog.value = true;
};

const addFlowSuccess = (flow: Flow) => {
  const dayEvents = events.filter((e) => e.day === flow.day);
  const isOutFlow = flow.flowType === "支出";
  const matchingEvent = dayEvents.find((e) => e.out === isOutFlow);

  if (matchingEvent) {
    matchingEvent.money += flow.money;
  } else {
    events.push({
      start: new Date(flow.day),
      end: new Date(flow.day),
      allDay: true,
      out: isOutFlow,
      money: flow.money,
      title: isOutFlow ? "支出" : "收入",
      type: "data",
      day: flow.day,
    });
  }
};

addFlow：用来弹出编辑流水的对话框，并将选择的日期传递给它。
addFlowSuccess：处理用户编辑或新增的收入或支出，更新或添加事件。

四、日期与事件交互

在本示例中，日历上的日期和事件进行了深度交互。当用户点击某个日期时，会触发 clickDay 事件，该事件将根据点击的日期查询并展示该日期的收入或支出数据。

javascript
const clickDay = (day: string | any, flowType?: string) => {
  if (day == "") {
    query.value.startDay = dateFormater("YYYY-MM-dd", new Date(nowDate.value.getFullYear(), nowDate.value.getMonth(), 1));
    query.value.endDay = dateFormater("YYYY-MM-dd", new Date(nowDate.value.getFullYear(), nowDate.value.getMonth() + 1, 0));
  } else {
    query.value.startDay = day;
    query.value.endDay = day;
  }
  if (flowType) {
    query.value.flowType = flowType;
  } else {
    query.value.flowType = "";
  }
  showFlowTable.value = true;
};

通过这种方式，您可以动态查询并显示每个日期的流水数据。

五、结尾

本文展示了如何在 Vuetify 的日历组件中，结合事件和按钮来实现一个收入支出的流水管理系统。通过使用 v-calendar 的插槽功能，我们能够灵活地展示日期、事件和操作按钮，以满足特定的使用场景需求。更多关于 Vuetify 日历组件的详细资料，请查阅 Vuetify 官网。

目录