《Vue3+Typescript》一个简单的日历组件实现

这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言~博主看到后会去代替大家踩坑的~

主页: oliver尹的主页

格言: 跌倒了爬起来就好~

目录

一、前言

二、效果图

三、核心思路

四、代码实现

4.1 本月日期计算

4.2 上月日期补齐

4.3 下个月日期补齐

4.4 转化成二位数组

4.5 使用v-for生成日历

4.6 农历,假期等

五、小结


一、前言

近来项目中需要用到一个日历组件,由于找了找没有找到合适的,因此决定自己简单动手做一个,项目中肯定比这个复杂的多,这里只是给各个小伙伴一个思路或者说是开发的方向~

耐心看完,也许有所收获......(PS:如果要源码留下邮箱,博主看到后会发送的~)

二、效果图

大致效果图如下:

三、核心思路

日历的核心个人觉得就是 算出指定月份的第一天是星期几,为什么?因为,从形态上来说 日历展现出来就是这么一个7*6的矩形,如果知道1号是星期几,那么就可以把这个矩形在1号之前的日期补齐,最后一天后的日期也可以补齐;

因此,日历的计算一共可以分为三段:

  • 第一段,本月计算,计算的是当前1号是周几,接着计算本月一共多少天;
  • 第二段,上月计算,计算1号之前一共有几天;
  • 第三段,下月计算,计算的是本月之后一共有多少天;

这样,三段连在一起就是一组完整的当前数组,如果还不清楚,那再具体举一个例子吧,以2023年7月为例,7月的1号是周六,那么它应该在矩形的这个位置

那么在周六前面应该还有6天,需要取6月的最后6天来补齐这个矩形的前半段

接着计算7月最后一天,7月31号是周一,那么它应该在这个位置

这样一个完整的矩形(日历)在数据的角度上来说就齐全了;

四、代码实现

4.1 本月日期计算

关于本月日期的计算分为两部分,第一部分,获取当前日期,第二部分 获取本月1号的星期

先是获取当前日期

// 获取当前日期
function getCurrent() {const date = new Date();return [date.getFullYear(), date.getMonth() + 1, date.getDate()];
}

先是获取本月,很简单

/*** 获取公历某一天是星期几* @param {number} y 年* @param {number} m 月* @param {number} d 日* @returns {number} 返回星期数字[0-6]*/
function solarWeek(y: number, m: number, d: number) {let date = new Date(y, m - 1, d);let week = date.getDay();return week;
}const currentDate = getCurrent()
// 使用
this.solarWeek(currentDate[0], currentDate[1], 1)

这样我们就获取到了第一天是周几了;

4.2 上月日期补齐

关于上月数据获取有一点是需要注意的是,那就是如果当前是1月份,那么要获取的上上一年度的12月份,因此,在计算前首先要对当前月份进行确定

// 判断年度
const y = date[1] === 1 ? date[0] - 1 : date[0];
// 判断月份
const m = date[1] === 1 ? 12 : date[1] - 1;

接着就是判断需要补齐日期的数量了,很简单,我们只需要根据周几来判断,如果是周六,那么就是补齐6天(周一到周五,加上周日),如果是周五,那么就是补齐5天(周一到周四,加上周日);

 /*** 获取当月前面需补齐的数组*/
beforDays(date: number[], last: number) {const y = date[1] === 1 ? date[0] - 1 : date[0];const m = date[1] === 1 ? 12 : date[1] - 1;const arr: dateBase[] = [];for (let i = 0; i < last; i++) {arr.push({...});}return arr;
}

这个last就是就是1号的星期,也就是需要循环的次数;

4.3 下个月日期补齐

接着补齐下个月,和上个月计算一样,首先要判断当前是不是12月,如果是12月,那么下个月就是下一年的1月份

const y = date[1] === 12 ? date[0] + 1 : date[0];
const m = date[1] === 12 ? 1 : date[1] + 1;

接着,由于我们知道了当前月的天数和上个月补齐的天数,那么自然下个月需要补齐多少天也能算出来,42-当前月天数-上个月天数=下个月补齐天数

/*** 获取当月后面需补齐的数组*/
afterDays(day: dateBase[], date: number[]) {const arr: dateBase[] = [];const y = date[1] === 12 ? date[0] + 1 : date[0];const m = date[1] === 12 ? 1 : date[1] + 1;for (let i = 1; i < 42 - day.length + 1; i++) {arr.push({...});}return [...day, ...arr];
}

到这里,我们就可以获得一个长度为42的数组,这个数组代表从上月的倒数某一天到这个月再到下个月正数的某一天,一共42天;

4.4 转化成二位数组

