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>
相关推荐
Orange_sparkle3 小时前
若依使用基本步骤
java·vue
肖祥13 小时前
uni-app x封装request,统一API接口请求
vue
阿喵派我来抓鱼16 小时前
深入理解 AI 流式接口:从请求到响应的完整解析
react.js·ai·前端框架·vue
Ciito1 天前
查看Vue项目当前的Vue CLI版本号
vue
肖祥1 天前
uni-app x使用uview-plus
vue
dcloud_jibinbin1 天前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
龙仔CLL2 天前
vue3下载图片,pdf,excle,word通用函数
pdf·vue·word
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
瓯雅爱分享4 天前
Java+Vue构建的采购招投标一体化管理系统,集成招标计划、投标审核、在线竞价、中标公示及合同跟踪功能,附完整源码,助力企业实现采购全流程自动化与规范化
java·mysql·vue·软件工程·源代码管理