vue2.0 日曆日程表 ，可進行二次開發.
阿新 • • 發佈：2018-11-12
由於工作業務需求，要寫一個日程表，日程表寫之前 要先生成日曆，廢話不多說，直接 上程式碼：
<!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>
效果圖如下：
需要的朋友可以參考一下
在下面打個小廣告：
本人在業餘時間，可以幫有需要的朋友解決技術上的問題，和接一些 頁面定製開發。個人接單，價格實惠，只當是多交些朋友了。
在下面打個小廣告：
本人在業餘時間，可以幫有需要的朋友解決技術上的問題，和接一些 頁面定製開發。個人接單，價格實惠，只當是多交些朋友了。