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>
效果图如下：
需要的朋友可以参考一下
在下面打个小广告：
本人在业余时间，可以帮有需要的朋友解决技术上的问题，和接一些 页面定制开发。个人接单，价格实惠，只当是多交些朋友了。
在下面打个小广告：
本人在业余时间，可以帮有需要的朋友解决技术上的问题，和接一些 页面定制开发。个人接单，价格实惠，只当是多交些朋友了。
