vue移动端实现日历

实现功能：左滑返回上一个月，右滑下一个月，支持农历，下拉展示记录日志，持续更新

思路：

获取本月日历中的上个月显示日期以及下个月显示日期，通过数组展现

核心代码;

 getCurrentMonVal(year,month){month = month - 1let getWeekday = calendar.getWeekday(year,month)let getPreMonthCount = calendar.getPreMonthCount(year,month)let getMonthCount = calendar.getMonthCount(year,month)let preMon = []let mon = []let nextMon = []// 获取上个月内容(置灰部分)for (let i = getPreMonthCount.length - getWeekday+1; i <= getPreMonthCount.length; i++) {let lunarDay = getLunar(calendar.getPreMonth(year,month+1).year, calendar.getPreMonth(year,month+1).month, i)let solarFestival = festival.getSolarFestival(calendar.getPreMonth(year,month+1).month, i)let lunarFestival = festival.getLunarFestival(lunarDay.lunarMonth,lunarDay.lunarDate)preMon.push({solar: i,isCurrentMon: false,lunarDay: lunarDay,solarFestival: solarFestival, // 阳历节日lunarFestival: lunarFestival, // 农历节日isFestival: solarFestival || lunarFestival || lunarDay.solarTerm,agendas: data.agendas[calendar.dateFormater(calendar.getPreMonth(year,month+1).year, calendar.getPreMonth(year,month+1).month, i)]})}// 获取本月数据for (let i = 1; i <= getMonthCount.length; i++) {let lunarDay = getLunar(year, month+1, i)let solarFestival = festival.getSolarFestival(month+1, i)let lunarFestival = festival.getLunarFestival(lunarDay.lunarMonth,lunarDay.lunarDate)mon.push({solar: i,isCurrentMon: true,lunarDay: lunarDay,solarFestival: festival.getSolarFestival(month+1, i),lunarFestival: festival.getLunarFestival(lunarDay.lunarMonth,lunarDay.lunarDate), // 农历节日isFestival: solarFestival || lunarFestival || lunarDay.solarTerm,agendas: data.agendas[calendar.dateFormater(year, month+1, i)]})}// 获取下个月数据(置灰部分)for (let i = 1; i <= ((getWeekday+getMonthCount.length)<=35?35-getWeekday-getMonthCount.length:42-getWeekday-getMonthCount.length); i++) {let lunarDay = getLunar(calendar.getNextMonth(year,month+1).year, calendar.getNextMonth(year,month+1).month, i)let solarFestival = festival.getSolarFestival(calendar.getNextMonth(year,month+1).month, i)let lunarFestival = festival.getLunarFestival(lunarDay.lunarMonth,lunarDay.lunarDate)nextMon.push({solar: i,isCurrentMon: false,lunarDay: lunarDay,solarFestival: solarFestival,lunarFestival: lunarFestival, // 农历节日isFestival: solarFestival || lunarFestival || lunarDay.solarTerm,agendas: data.agendas[calendar.dateFormater(calendar.getNextMonth(year,month+1).year, calendar.getNextMonth(year,month+1).month, i)]})}return preMon.concat(mon).concat(nextMon)},

项目地址：https://gitee.com/lhyu/calendar

vue移动端实现日历相关推荐

vue移动端项目日历组件，月周切换，点击进入上/下一个月
项目场景: Vue移动端项目的日历组件,移动端如果没有别的特别要求,一般用vant中的日历组件就OK,这里用的另一个.组件是网上找的,原网址:vue-hash-calendar,需要的请自行去看. 我 ...
vue移动端日历组件 mintUi dateTime picker 设定开始和结束日期
vue移动端日历组件 mintUi dateTime picker 设定开始和结束日期
html pc端万年历插件,# pc端个性化日历实现
pc端个性化日历实现技术:vue => v-for.slot-scop 插槽域需求:需要实现日历上每一天动态显示不同的信息思路:运用vue 中 slot-scop 插槽域的知识点,将个性化 ...
解决vue移动端适配问题
解决vue移动端适配问题参考文章: (1)解决vue移动端适配问题 (2)https://www.cnblogs.com/both-eyes/p/10106021.html 备忘一下.
手把手教你 Vue 服务端渲染
写在前面在写这篇文章之前,我有写一篇 Vue 预渲染的教程以及在线示例,有需要的可以看一下~ [下面开始 Vue 服务端渲染] 服务端渲染 = SSR = Server-Side Renderi ...
vue移动端项目缓存问题实践
最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,权当是最近项目问题的一个回顾吧! 先描述下问题场景:A页面->B页面->C页面.假设A页面是列表页面, ...
[vue] 移动端ui你用的是哪个ui库？有遇到过什么问题吗？
[vue] 移动端ui你用的是哪个ui库?有遇到过什么问题吗? vant,mint等等吧,各有各的坑,不过大部分都是可以查到解决方案的个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
Vue服务端配置示例
Vue服务端配置示例后端配置示例 #Apache <IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^in ...

vue移动端实现日历

vue移动端实现日历相关推荐

最新文章

热门文章