©2020-2024 ioDraw All rights reserved
废话少说，先上效果图：
可以在效果图中看到，选择不同的月份的时候当月天数与星期几都是一一对应，非当月天数则是灰色显示，一目了然。
并且此日历控件支持自动确定当前时间，每次打开默认显示的就是最新的月份，用来做签到打卡的功能比较合适。
由于使用的是原生div进行制作，自定义功能非常强，可以自由的更换样式、背景、颜色、大小等等。
在与数据库的时候可以从数据库获得时间信息并填充到控件中，图中的色块就可以看出。
该控件使用了Vue、CSS、以及最原生的div实现了自定义的样式，不得不说，div在自定义这一块是真的太给力了
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>日历控件</title> <script src="./vue.js"></script> </head> <style>
.writer-upper-right { float: left; width: 333px; height: 300px; border: 2px
orange solid; border-radius: 7px; } .calendar-head { width: 100%; height: 15%;
border-radius: 7px; } .calendar-body { width: 99.9%; height: 84.9%;
border-radius: 7px; border-top: 1px orange solid; } .calendar-head-title {
float: left; width: 100px; height: 79%; line-height: 33px; border-radius: 7px;
border: 2px orange solid; margin-top: 2px; margin-left: 1px; text-align:
center; color: orange; font-size: 21px; } .calendar-head-year { float: left;
margin-left: 9px; width: 100px; height: 79%; border-radius: 7px; border: 2px
orange solid; margin-top: 2px; color: orange; text-align: center; }
.select-calendar-year { float: left; width: 100%; height: 100%; border: none;
background: none; color: orange; text-indent: 0.7em; font-size: 20px; }
.select-calendar-year:focus { outline: none; } .select-calendar-year:hover {
cursor: pointer; } .calendar-body-week { width: 99.8%; height: 32px; margin: 0
auto; border-bottom: 1px orange solid; } .calendar-body-days { width: 99.8%;
height: 199px; border-bottom: 1px orange solid; border-top: none;
border-radius: 7px; } .calendar-body-info { width: 99.8%; height: 18px;
border-radius: 7px; } .weekEveryDay { float: left; width: 40px; height: 23px;
margin-left: 5px; margin-top: 4px; border: 1px orange solid; border-radius:
5px; line-height: 23px; text-align: center; font-size: 15px; color: orange; }
.monthEveryDay { margin-top: 7px; } .not-now-month { border-color: gray; color:
gray; } .now-day-writer { background-color: orange; color: black; }
.now-day-not-writer { border-color: gray; background-color: gray; color: black;
} .info-if-writer { float: left; width: 60px; height: 16px; margin-left: 5px;
margin-top: 1px; } .color-span { float: left; width: 15px; height: 15px;
margin-top: 1px; background-color: gray; } .color-info { float: left; width:
40px; height: 15px; margin-top: 1px; margin-left: 5px; line-height: 15px;
text-align: left; font-size: 12px; color: gray; } .color-span2 {
background-color: orange; } .color-info2 { color: orange; } </style> <body
style="background: url('./bg-xk.gif');margin: 100px 100px;"> <div id="app">
<div class="writer-upper-right"> <div class="calendar-head"> <div
class="calendar-head-title">日历控件</div> <div class="calendar-head-year"> <label>
<select class="select-calendar-year" v-model="calendarYear"
@change="SelectCalendarYear"> <option v-for="year in calendarAllYear"
:value="year" :key="year">{{year}}年</option> </select> </label> </div> <div
class="calendar-head-year"> <label> <select class="select-calendar-year"
v-model="calendarMonth" @change="SelectCalendarMonth"> <option v-for="month in
calendarAllMonth" :value="month" :key="month">{{month}}月</option> </select>
</label> </div> </div> <div class="calendar-body"> <div
class="calendar-body-week"> <div class="weekEveryDay">SUN</div> <div
class="weekEveryDay">MON</div> <div class="weekEveryDay">TUE</div> <div
class="weekEveryDay">WED</div> <div class="weekEveryDay">THU</div> <div
class="weekEveryDay">FRI</div> <div class="weekEveryDay">SAT</div> </div> <div
class="calendar-body-days"> <div class="weekEveryDay monthEveryDay
not-now-month" v-for="day in calendarPrevDays" disabled>{{day}}</div> <div
class="weekEveryDay monthEveryDay" v-for="day in calendarNowDays"
:class="['weekEveryDay monthEveryDay', {'now-day-writer' :
calendarHadWrite.includes(day)}, {'now-day-not-writer' :
calendarNotWrite.includes(day)}]" >{{day}}</div> <div class="weekEveryDay
monthEveryDay not-now-month" v-for="day in calendarNextDays" disabled>{
{day}}</div> </div> <div class="calendar-body-info"> <div
class="info-if-writer"> <div class="color-span"></div> <div
class="color-info">未更新</div> </div> <div class="info-if-writer"> <div
class="color-span color-span2"></div> <div class="color-info
color-info2">有更新</div> </div> </div> </div> </div> </div> </body> </html>
<script> var Main = { data() { return { calendarYear: 0, // 日历部分的“年份“-选中的一年
calendarMonth: 0, // 日历部分的”月份”-选中的一月 calendarAllYear:[], // 日历部分的“年份”
calendarAllMonth:[], // 日历部分的“月份” calendarNowDays: [], // 日历部分的当月日期
calendarPrevDays: [], // 日历部分的上月末尾 calendarNextDays: [], // 日历部分的下月开头
calendarHadWrite: [], // 日历部分的当月有更新的集合 calendarNotWrite: [], // 日历部分的当月未更新的集合 }
}, methods: { /*网页加载时获取年份，自2021年开始的年份*/ ConfirmYear() { let date = new Date();
let nowYear = date.getFullYear(); let nowMonth = date.getMonth() + 1;
this.calendarYear = nowYear; this.calendarMonth = nowMonth; for (let j =
nowYear; j >= 2021; j--) { this.calendarAllYear.push(j); } },
/*根据年份的不同选择不同的月份，不允许出现未来的时间*/ SelectCalendarYear() { this.calendarAllMonth =
[]; let year = this.calendarYear; let date = new Date(); let nowYear =
date.getFullYear(); let nowMonth = date.getMonth() + 1; if (year < nowYear) {
for (let i = 12; i > 0; i--) { if (i < 10) { this.calendarAllMonth.push("0"+i);
} else { this.calendarAllMonth.push(i); } } } else { for (let i = nowMonth; i >
0; i--) { if (i < 10) { this.calendarAllMonth.push("0"+i); } else {
this.calendarAllMonth.push(i); } } } this.calendarMonth =
this.calendarAllMonth[0]; this.SelectCalendarMonth(); }, /*根据月份的不同选择当月的天数*/
SelectCalendarMonth() { this.calendarNowDays = []; this.calendarPrevDays = [];
this.calendarNextDays = []; let year = this.calendarYear; let month =
this.calendarMonth; // 获取当前月的最后一天，实际上是获取上个月最后一天，但是month没有减一，所以是这个月的最后一天 let
days = new Date(year,month,0).getDate(); // 获取上月最后一天 let prevDays = new
Date(year,month-1,0).getDate(); //
获取当前月的1号是星期几，这个不是返回上个月的，所以要减一，1就表示1号，数字几就表示星期几，0表示周日 let week = new
Date(year,month-1,1).getDay(); // 获取下个月1号是星期几 let nextWeek = new
Date(year,month,1).getDay(); // 填充当前月的日期数字 for (let i = 1; i <= days; i++) { if
(i < 10) { this.calendarNowDays.push("0"+i); } else {
this.calendarNowDays.push(i); } } // 填充上月末尾的日期数字 if (week > 0) { for (let i =
prevDays - week + 1; i <= prevDays; i++) { this.calendarPrevDays.push(i); } }
// 计算格子剩余数量 let surplusDays = 42 - days - this.calendarPrevDays.length; //
填充下月月初的日期数字 for (let i = 1; i <= surplusDays; i++) { if (i < 10) {
this.calendarNextDays.push("0"+i); } else { this.calendarNextDays.push(i); } }
}, }, created() { // 此处可以由数据库查询出来填充 this.calendarHadWrite.push("07");
this.calendarHadWrite.push(17); this.calendarNotWrite.push("03");
this.calendarNotWrite.push(13); this.ConfirmYear(); this.SelectCalendarYear();
} } var Ctor = Vue.extend(Main) new Ctor().$mount('#app') </script>