vue3日历组件库Vue-Cel使用

安装

js 复制代码

npm i vue-cal

js 复制代码

<template>
  <div class="calendar-container">
    <!-- 这个日历双击可以跳转到下一个周期,但是我项目不允许点击,没找到相关的禁用事件,这里写个蒙层阻止点击 -->
    <div class="mask"></div>
    <!-- 日历
     startWeekOnSunday:从周天开始算,默认是周一
     active-view:显示的视图(月视图)
     hide-view-selector:隐藏切换视图的按钮
     hide-title-bar:隐藏标题栏
     xsmall:小尺寸(默认大尺寸)
     events:自定义数据
     -->
    <vue-cal
      :selected-date="selectedDate"
      hide-view-selector
      hide-title-bar
      startWeekOnSunday
      xsmall
      active-view="month"
      :events="events"
      events-count-on-year-view
    >
      <template #events-count="{ events, view }">
        <!-- 显示自定义数据(events是个数组,只有一个对象,也就是选中0号元素即可) -->
        <div class="data">{{ events[0].count }}</div>
      </template>
    </vue-cal>
  </div>
</template>

<script setup>
import { ref } from "vue";
import "vue-cal/dist/vuecal.css";
import VueCal from "vue-cal";

const selectedDate = ref("2024-10-19"); // 默认打开的月份和日期
const events = ref([
  // 具有特殊事件特殊样式的日期(start和end必须都要有，可以直接指定范围，如果相同代表某一天)
  // 可以自定义一些数据传入
  {
    start: "2024-10-19",
    end: "2024-10-19",
    count: 12, // 自定义的数据
  },
  {
    start: "2024-10-22",
    end: "2024-10-22",
    count: 24, // 自定义的数据
  },
]);
</script>

<style>
.calendar-container {
  width: 100%;
  height: 700px;
  position: relative;
  background-color: #cccccc;
}

/* 遮罩层样式 */
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* 特殊日期的样式 */
.data {
  position: relative;
  top: 0;
  right: 0;
  color: red !important;
}

/* 隐藏默认的单元格边框 */
.vuecal__cell:before {
  border: none !important;
}
/* 隐藏外层单元格边框 */
.vuecal {
  box-shadow: none !important;
}
/* 隐藏周几的边框 */
.vuecal__weekdays-headings {
  border: none !important;
}
/* 隐藏选中的日期或者默认的今天日期 */
.vuecal__cell--today,
.vuecal__cell--selected {
  background-color: transparent !important;
}
/* 设置插槽的样式 */
.vuecal__cell-events-count {
  width: 0.52rem !important;
  height: 0.52rem !important;
  border-radius: 50% !important;
  right: 0 !important;
  top: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
}
/* 设置单元格的样式 */
.vuecal__cell-content {
  width: 0.52rem !important;
  height: 0.52rem !important;
  background-color: #22222233 !important;
  border-radius: 50% !important;
}
/* 恢复flex-grow默认的样式 */
.vuecal__flex[column] {
  flex-grow: initial !important;
}
/* 单元格内某日的文本样式 */
.vuecal__cell-date {
  font-family: PlusJakartaSansRegular;
  font-size: 0.24rem !important;
  color: #00000080 !important;
}
/* 周几的文本样式 */
.vuecal__flex.weekday-label {
  font-family: PlusJakartaSansMedium;
}
/* 隐藏其他非当前选择的月份的天数 */
.vuecal__cell--out-of-scope {
  opacity: 0 !important;
}
/* 设置顶部周几单元格的样式 */
.vuecal__heading {
  height: 0.5rem !important;
}
/* 设置单元格的样式 */
.vuecal__cell {
  margin-top: 0.3rem !important;
  height: 0.5rem !important;
}
/* 更多其他的样式各位可以浏览器自己查看,覆盖原有样式即可 */
</style>