为什么要转成二位数组,原因很简单,因为我们的这个日历从布局上来说它就是一个二位数组....一共有6行,每行都7格,对吧,因此需要转一下,转的代码也很简单

const dateArray = [];
for (let row = 0; row < 6; row++) {dateArray.push(allDate.splice(0, 7));
}

4.5 使用v-for生成日历

基本数据整理完成后,只需要通过Vue的v-for指令去批量生成格子即可;

<template v-if="TBody.length"><divclass="t-calendar-row"v-for="(item, index) in TBody":key="index"><divclass="t-calendar-col"v-for="(col, colIdx) in item":key="colIdx"><CalendarItem:col="col":time="selectedTime"@changeTargetDate="changeDate"></CalendarItem></div></div>
</template>
<template v-else><div class="no-date">抱歉,暂无数据</div>
</template>

至于每一个格子的样式,可以根据需求进行定制化;

4.6 农历,假期等

真正的日历肯定远不止这些基础数据,肯定还有包括:农历,节日,假期等等不同标注,这些都可以在计算的时候将当前日期对应的值一并算好,在通过v-for渲染的时候将对应的CSS样式渲染上去即可,比如在进行数据push的时候可以:

arr.push({// 日期title: w - i,// 是否本月isCurrent: false,// 是否节假日isHolidays: DateClass.getHolidays([y, m, w - i]),date: `${y}-${clockFactory(m)}-${clockFactory(w - i)}`,// 阴历lunars: lun,isNow: false,// 阳历节日,如国庆,元旦solarDay: DateClass.getSolarDay(m, w - i),// 农历节日,如中秋,春节,端午lunarDay: DateClass.getlunarDay(Number(l[0]), Number(l[1]), Number(l[2])),// 生肖animal: DateClass.getAnimal(Number(l[0])),// 星座astro: DateClass.toAstro(y, m, w - i),// 节气term: getTerm(Number(l[0]), m, w - i)
});

等等都是可以在数据处理的时候一并处理好;

五、小结

其实知道了日历的生成原理后,居然觉得日历也没有那么难实现,就是稍微麻烦了点,最终要实现成什么样子还需要根据实际需求而定;

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

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

相关文章

SQL注入工具介绍——sqlmap

文章目录 一、安装方法二、使用方法三、sqlmap简介四、sqlmap支持的数据库五、检测注入1、基本格式2、跟随302跳转3、cookie注入4、从post数据包中注入 六、注入成功后1、获取数据库基本信息2、从数据库中搜索字段3、读取与写入文件 七、sqlmap详细命令1、Options&#xff08;选…

架构的分类

目录 一、 RUP41 架构 1.1 RUP41架构方法概述 1.2 RUP41架构总体 1.3 RUP41架构方法内容 1.3.1 逻辑视图 1.3.2 开发视图 1.3.3 物理视图 1.3.4 处理视图 1.3.5 场景视图 ​二、 TOGAF9 架构 2.1 TOGAF9 架构概述 2.2 TOGAF9 架构分类 2.2.1 业务架构 2.2.2 数据架…

【1.3】Java微服务:Spring Cloud版本说明

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a; 微服务 ✨特色专栏&#xff1a; 知识分享 &#x…

django4.2 day1Django快速入门

1、创建虚拟环境 打开cmd安装virtualenv pip install virtualenvwrapper-winworkon 查看虚拟环境mkvirtualenv 创建新的虚拟环境删除虚拟环境 rmvirtualenv 进入虚拟环境 workon env 2、创建django虚拟环境并安装django 创建虚拟环境mkvirtualenv django4env进入虚拟环境安…

每日一题(822. 翻转卡片游戏)-集合set

题目 822. 翻转卡片游戏 题解思路 简述为&#xff1a;找到桌面卡片中 不重复的最小值&#xff0c;卡片可以来回反转 如果 卡片前面后面的数字相同 则抛弃不用在剩下的卡片中 找到最小值&#xff08;前后可以反转 卡片不分前后&#xff09; 代码 C class Solution { pub…

Spring Boot Starter 剖析与实践 | 京东云技术团队

引言 对于 Java 开发人员来说&#xff0c;Spring 框架几乎是必不可少的。它是一个广泛用于开发企业应用程序的开源轻量级框架。近几年&#xff0c;Spring Boot 在传统 Spring 框架的基础上应运而生&#xff0c;不仅提供了 Spring 的全部功能&#xff0c;还使开发人员更加便捷地…

SpringSecurity自定义认证

