基于 vue 的日历

先上代码

template 部分

    <div class="card-wrap"><div class="header-line"  ><span @click="toPreMonth" title="上个月" style="cursor:pointer;padding:0 5px">&lt;</span><div class="center" style="width:calc(100% - 20px);text-align:center"><span>{{currentYear}}年</span><span>{{currentMonth}}月</span></div><span  @click="toNextMonth" title="下个月"  style="cursor:pointer;padding:0 5px">&gt;</span></div><div class="day-content" ><div class=" header" style="text-align:center;font-weight:bold;" v-for="(item,index) in ['Mon','Tue','Wed','Thu','Fri','Sta','Sun']"                    :key="'day'+index">{{item}}</div><div class="day-item " :class="item.class" style="text-align:center;" v-for="(item,index) in dateList" :key="'date'+index">{{item.date}}</div></div></div>

js 部分

 // 上个月toPreMonth(){this.dateList = [];if(this.currentMonth > 1){this.currentMonth --;}else{this.currentMonth = 12;this.currentYear --;}this.getdateList();},// 下个月toNextMonth(){this.dateList = [];if(this.currentMonth < 12){this.currentMonth ++;}else{this.currentMonth = 1;this.currentYear ++;}this.getdateList();},// 组件初始化的时候，获取当前的时间（写在 mounted 或者 created 中）getCurrent(){let year = new Date().getFullYear();let month = new Date().getMonth()+1;this.currentYear = year;this.realCurrentYear = year;this.currentMonth = month;this.realCurrentMonth = month;this.getdateList();},// 根据传入的月份与年份，获取日历的展示列表（按照 6行 * 7列 处理的数据）getdateList(year, month){if(!year){year = this.currentYear;month = this.currentMonth;}year = this.currentYear, month = this.currentMonth;let firstDate = new Date(`${year}/${month}/1`);let monthDayNum = this.getMonthNum(year,month);let firstDay = new Date(`${year}/${month}/1`).getDay();firstDay = firstDay == 0 ? 7 : firstDay;// 减一是排除一号当天 （如果当月的一号不是星期一，则计算天数把上个月的挪几天过来，加在数组前面）for(let i = 1;i<=firstDay - 1;i++){let dateStr = new Date(firstDate.getTime() - i * 24 * 60 * 60 * 1000);let date = dateStr.getDate();this.dateList.unshift({date,dateStr,class:'gray',type:'pre-mon'})}// 放置现在的年月 （往数组中推入当月的日期）let finalDate = null;for(let i = 1;i <= monthDayNum;i++){let dateStr = new Date(`${year}/${month}/${i}`);let date = dateStr.getDate();// 打印时间// 关于判断当前日期是不是今天，还需要处理一下let className = dateStr.getTime() == new Date(`${this.realCurrentYear}/${this.realCurrentMonth}/1`) ? 'current' : '';this.dateList.push({date,dateStr,class:className})if(i == monthDayNum){finalDate = dateStr;}}// 放置末尾的几天 （看看离 6 * 7 行数据还差几天，从下个月去拿数据）let numMinus = Math.abs(this.dateList.length - 42);console.log(finalDate,'finalDate')for(let i = 1;i<= numMinus;i++){let dateStr = new Date(new Date(finalDate).getTime() + i * 24 * 60 * 60 * 1000);// 按照最后一天进行let date = dateStr.getDate();this.dateList.push({date,dateStr,class:'gray',type:'next-mon'})}console.log(this.dateList,'dateList')},// 获取月份对应的天数getMonthNum(year = 2020,month = 1) { if(month < 1 || month > 12){console.log("参数不合法")return }let num = 28;switch(month){case 1:num = 31;break;//计算闰年的方式case 2:if(year%4 == 0 ||  (year % 400 == 0 && year % 100 == 0)){num = 29}else{num = 28}  ;break;case 3:num = 31;break;case 4:num = 30;break;case 5:num = 31;break;case 6:num = 30;break;case 7:num = 31;break;case 8:num = 31;break;case 9:num = 30;break;case 10:num = 31;break;case 11:num = 30;break;case 12:num = 31;break;default:num = 28;break;}return num;//默认就是28},

样式

 .header-line {display:flex;justify-content:sapce-between;align-items:center;width:100%;padding:8px 0;border:1px solid red;box-sizing:border-box;}.day-content {display:grid;grid-template-columns:auto auto auto auto auto auto auto;grid-template-rows:75px 75px 75px 75px 75px 75px 75px;align-items:center;width:100%;border:1px solid #f0f;box-sizing:border-box;}

示意图

存在弊端

之前只是做做demo,想到就写了，写完之后发现没有保存当前的年月日【问题不大，再整一组变量在初始化的时候存起来就可了】
目前的日历是从周一开始展开日期，如果换成周日，需要一点改动，这部分还没有进行灵活处理
功能还比较单一（后面有兴趣再上来补充功能）

基于 vue 的日历相关推荐

基于vue的日历H5
calendar calendar是一个基于vue的日历APP 预览地址–https://tls1234.github.io/calendar 主要功能内置了添加行程,删除行程日期与行程对应的颜色 ...
基于Vue的小日历（支持按周切换）
基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换 <template><div class="date"><!-- 年份月份 ...
基于Vue开发一个日历组件
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件. 更新 2.23修复了2026年2月份会渲染多一行的bug,谢谢@深蓝一人童鞋提出的bug,解决方案 ...
移动Web体验月报（6月）：MIP 核心代码升级，增加基于 Vue 开发能力
原创: BrilliantOpenWeb OpenWeb开发者 7月6日作者 | Brilliant Open Web 团队编辑 | Daisy 升级与重要进展历时2个月,MIP团队完成了核心代 ...
vue工作日历考勤记录表
下载地址基于vue试下的工作日历考勤记录表 dd:
vue时间天气插件_基于vue.js 2.0的百度天气应用 – vue-weather
vue-weather 基于vue.js 2.0的百度天气应用. 说明初学vue,在看完一个简单的视频教程和走两遍完官方文档之后仍然感觉云里雾里,知其然不知其所以然(虽然现在好了点).请教了高手之后 ...
基于 Vue 和 TS 的 Web 移动端项目实战心得
关注程序员成长指北,回复"1" 加入我们一起学习,天天进步作者:mcuking(杭州个推) 来源:https://juejin.im/post/5d759f706fb9a06a ...
vue制作日历_如何使用Vue制作每月日历
vue制作日历 Have you ever seen a calendar on a webpage and thought, how the heck did they did that? For ...
基于vue 通过数据过滤实现表格合并
基于vue 通过数据过滤实现表格合并需求基于vue渲染的数据表格需要对相同的列进行合并思路自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作. 要合并单元格需要用到row ...

基于 vue 的日历

先上代码

样式

示意图

存在弊端

基于 vue 的日历相关推荐

最新文章

热门文章