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>
相关推荐
寻觅~流光15 小时前
封装---统一封装处理页面标题
开发语言·前端·javascript·vue.js·typescript·前端框架·vue
好青崧15 小时前
单页面和多页面的区别和优缺点
前端·vue
程序猿小D16 小时前
[附源码+数据库+毕业论文+答辩PPT+部署教程+配套软件]基于SpringBoot+MyBatis+MySQL+Maven+Vue实现的交流互动管理系统
spring boot·mysql·vue·mybatis·毕业论文·答辩ppt·交流互动
好青崧1 天前
v-show和v-if的区别
vue
一笑code2 天前
UC浏览器PC版自2016年后未再更新不支持vue3
前端·vue
咔咔一顿操作2 天前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
梁辰兴3 天前
企业培训笔记:Vue3前端框架配置
笔记·前端框架·npm·vue·vue3·node
一斤代码3 天前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
sunbyte3 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
普宁彭于晏4 天前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue