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>
相关推荐
百锦再19 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
飞翔的佩奇1 天前
Java项目:基于SSM框架实现的忘忧小区物业管理系统【ssm+B/S架构+源码+数据库+毕业论文+开题报告】
java·数据库·mysql·vue·毕业设计·ssm框架·小区物业管理系统
百锦再3 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code3 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16883 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员3 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_3 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte4 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj13 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D13 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台