vue2.0 日历日程表，可进行二次开发.

由于工作业务需求，要写一个日程表，日程表写之前要先生成日历，废话不多说，直接上代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>日程表</title><link rel="stylesheet" href="/selfsupermarketAdmin/views/common/css/common/app.css"><!--<link rel="stylesheet" href="/selfsupermarketAdmin/views/common/plugins/MintUI/style.css">--><!--<link rel="stylesheet" href="/selfsupermarketAdmin/views/common/plugins/bootstrap-3.3.7/css/bootstrap.css">--><link rel="stylesheet" href="/selfsupermarketAdmin/views/common/css/style.css"><style>* {box-sizing: border-box;}.rili {float: left;padding-left: 20px;font-size: 12px;overflow: hidden;min-width: 1050px;width: 100%;}.calendar {float: left;width: 23%;border: 1px solid #BEBFC1;margin-right: 20px;margin-top: 20px;height: 230px;}.calendar .calendar_title {padding: 0.5em 0 0.5em 0;text-align: center;border-bottom: 1px solid #BEBFC1;}.calendar .calendar_week {padding: 0.5em 0 0.5em 0;}.calendar .calendar_week span {width: 14.2857%;text-align: center;display: inline-block;}.calendar .calendar_dateCon span {padding: 0.5em 0 0.5em 0;width: 14.2857%;text-align: center;display: block;float: left;}</style>
</head>
<body class="container-fluid">
<div id="vue" v-cloak><div class="rili"><div class="calendar" v-for="(items,index) in rili.datas"><div class="calendar_title">{{index+1}}月</div><div class="calendar_week"><span>周日</span><span>周一</span><span>周二</span><span>周三</span><span>周四</span><span>周五</span><span>周六</span></div><div class="calendar_dateCon"><span v-for="item in items" v-html="changeDate(item.date)"></span></div></div></div></div>
<!--<script src="/selfsupermarketAdmin/views/common/plugins/echarts/echarts.min.js"></script>-->
<script src="/selfsupermarketAdmin/views/common/plugins/vue/vue.js"></script>
<script src="/selfsupermarketAdmin/views/common/plugins/jquery/jquery-1.9.1.min.js"></script>
<!--<script src="./plugins/MintUI/index.js"></script>-->
<!--<script src="/selfsupermarketAdmin/views/common/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>-->
<script src="/selfsupermarketAdmin/views/common/js/common.js"></script><script>function getMonth(year) {var year = year || 2018;var dayMseconds = 86400000;var monthArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];var resultArr = [];function isRun() {      //判断是否是闰年if ((year % 400 == 0) || (year % 4 == 0) && (year % 100 != 0)) {return true;} else {return false;}}var run = isRun();for (var m = 1; m < 13; m++) {var arr = [];var firstday = new Date(year + "-" + m + "-01").getTime();//拿到时间戳var lastday = 30;var weekDay = new Date(firstday).getDay();      //根据时间戳，拿到本月第一天的星期var weekLastDay = weekDay + 31;   //拿到本月最后一天的星期switch (m) {case 2:if (run) {lastday = new Date(year + "-" + m + "-29").getTime();weekLastDay = weekDay + 29;} else {lastday = new Date(year + "-" + m + "-28").getTime();weekLastDay = weekDay + 28;}break;case 4:lastday = new Date(year + "-" + m + "-30").getTime();weekLastDay = weekDay + 30;break;case 6:lastday = new Date(year + "-" + m + "-30").getTime();weekLastDay = weekDay + 30;break;case 9:lastday = new Date(year + "-" + m + "-30").getTime();weekLastDay = weekDay + 30;break;case 11:lastday = new Date(year + "-" + m + "-30").getTime();weekLastDay = weekDay + 30;break;default :lastday = new Date(year + "-" + m + "-31").getTime();//拿到时间戳
                    weekLastDay = weekDay + 31;break;}var n = 0;for (var i = 0; i < 42; i++) {var content = {date: '', class: ''};if (i < weekDay || i > weekLastDay - 1) {arr.push(content);} else {n++arr.push({day: new Date(firstday + dayMseconds * n - dayMseconds).getDate(),date: firstday + dayMseconds * n - dayMseconds,class: ''})}}resultArr.push(arr);}// console.log(resultArr)return resultArr// document.getElementById('box').innerHTML = JSON.stringify(arr);
    }//    var date = getMonth(2018);//  [[{date: '', class: ''}, {date: "当天时间戳", class: '类名'},],  //length:42 没有日期的是空]var vue = new Vue({el: "#vue",data: {rili: {year: 2018,datas: getMonth(2018)}},computed: {},created: function () {},mounted: function () {},methods: {changeDate: function (date) {if (date) {return new Date(date).getDate()} else {return ''}}},watch: {}})</script>
