fix: calendar

Author: Ninjaxsh

package.json

@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@howbizarre/vue-month-calendar": "^1.4.5",
     "@vueuse/core": "^10.11.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "5.1.10",

src/views/house/resold-calendar/index.vue

@@ -1,126 +1,11 @@
-<template>
-  <div class="app-container">
-    <!-- Echarts 图表 -->
-    <el-row :gutter="10">
-      <el-col :span="8" :xs="24" :sm="24" :lg="24" :key="chartId">
-        <div class="elcol">
-          <div>
-            <VueMonthCalendar
-              v-if="isMounted"
-              @get-date="getDate"
-              @change-year="changeYear"
-              @change-month="changeMonth"
-              @decrement-year="decrementYear"
-              @increment-year="incrementYear"
-              @next-month="nextMonth"
-              @prev-month="prevMonth"
-              @reset-month="resetMonth"
-              @change-first-week-day="changeFirstWeekDay"
-              :setEvents="setEvents"
-            />
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { VueMonthCalendar } from "@howbizarre/vue-month-calendar";
-import "@howbizarre/vue-month-calendar/dist/style.css";
-import { ref, onMounted } from "vue";
-
-const chartId = ref("resold-month-calendar");
-const isMounted = ref(false);
-
-const setEvents = [
-  {
-    date: 29,
-    month: 6,
-    year: 2024,
-  },
-];
-
-function getDate(activeDate: { month: number; year: number; date: number }) {
-  console.group("The returned data is:");
-  console.log("Day: ", activeDate.date);
-  console.log("Month: ", activeDate.month);
-  console.log("Year: ", activeDate.year);
-  console.groupEnd();
-}
-
-function changeYear(yearValue: number): void {
-  console.log("Change Year to: ", yearValue);
-}
-
-function changeMonth(monthValue: number): void {
-  console.log("Change Month to: ", monthValue);
-}
-
-function decrementYear(decYear: number): void {
-  console.log("Decrement Year: ", decYear);
-}
-
-function incrementYear(incYear: number): void {
-  console.log("Increment Year: ", incYear);
-}
-
-function nextMonth(nextMonth: number): void {
-  console.log("Next Month: ", nextMonth);
-}
-
-function prevMonth(prevMonth: number): void {
-  console.log("Previous Month: ", prevMonth);
-}
-
-function resetMonth(resetMonth: number): void {
-  console.log("Reset Month: ", resetMonth);
-}
-
-function changeFirstWeekDay(firstWeekDay: number): void {
-  console.log("Change First Week Day: ", firstWeekDay);
-}
-
-onMounted(() => (isMounted.value = true));
+defineOptions({
+  name: "",
+});
 </script>
 
-<style lang="scss" scope>
-.item {
-  display: flex;
-
-  /* 水平居中对齐, flex-end右对齐 */
-  flex-wrap: wrap;
-  justify-content: center;
-  width: 100px;
-  height: 98px;
-  border: 1px solid #ccc;
-}
-
-.dian {
-  width: 30px;
-  height: 30px;
-  border: 1px solid #000;
-  border-radius: 50px;
-}
-
-.elcol {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.flex-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
+<template>
+  <div>test</div>
+</template>
 
-.flex-item {
-  align-self: flex-end;
-  width: 100px;
-  height: 100px;
-  margin: 10px;
-  background-color: #ccc;
-}
-</style>
+<style lang="scss" scoped></style>