vue3日历组件库Vue-Cel使用

官网地址

安装

npm i vue-cal
<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-selectorhide-title-barstartWeekOnSundayxsmallactive-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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/56261.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32单片机(F03C8T6)-点灯(寄存器点灯和库函数点灯)

作者&#xff1a;Whappy 时间&#xff1a;2024.10.9 日志&#xff1a;本实验是我第一个32位单片机实验程序&#xff0c;如有不足请指点&#xff01; #include "stm32f10x.h" // Device headerint main(void) {//寄存器点灯RCC->APB2ENR 0x000…

界面耻辱纪念堂--可视元素03

更多的迹象表明&#xff0c;关于在程序里使用新的动态界面元素&#xff0c;微软的态度是不确定的&#xff0c;其中一个是仅仅需要对比一下Office97 里的“Coolbars”和“标准工具条”。Coolbar 按钮直到用户指针通过的时候才成为按钮&#xff08;否则是平的&#xff09;。 工具…

Monorepo pnpm 模式管理多个 web 项目

Monorepo pnpm 模式管理多个 web 项目 Monorepo pnpm 模式管理多个 web 项目项目地址git flow 工作流程pnpm workspace.npmrc初始化项目架构引入Husky规范git提交配置eslint和prettiereslint 配置prettier 配置 配置lint-staged创建项目创建shared项目全局安装 vue在 packages …

新兴的安全职业挑战

我们经常与安全专业人士交谈&#xff0c;他们希望在努力提升职业发展的同时提高自己的价值并克服组织内部的挑战。在这些谈话中&#xff0c;花费大量时间讨论公司未来将面临的安全问题并不罕见。 安全领导者希望为问题制定计划并获得领导层对其计划的支持。这通常意味着实施修…

025 elasticsearch索引管理-Java原生客户端

文章目录 pom.xml1创建索引2.创建索引并设置settings信息3.创建索引并设置mapping信息4.删除索引库5.给未设置mapping的索引设置mapping elasticsearch版本7.10.2&#xff0c;要求java客户端与之相匹配&#xff0c;推荐Springboot版本是2.3以上版本 依赖配置使用的是JUnit 5&am…

oracle操作回退SQL

对表数据进行操作后&#xff0c;提交了事务&#xff0c;发现数据更新或者删除错了&#xff0c;这时候还是有方法可以数据回退的 进行数据回退操作&#xff0c;将数据回退到xxxx分钟&#xff0c;也就是update操作之前&#xff1a; 在回退之前&#xff0c;先查询xx分钟的数据&…

MYSQL-windows安装配置两个或多个版本MYSQL

安装第一个mysql很简单&#xff0c;这里不再赘述。主要说说第二个怎么安装&#xff0c;服务怎么配置。 1. 从官网下载第二个MySQL并安装 一般都是免安装版了&#xff0c;下载解压到某个文件目录下(路径中尽量不要带空格或中文)&#xff0c;再新建一个my.ini文件&#xff08;或…

Reality Capture 软件安装 附下载链接

Reality Capture 软件安装 文章目录 Reality Capture 软件安装一、Reality Capture v1.4汉化版安装包下载并解压二、Epic Games Launcher安装三、设置路径并安装![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f077210990674d9fa9c10b52338b52fe.png)四、启动Epic Ga…

Chromium 如何查找V8 引擎中JavaScript 标准内置对象

JavaScript 标准内置对象 - JavaScript | MDN (mozilla.org) 一、JavaScript 标准内置对象 本章介绍和说明了 JavaScript 中所有的标准内置对象、以及它们的方法和属性。 这里的术语“全局对象”&#xff08;或标准内置对象&#xff09;不应与 global 对象混淆。这里的“全局…

OpenStack服务Swift重启失效(已解决)