Step 1: 创建自定义UserDetails类 自定义一个实现UserDetails接口的类&#xff0c;用于表示用户信息。您可以在这个类中添加自己需要的属性和方法来存储用户信息。 public class CustomUserDetails implements UserDetails {private String email;private boolean enabled;pri…

Redis 简介

文章目录 Redis 简介 Redis 简介 Redis&#xff08;Remote Dictionary Server&#xff09;&#xff0c;远程词典服务器&#xff0c;基于 C/S 架构&#xff0c;是一个基于内存的键值型 NoSQL 数据库&#xff0c;开源&#xff0c;遵守 BSD 协议&#xff0c;Redis 由 C语言 实现。…

JS之new Date(‘yyyy-MM-dd‘)多8小时问题

new Date(‘yyyy-MM-dd’)多8小时问题 原因 //会多8小时的转化 new Date("2023-08-02") //不会多8小时的转化 new Date("2023-8-2")因为月和天为个位数时前面带有0&#xff0c;这时会当你处于格林尼治国际标准时的时区&#xff08;0时区&#xff09;而你…

线上服务出现异常,获取链接超时wait millis 60 000, active 0, maxActive 400, creating 1

背景 最近线上服务出现出现异常&#xff0c;导致整个服务数据库不可用&#xff0c;查看报错信息为&#xff1a;org.springframework.jdbc.CannotGetJdbcConnectionException&#xff1a;wait millis 60 000, active 0, maxActive 400, creating 1" druid版本&#xff1a…

P4145 上帝造题的七分钟 2 / 花神游历各国

上帝造题的七分钟 2 / 花神游历各国 题目背景 XLk 觉得《上帝造题的七分钟》不太过瘾&#xff0c;于是有了第二部。 题目描述 "第一分钟&#xff0c;X 说&#xff0c;要有数列&#xff0c;于是便给定了一个正整数数列。 第二分钟&#xff0c;L 说&#xff0c;要能修改…

《向量数据库指南》——腾讯云向量数据库Tencent Cloud VectorDB产品特性,架构和应用场景

腾讯云向量数据库(Tencent Cloud VectorDB)是一款全托管的自研企业级分布式数据库服务,专用于存储、检索、分析多维向量数据。该数据库支持多种索引类型和相似度计算方法,单索引支持 10 亿级向量规模,可支持百万级 QPS 及毫秒级查询延迟。腾讯云向量数据库不仅能为大模型提…

前端Vue自定义精美商品分类组件category 可用于电商应用分类页面

随着技术的不断发展&#xff0c;传统的开发方式使得系统的复杂度越来越高。在传统开发过程中&#xff0c;一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改&#xff0c;造成牵一发而动全身的情况。为了解决这个问题&#xff0c;我们采用了组件化的开发模式。通过组…

MySQL踩坑之sql_mode的用法

目录 定义 报错重现 ​编辑 原因分析 sql_mode值说明 查看当前sql_mode 设置sql_mode 定义 什么是sql_mode?玩了这么久的MySQL语句࿰

SpringBoot整合Zookeeper

引入Jar包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId> </dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>s…

JAVA开发工具-maven的安装与配置(最新最详细教程)

引言 Maven项目对象模型(POM)&#xff0c;可以通过一小段描述信息来管理项目的构建&#xff0c;报告和文档的项目管理工具 软件。 Maven 除了以程序构建能力为特色之外&#xff0c;还提供高级项目管理工具。由于 Maven 的缺省构建规则有较 高的可重用性&#xff0c;所以常常用两…

模电专题-MOS管的放大电路分析

在实际应用中&#xff0c;我们经常会使用到功率MOS&#xff0c;这时通常不会将它当成一个开关使用&#xff0c;而是当成一个放大器来使用&#xff0c;那这就需要让其工作在放大状态。 参考下图中的mos管的特性曲线&#xff0c;右图中的输出特性曲线中有一根红色的分界线&#x…

C# 进程

C# 进程 进程的命名空间是&#xff1a; using System.Diagnostics;1.获取当前计算机正在运行所有的进程 Process[] processes Process.GetProcesses(); for (int i 0; i < processes.Length; i) {Console.WriteLine(processes[i]); } Console.ReadKey();2.通过进程打开…

竞速榜实时离线对数方案演进介绍 | 京东云技术团队

一、背景 竞速榜是大促期间各采销群提供的基于京东实时销售数据的排行榜&#xff0c;同样应对大促流量洪峰场景&#xff0c;通过榜单撬动品牌在京东增加资源投入。竞速榜基于用户配置规则进行实时数据计算&#xff0c;榜单排名在大促期间实时变化&#xff0c;相关排名数据在微…

【雕爷学编程】Arduino动手做(181)---Maixduino AI开发板2

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…