当前位置：首页 > news >正文

elementui日历显示红点及根据日程范围判断是否有红点

news 来源：原创 2025/7/3 20:38:27

生成指定日期范围内的所有日期

generateDateRange(startStr, endStr) {const dates = [];  日期列表const start = new Date(startStr); 日程开始日期const end = new Date(endStr); 日程结束日期end.setHours(23, 59, 59, 999); 结束的那一天设置为23点59分59秒// 生成日期范围内的所有日期let currentDate = new Date(start);  判断天数设置为日程开始日期while (currentDate <= end) {const dateStr = this.formatDate(currentDate); dates.push(dateStr); 如果当前判断的日期在日程范围内就加入日期列表currentDate.setDate(currentDate.getDate() + 1); 日期判断天数加1}return dates;},// 格式化日期为 'YYYY-MM-DD' 字符串formatDate(date) {const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, '0');const day = String(date.getDate()).padStart(2, '0');return `${year}-${month}-${day}`;},

// 生成所有日期范围内的日期

// 生成所有日期范围内的日期generateDateRanges() {const allDates = [];this.backendDateRanges.forEach(range => {const startStr = this.convertDateformat(range.start);const endStr = this.convertDateformat(range.end);const dates = this.generateDateRange(startStr, endStr);allDates.push(...dates);});// 去重this.selectedDates = [...new Set(allDates)];},

// 判断当前日期是否在选定日期范围内

isSelectedDate(day) {return this.selectedDates.includes(day);},

// 显示某天的日程列表

showEvents(day) {this.currentDay = day;this.currentDayEvents = this.backendDateRanges.filter(range => {const startStr = this.convertDateformat(range.start);const endStr = this.convertDateformat(range.end);const start = new Date(startStr);const end = new Date(endStr);const current = new Date(day);// 设置结束日期为当天的最后时刻，以确保包含结束日期end.setHours(23, 59, 59, 999);return current >= start && current <= end;});}

完整代码

<template><div><el-calendar v-model="value" style="width: 30%;height: 50%;" ><!-- 自定义日期单元格插槽 --><template slot="dateCell" slot-scope="{ data }"><div @click="showEvents(data.day)"><!-- 显示日期 --><div class="date-content">{{ data.day.split('-').slice(2).join('-') }}</div><!-- 如果日期在 selectedDates 中，显示红点 --><div v-if="isSelectedDate(data.day)" class="dot"></div></div></template></el-calendar><!-- 显示日程列表 --><div v-if="currentDayEvents.length > 0" class="events-list" style="width: 30%;height: 50%;" ><h3>日程列表 ({{ currentDay }})</h3><ul><li v-for="event in currentDayEvents" :key="event.id">{{ event.title }}</li></ul></div></div>
</template><script>export default {data() {return {value: new Date(),backendDateRanges: [{id: 1,title: '日程1',start: '2025/03/01',end: '2025/04/06'},{id: 2,title: '日程2',start: '2025/04/02',end: '2025/04/10'}],// 动态生成的选定日期数组selectedDates: [],// 当前点击日期的日程列表currentDayEvents: [],// 当前点击的日期currentDay: ''};},mounted() {// 在组件挂载后生成选定日期范围this.generateDateRanges();},methods: {myEcharts(){//var myChart = this.$echarts.init(document.getElementById('main'));},// 将后端传过来的日期格式转换为 YYYY-MM-DDconvertDateformat(dateStr) {return dateStr.split('/').join('-');},// 生成指定日期范围内的所有日期generateDateRange(startStr, endStr) {const dates = [];const start = new Date(startStr);const end = new Date(endStr);end.setHours(23, 59, 59, 999);// 生成日期范围内的所有日期let currentDate = new Date(start);while (currentDate <= end) {const dateStr = this.formatDate(currentDate);dates.push(dateStr);currentDate.setDate(currentDate.getDate() + 1);}return dates;},// 格式化日期为 'YYYY-MM-DD' 字符串formatDate(date) {const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, '0');const day = String(date.getDate()).padStart(2, '0');return `${year}-${month}-${day}`;},// 生成所有日期范围内的日期generateDateRanges() {const allDates = [];this.backendDateRanges.forEach(range => {const startStr = this.convertDateformat(range.start);const endStr = this.convertDateformat(range.end);const dates = this.generateDateRange(startStr, endStr);allDates.push(...dates);});// 去重this.selectedDates = [...new Set(allDates)];},// 判断当前日期是否在选定日期范围内isSelectedDate(day) {return this.selectedDates.includes(day);},// 显示某天的日程列表showEvents(day) {this.currentDay = day;this.currentDayEvents = this.backendDateRanges.filter(range => {const startStr = this.convertDateformat(range.start);const endStr = this.convertDateformat(range.end);const start = new Date(startStr);const end = new Date(endStr);const current = new Date(day);// 设置结束日期为当天的最后时刻，以确保包含结束日期end.setHours(23, 59, 59, 999);return current >= start && current <= end;});}}
};
</script><style scoped>
.date-content {margin-bottom: 5px;}.dot {width: 6px;height: 6px;background-color: red;border-radius: 50%;display: inline-block;
}.events-list {margin-top: 20px;padding: 10px;background-color: #f5f5f5;border-radius: 5px;
}.events-list h3 {margin-top: 0;
}.events-list ul {list-style-type: none;padding: 0;
}.events-list li {padding: 5px 0;
}
</style>

elementui日历显示红点及根据日程范围判断是否有红点

生成指定日期范围内的所有日期 generateDateRange(startStr, endStr) {const dates []; 日期列表const start new Date(startStr); 日程开始日期const end new Date(endStr); 日程结束日期end.setHours(23, 59, 59, 999); 结束的那一天设置为23点59分59秒// 生成日期范围内…...

编程日记 2025/7/3 20:38:27

第六章 QT基础：5、QT的UDP网络编程

在 Qt 中，QUdpSocket 类用于实现基于 UDP 协议的网络通信。UDP（用户数据报协议）是一种无连接的协议，与 TCP 不同，它不需要建立连接，因此它的传输速度较快，但也不保证数据的可靠传输。 1. Qt UDP…...

编程日记 2025/7/3 20:09:24

JAVA设计模式——（五）享元模式（Flyweight Pattern）

JAVA设计模式——（五）享元模式（Flyweight Pattern） 概念理解实现创建内部状态定义享元工厂测试适用性概念使共享对象可以有效的支持大量的细粒度对象。主要采用池技术实现。理解享元模式主要解决大量对象的共享&#xff0…...

编程日记 2025/7/3 20:20:52

电竞俱乐部护航点单小程序，和平地铁俱乐部点单系统，三角洲护航小程序，暗区突围俱乐部小程序

电竞俱乐部护航点单小程序开发，和平地铁俱乐部点单系统，三角洲护航小程序，暗区突围俱乐部小程序开发端口包含： 超管后台， 老板端，打手端，商家端，客服端，管事端&#x…...

编程日记 2025/7/3 20:05:47

mybatis log convert使用

1. idea 搜索插件 mybatis log convert. 安装后重启idea 启动程序. 日志打印后选中输出的内容右键。这里随意选中一段日志做演示必须要在console中复制才能使用这个日志解析 2. 还有一种用法。没找到...

编程日记 2025/6/29 9:20:31

[U-Net]DA-TRANSUNET

论文题目：DA-TRANSUNET: INTEGRATING SPATIAL AND CHANNEL DUAL ATTENTION WITH TRANSFORMER U-NET FOR MEDICAL IMAGE SEGMENTATION ∗ 中文题目：DA-TRANSUNET：结合空间和通道双注意力与Transformer U-NET的医学图像分割算法 0摘要精确的医学图像分割对疾病定量和治疗评…...

编程日记 2025/7/3 20:15:06

AI大模型从0到1记录学习数据结构和算法 day20

4.3 分治算法 4.3.1 概述分治算法的基本思想为：将原问题递归的分解为若干个（通常是两个以上）规模较小、相互独立且性质相同的子问题，直到子问题足够简单，简单到可以直接求解。然后再返回结果，逐个解决上层…...

编程日记 2025/7/3 20:34:21

面阵相机中M12镜头和远心镜头的区别及性能优势

以下是关于面阵相机中M12镜头和远心镜头的区别及性能优势的详细分析，结合知识库内容整理如下： 一、M12镜头与远心镜头的核心区别 1. 设计原理与光学特性特性M12镜头远心镜头光学设计标准镜头设计，无特殊光学校正，依赖传统光路。…...

编程日记 2025/7/3 20:19:59

[创业之路-385]：企业法务 - 初创公司如何做好商业秘密的管理

一、商业秘密的定义与价值定义： 商业秘密是企业的核心资产，包括技术信息（如算法、配方）和经营信息（如客户名单、定价策略），具有非公开性、商业价值、保密性三大特征。价值： 初创公…...

编程日记 2025/7/3 20:35:59

Qt5.15.2+OpenCV4.9.0开发环境搭建详细图文教程（OpenCV使用Qt自带MinGW编译的全过程，包教包会）

【系列专栏】：博主结合工作实践输出的，解决实际问题的专栏，朋友们看过来！《项目案例分享》《极客DIY开源分享》《嵌入式通用开发实战》《C++语言开发基础总结》《从0到1学习嵌入式Linux开发》《QT开发实战》《Android开发实战》《实用硬件方案设计》《结构建模设…...

编程日记 2025/7/3 20:06:28

怎么实现RAG检索相似文档排序：similarities

怎么实现RAG检索相似文档排序：similarities top_5_indices = similarities.argsort()[-5:][::-1] 这行代码的作用是从一组相似度得分中获取相似度最高的5个元素的索引。 similarities：这是一个包含了某个问题与所有文档之间余弦相似度得分的一维数组（假设 similarities 是通…...

编程日记 2025/7/3 20:34:22

NLP高频面试题（五十三）——深度学习正则化详解

一、动因篇为什么要正则化？深度神经网络通常包含数以万计甚至数以亿计的参数，模型容量极大，极易在有限的训练数据上“记住”噪声与异常样本，从而出现过拟合（overfitting）现象。过拟合导致模型在训练集上表现优异，但在测试集或真实场景中泛化能力大幅下降。正则化（r…...

编程日记 2025/7/3 20:15:05

2.idea查看某个类的方法名称和实现

2.idea查看某个类的方法名称和实现 ctrl鼠标左键单击类名点击侧边栏Structure可看到方法名称的统计，这样直观...

编程日记 2025/7/3 20:10:52

FeignClient用法笔记

1. FeignClient简介在微服务架构中总需要各个服务相互调用，各个服务又是以接口方式暴露，所以需要Http远程调用；为了简化调用，Spring Cloud OpenFeign 库提供了org.springframework.cloud.openfeign.FeignClient 注解&#xff1a…...

编程日记 2025/7/3 20:10:50

【Redis】 Redis中常见的数据类型（二）

文章目录前言一、 List 列表1. List 列表简介2.命令3. 阻塞版本命令4. 内部编码5. 使用场景二、Set 集合1. Set简单介绍2. 普通命令3 . 集合间操作4. 内部编码5. 使用场景三、Zset 有序集合1.Zset 有序集合简介2. 普通命令3. 集合间操作4. 内部编码5. 使用场景结语前言在…...

编程日记 2025/7/3 20:10:05

电力作业安全工器具全解析：分类、配置与检查要点

在电力行业，每一次作业都面临潜在危险，安全工器具是保障作业人员生命安全的关键。今天，金能电力带大家深入了解电力作业中常见的安全工器具，以及它们的检查与使用要点。电力作业中安全工器具种类繁多。绝缘安全工器具因直接关联带…...

编程日记 2025/7/3 20:28:25

PowerBI-使用参数动态修改数据源路径

PowerBI-使用参数动态修改数据源路径在PowerQuery中可以使用参数，通过参数我们可以将多个文件路径相同的字符串进行替换。以一个案例分享下过程： 第一步，导入一个含有多个sheet表的EXCEL工作薄，点击转换数据，如图…...

编程日记 2025/7/3 20:35:58

Temperature

模型中Temperature参数的详细解释 Temperature 是生成模型（如GPT、LLaMA等）中用于控制输出多样性和随机性的关键超参数。它通过调整模型预测概率分布的平滑程度，直接影响生成文本的创造性与稳定性。模型中Temperature参数的详细解…...

编程日记 2025/7/3 20:10:51

C++ 日志系统实战第二步：不定参数函数解析

全是通俗易懂的讲解，如果你本节之前的知识都掌握清楚，那就速速来看我的项目笔记吧~ 相关技术知识补充不定参宏函数在 C 语言中，不定参宏函数是一种强大的工具，它允许宏接受可变数量的参数，类似于不定参函数&#…...

编程日记 2025/7/3 20:36:45

【高并发】 MySQL锁优化策略

在数据库高并发场景中，行锁、表锁和高并发处理是密切相关的概念，它们共同影响着系统的并发性能和数据一致性。以下是三者的详细解释及高并发处理的策略： 1. 行锁（Row-Level Locking） 行锁是数据库中最小的锁粒度&…...

编程日记 2025/7/3 20:10:04

C语言——填充矩阵

C语言——填充矩阵一、问题描述二、格式要求1.输入形式2.输出形式3.样例三、实验代码一、问题描述编程实现自动填充nn矩阵元素数值，填充规则为：从第一行最后一列矩阵元素开始按逆时针方向螺旋式填充数值1，2，…，nn…...

编程日记 2025/7/3 20:10:51

CSS3 基础（背景-文本效果）

二、背景效果属性功能示例值说明background设置背景颜色或渐变background: linear-gradient(45deg, #4CAF50, #FF5722);设置背景颜色、图片或渐变效果。background-size调整背景图片大小background-size: cover;设置背景图片的显示大小，如 cover 或 contain。back…...

编程日记 2025/7/3 20:05:46

点云配准算法之NDT算法原理详解

一、算法概述 NDT（Normal Distributions Transform）最初用于2D激光雷达地图构建（Biber & Straer, 2003），后扩展为3D点云配准。它将点云数据空间划分为网格单元（Voxel），在每个体…...

编程日记 2025/7/3 20:05:00

springboot在eclipse里面运行 run as 是Java Application还是 Maven

在 Eclipse 里运行 Spring Boot 项目时，既可以选择以“Java Application”方式运行，也可以通过 Maven 命令来运行，下面为你详细介绍这两种方式及适用场景。以“Java Application”方式运行操作步骤在项目中找到带有 SpringBootApplicat…...

编程日记 2025/7/3 20:10:52

Redis 基础和高级用法入门

redis 是什么？ Redis是一个远程内存数据库，它不仅性能强劲，而且还具有复制特性以及为解决问题而生的独一无二的数据模型。Redis提供了5种不同类型的数据结构，各式各样的问题都可以很自然地映射到这些数据结构上&#xff1a…...

编程日记 2025/7/3 20:21:41

使用vue2开发一个在线旅游预订平台-前端静态网站项目练习

hello,大家好，今天给大家再分享一个前端vue2练习项目-在线旅游预订平台。我们在学习编程的时候，除了学习编程的基础知识，为了让我们快速的掌握一门编程技术，肯定离不开各种项目的练习，今天分享的这个前端练习项目&…...

编程日记 2025/7/3 20:14:21

Ext Direct 功能与使用详解

Ext Direct 是 Ext JS 框架中的一个功能模块，旨在简化前端 JavaScript 应用与后端服务器之间的通信。其核心思想是通过远程过程调用（RPC）协议，将服务器端的方法透明地映射为前端可直接调用的 JavaScript 函数，从而减少手动编写 Ajax 请求和处理响应的代码量。一、Ext Dir…...

编程日记 2025/7/3 20:06:27

Android移动应用开发入门示例：Activity跳转界面

介绍如何使用LinearLayout布局实现基本的UI设计，并实现两个Activity之间的跳转，适合刚接触Android Studio的新手学习。我们将使用Java语言开发，布局采用XML文件。以下为完整源码与运行说明： 案例前的准备工作： 1.1XM…...

编程日记 2025/7/3 20:10:51

【hadoop】HBase分布式数据库安装部署

一、HBase集群的安装与配置步骤： 1、使用XFTP将HBase安装包hbase-1.2.0-bin.tar.gz发送到master机器的主目录。 2、解压安装包： tar -zxvf ~/hbase-1.2.0-bin.tar.gz 3、修改文件夹的名字，将其改为hbase，或者创建软连接也可…...

编程日记 2025/6/29 9:52:04

理解npm的工作原理：优化你的项目依赖管理流程

目录什么是npm npm核心功能 npm 常用指令及其作用执行npm i 发生了什么? 1. 解析命令与参数 2. 检查依赖文件 3. 依赖版本解析与树构建 4. 缓存检查与包下载 5. 解压包到 node_modules 6. 更新 package-lock.json 7. 处理特殊依赖类型 8. 执行生命周期脚本 9. …...

编程日记 2025/7/3 20:09:24

【Python笔记 04】输入函数、转义字符

一、Input 输入函数 prompt是提示，会在控制台显示，用作提示函数。 name input("请输入您的姓名：") print (name)提示你输入任意信息： 输入input test后回车，他输出input test 二、常用的转义字符只讲…...

编程日记 2025/7/3 20:06:27

MySQL数据库基本操作-DQL-基本查询

数据库的操作中，查询是最重要的一、基本查询-数据准备 -- 数据准备 create database if not exists mydb2; use mydb2; create table product( pid int primary key auto_increment, pname varchar(20) not null, price double, category_id varchar(20) …...

编程日记 2025/7/3 20:05:45

13、性能优化：魔法的流畅之道——React 19 memo/lazy

一、记忆封印术（React.memo） 1. 咒语本质 "memo是时间转换器的记忆晶石，冻结无意义的能量波动！" 通过浅层比较（shallowCompare）或自定义预言契约，阻止组件在props未变时重新渲染。 …...

编程日记 2025/6/29 11:36:14

低代码平台开发手机USB-HID调试助手

项目介绍 USB-HID调试助手是一种专门用于调试和测试USB-HID设备的软件工具。USB-HID设备是一类通过USB接口与计算机通信的设备，常见的HID设备包括键盘、鼠标、游戏控制器、以及一些专用的工业控制设备等。主要功能包括： 数据监控：实时监控和…...

编程日记 2025/6/29 10:33:22

Langchain_Agent+数据库

本处使用Agent数据库，可以直接执行SQL语句。可以多次循环查询问题前文通过chain去联系数据库并进行操作； 通过链的不断内嵌组合，生成SQL在执行SQL再返回。初始化 import os from operator import itemgetterimport bs4 from langchain.ch…...

编程日记 2025/6/29 10:31:02

Code Splitting 分包策略

以下是关于分包策略（Code Splitting）的深度技术解析，涵盖原理、策略、工具实现及优化技巧：一、分包核心价值与底层原理 1. 核心价值矩阵维度未分包场景合理分包后首屏速度需加载全部资源仅加载关键资源缓存效率任意修改导致全量缓存失效按模块变更频率分层缓存并行加载单…...

编程日记 2025/6/29 12:08:28

AI 开发入门之 RAG 技术

目录一、从一个简单的问题开始二、语言模型“闭卷考试”的困境三、RAG 是什么—LLM 的现实世界“外挂”四、RAG 的七步流程第一步：加载数据（Load）第二步：切分文本（Chunking）第三步：向量化&…...

编程日记 2025/6/29 11:10:59

day36图像处理OpenCV

文章目录一、图像预处理18 模板匹配18.1模板匹配18.2 匹配方法18.2.1 平方差匹配18.2.2 归一化平方差匹配18.2.3 相关匹配18.2.4 归一化相关匹配18.2.5 相关系数匹配18.2.6 归一化相关系数匹配 18.3 绘制轮廓18.4案例一、图像预处理 18 模板匹配 18.1模板匹配模板匹配就是…...

编程日记 2025/6/29 12:11:35

系统与网络安全------弹性交换网络（3）

资料整理于网络资料、书本资料、AI，仅供个人学习参考。 STP协议环路的危害单点故障 PC之间的互通链路仅仅存在1个任何一条链路出现问题，PC之间都会无法通信解决办法提高网络可靠性增加冗余/备份链路增加备份链路后交换网络上产生二层环路 …...

编程日记 2025/6/29 9:22:50

FPGA上实现YOLOv5的一般过程

在FPGA上实现YOLOv5 YOLO算法现在被工业界广泛的应用，虽说现在有很多的NPU供我们使用，但是我们为了自己去实现一个NPU所以在本文中去实现了一个可以在FPGA上运行的YOLOv5。 YOLOv5的开源代码链接为 https://github.com/ultralytics/yolov5 为了在FPGA中…...

编程日记 2025/6/29 11:21:41

verilog和system verilog常用数据类型以及常量汇总

int和unsigned 在 Verilog-2001 中，没有 int 和 unsigned 这样的数据类型。这些关键字是 SystemVerilog 的特性，而不是 Verilog-2001 的一部分。 Verilog-2001 的数据类型在 Verilog-2001 中，支持的数据类型主要包括以下几种： …...

编程日记 2025/6/29 12:01:13

wordpress学习笔记

P1 P2 P3...

编程日记 2025/6/29 11:57:52

Rust 学习笔记：编程语言的相关概念

Rust 学习笔记：编程语言的相关概念 Rust 学习笔记：编程语言的相关概念动态类型 vs 静态类型动态类型 (Dynamically Typed)静态类型 (Statically Typed)对比示例强类型 vs 弱类型强类型 (Strongly Typed)弱类型 (Weakly Typed)对比示例编译型语言 vs 解…...

编程日记 2025/6/29 12:14:41

react nativeWebView跨页面通信

场景 react native项目里，有一些移动端的应用喜欢使用h5来开发，会出现需要跨tab和跨页面通信的场景，可以使用pubsub-js来实现通信。实现思路在react native 层实现pubsub的公共API，提供订阅消息、发布消息、取消订阅接口&…...

编程日记 2025/6/29 10:45:54

Python爬虫（3）HTML核心技巧：从零掌握class与id选择器，精准定位网页元素

目录一、背景与意义‌二、class与id的基础概念与语法规则‌2.1 什么是class与id？‌2.2 核心区别总结三、应用场景与实战案例‌3.1 场景1：CSS样式管理‌3.2 场景2：JavaScript交互‌3.3 场景3：SEO优化与语义化‌ 四、常见误区与最…...

编程日记 2025/6/29 9:20:35

BGE（BAAI General Embedding）模型详解

BGE（BAAI General Embedding）模型详解 BGE（BAAI General Embedding）是北京智源人工智能研究院（BAAI）推出的通用文本嵌入模型系列，旨在为各种自然语言处理任务提供高质量的向量表示。一、BGE模…...

编程日记 2025/7/2 23:12:16

【Linux网络】应用层自定义协议与序列化及Socket模拟封装

📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...

编程日记 2025/6/29 9:22:35

Rust项目GPG签名配置指南

Rust项目GPG签名配置指南一、环境准备 # 安装Gpg4win（Windows） winget install -e --id GnuPG.Gpg4win二、密钥生成与配置 # 生成RSA4096密钥 gpg --full-generate-key # 类型选RSA and RSA，长度4096，邮箱填z3266420686202216…...

编程日记 2025/6/29 9:20:43

6.第六章：数据分类的技术体系

文章目录 6.1 数据分类的技术架构6.1.1 数据分类的整体流程6.1.2 数据分类的技术组件6.1.2.1 数据采集与预处理6.1.2.2 特征工程与选择6.1.2.3 分类模型构建6.1.2.4 模型评估与优化6.1.2.5 分类结果应用与反馈 6.2 数据分类的核心技术与算法6.2.1 传统机器学习算法6.2.2 深度学…...

编程日记 2025/6/29 10:28:37

Nginx 反向代理，啥是“反向代理“啊，为啥叫“反向“代理？而不叫“正向”代理？它能干哈？

Nginx 反向代理的理解与配置 User 我打包了我的前端vue项目，上传到服务器，在宝塔面板安装了nginx服务，配置了文件 nginx.txt .运行了项目。我想清楚，什么是nginx反向代理？是nginx作为一个中介？中间件来集…...

编程日记 2025/6/29 9:20:37

相关文章：