案例分析Swift重启失效 1. 报错详情 在重新启动 VMware 虚拟机后&#xff0c;我们发现 OpenStack 的 Swift 服务出现了 503 Service Unavailable 错误。经过排查&#xff0c;问题根源在于 Swift 服务所使用的存储挂载是临时挂载&#xff0c;而非永久挂载。 Swift 服务依赖于…

985研一学习日记 - 2024.10.11

偶尔一碗热鸡汤&#xff1a;一个人内耗&#xff0c;说明他活在过去&#xff1b;一个人焦虑&#xff0c;说明他活在未来。只有当一个人平静时&#xff0c;他才活在现在。 日常 1、6&#xff1a;00起床 √ 2、健身1h 今天练了肩部以及背&#xff0c;然后跑步半小时 3、LeetC…

Python环境搭建

Python环境搭建 1 安装Python 双击安装包 2 安装Pycharm 双击安装包,然后下一步 安装完成后重启电脑 3 破解Pycharm 启动Pycharm 破解 4 pycharm的基本配置 1.主题颜色 2. 文件语言编码 滚动鼠标滑轮ctrl&#xff0c;可以快速缩放文本字体大小。 控制台编码的格式&#x…

Qt - QMenu

QMenu 1、menu转string输出 //GlobalEnum.h #include <QObject> #include <QMetaEnum> class GlobalEnum : public QObject {Q_OBJECT public:EnumTest();enum Enum_Test{ZhangSan 0,WangWu,};Q_ENUM(Enum_Test) };#define EnumToString(e) \ QMetaEnum::fromTy…

Python异步编程:使用`asyncio.Semaphore`控制并发

Python异步编程&#xff1a;使用asyncio.Semaphore控制并发 1. 什么是asyncio.Semaphore&#xff1f;2. 为什么需要asyncio.Semaphore&#xff1f;3. 如何使用asyncio.Semaphore&#xff1f;3.1 基本用法3.2 信号量的工作原理3.3 动态调整信号量 4. 适用场景5. 总结 在Python的…

Qt初识_通过代码创建hello world

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 Qt初识_通过代码创建hello world 收录于专栏【Qt开发】 本专栏旨在分享学习Qt的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1.通过按…

c语言库文件

c语言库文件 动态库动态库制作首先生成动态库文件名使用动态库编译动态库运行删除动态库1.sudo su 静态库静态库制作需要将源文件.c转换成二进制文件.o&#xff08;重定向文件&#xff09;将重定向文件打包成静态库文件使用静态库文件 静态库和动态库的区别 库文件的概念 我们将…

python-读写Excel:openpyxl-(1)基础操作之读写数据

目录 工作薄 创建/打开工作薄对象 获得默认sheet 工作表 创建工作表 删除工作表 获取表名 复制表 获取表对象 单元格 列号数字与字母转换 获取有效数据行和列 单元格对象获取 获取有效数据区域 获取指定行对象 value获取单元格数据值 修改及写入数据 插入或删…

C#里使用DataGridView来显示500万行数据

如果有500万行数据需要显示,大家肯定感觉很麻烦。 因为一次性地往列表里添加500万行数据,就需要很久的时间, 并且当滚动的时候就会更新比较慢。 有没有更好的方式呢? 其实可以采用虚拟列表的方式,也就是设置下面的方式: dataGridView1.VirtualMode = true; 这样列表…

老人桌面 1.3.5|专为老人设计的便捷实用桌面应用

老人桌面是一款专为老人设计的便捷实用桌面应用&#xff0c;具有超大字体设计&#xff0c;符合老人视力水平&#xff0c;撞色简洁的应用界面&#xff0c;拯救老人视觉体验。此外&#xff0c;还提供了常用的实用小工具&#xff0c;让老人能够轻松使用手机。 大小&#xff1a;5.…

vuefor循环动态展示图片不显示

问题代码如下 <div class"zjjc_list_bottom" v-for"(item, index) in zjjcList" :key"item.id"><img :src"./assets/left_blue_ (index 1) .png" alt""> </div> 理论来说是不会有问题&#xff0c;但…