</body></html>

效果图如下：

需要的朋友可以参考一下

在下面打个小广告：

本人在业余时间，可以帮有需要的朋友解决技术上的问题，和接一些页面定制开发。个人接单，价格实惠，只当是多交些朋友了。

在下面打个小广告：

本人在业余时间，可以帮有需要的朋友解决技术上的问题，和接一些页面定制开发。个人接单，价格实惠，只当是多交些朋友了。

转载于:https://www.cnblogs.com/lguow/p/9791354.html

vue2.0 日历日程表，可进行二次开发.相关推荐

vue 仿二手交易app_项目vue2.0仿外卖APP（二）
vue-cli开启vue.js项目 Vue.js开发利器vue-cli,是vue的脚手架工具. 在工地上,脚手架是工人搭建好的架子,能够帮助工人们作业:在技术圈,脚手架就是来帮助我们编写好基础的代码的 ...
NET C#微信个人号 HOOK 基于微信2.8.0版本全接口微信机器人淘宝客二次开发
pc微信客户端 2.8.0 最新版本 hook 可二次开发 c#调用 2020年03月10日 Update 经过大量测试,现升级协议,最新支持微信PC2.8.0.106.新增了http回调域名配置. ...
magento二次开发的基本步骤分享
Magento后台添加新模块的体会确定命名空间(Namespace)和模块(Modulename)的命名: 在app/etc/modules/ 路径下,创建 Namespace_Modulename ...
JNA二次开发华视身份证阅读器
JNA二次开发华视身份证阅读器前言添加依赖 SDK资料编写代码遇到的问题(坑) 前言这两天了解了一下java调用dll动态库的方法,总的有三种:JNI.JNA.JNative,其中JNA调用 ...
软件介绍|ENVI/IDL软件及二次开发介绍
ENVI是美国Exelis Visual Information Solutions公司的旗舰产品,它是由遥感领域的科学家采用交互式数据语言IDL(Interactive Data Language) ...
BarTender破解版标签打印二次开发二维码C#预览图
很多生产环节都需要条码打印的功能,这篇文章就介绍下如何使用C#实现条码打印的功能,希望对大家能有所帮助! 条码设计软件采用的是BarTender 10.1,在此基础上进行的二次开发. 运行成功的预览图 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战：Vuex 其实很简单
前言哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...
【Vue2.0】—vue-router（二十七）
[Vue2.0]-vue-router(二十七) 一.路由配置作用:让路由组件更方便的收到参数二.<router-link></ router-link> 的replace ...
【Vue2.0】—vue-router（二十六）
[Vue2.0]-vue-router(二十六) 一.vue-router 的理解它是vue 的一个插件库,专门用来实现 SPA 应用二.对 SPA 应用的理单页 Web 应用(single p ...

vue2.0 日历日程表，可进行二次开发.

vue2.0 日历日程表，可进行二次开发.相关推荐

最新文章

热门文章

vue2.0 日历日程表 ，可进行二次开发.

vue2.0 日历日程表 ，可进行二次开发.相关推荐

最新文章

热门文章

vue2.0 日历日程表，可进行二次开发.

vue2.0 日历日程表，可进行二次开发.相关推荐