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>
相关推荐
是梦终空1 天前
计算机毕业设计241—基于Java+Springboot+vue的爱心公益服务系统(源代码+数据库+11000字文档)
java·spring boot·vue·毕业设计·课程设计·毕业论文·爱心公益系统
麦麦大数据1 天前
D025 摩托车推荐价格预测可视化系统|推荐算法|机器学习|预测算法|用户画像与数据分析
mysql·算法·机器学习·django·vue·推荐算法·价格预测
七仔的博客1 天前
Vue视差标题背景
vue·博客·动画·视差
梁辰兴1 天前
企业培训笔记:外卖平台后端--套餐管理模块--回显套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
Olrookie2 天前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
duansamve2 天前
Vue3和vue2的Diff算法有何差异?
vue·vue3·vue2·diff
java_强哥2 天前
vue3-tree-org实现组织架构图展示
vue
huangyiyi666662 天前
轮询那些事儿
javascript·前端框架·vue·js
七仔的博客2 天前
博客的加载速度和大小的优化、优化再优化
vue·博客·优化·gzip·live2d
duandashuaige3 天前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html