日歷值班表（移動端），網上找了好多三方的控件， 頁面樣式，功能都不太滿足條件！ 索性自己寫一個！ 要求可以查看當月排班記錄，可以切換月份，單擊某天回調等。。。
效果圖如下
可以確認的是一屏日歷需要顯示6個星期42天，（例如本月30天，上個月2天，下個月10天）。明白頁面組成后，要計算出本月總天數，以及本月第一天是星期幾，以及上個月最后一天日期！這里有兩個地方需要說一下
1. 計算總天數采用了一個小技巧 new Date(year, month + 1, 0).getDate()；月份加1 ，天傳入一個0.就是上個月的最后一天的日期也就是當月的總天數
2. 上月的起始日期， 舉例； 上個月總天數（31）- 本月第一天星期（3）+ 最后1天（31日）+ 本月第1天（1日） 最后為 passdays = prefays - weekday + 2
var date = new Date(); var year = date.getFullYear(); // 年份 var month = date.getMonth(); //月份 var firstday = new Date(year, month, 1); // 當月第一天 var weekday = firstday.getDay(); // 當月第一天是星期幾 var days = new Date(year, month + 1, 0).getDate(); // 當月總天數 if (month == 0) { var premonth = 12; var preyear = year - 1; } else { var premonth = month - 1; var preyear = year; } var prefays = new Date(preyear, premonth + 1, 0).getDate(); // 上個月總天數 var res = ''; var passdays; if (weekday == 0) { weekday = 7; } passdays = prefays - weekday + 2 ； // 上個月起始日期
渲染日歷
// 上個月部分
for (var i = 0; i < weekday - 1; i++) { res += '<div><span class="pass">' + passdays + '</span></div>'; passdays++; }
// 當月部分 for (var j = 1; j <= days; j++) { if (j == today && year == _year && month == _month) { res += '<div data-date="' + j + '"><span class="on select">' + j + '</span></div>'; } else { res += '<div data-date="' + j + '"><span>' + j + '</span></div>'; } }
// 下個月部分 var nextdays = 42 - days - weekday + 1; for (var i = 1; i <= nextdays; i++) { res += '<div><span class="pass">' + i + '</span></div>'; }
使用方法:
new Calendar({
date: new Date(),
clickCb: function (obj) {
console.log("選中日期回調：", obj);
},
initCb: function (date) {
console.log("初始化回調===>", date);
// data為通過日期獲取到的當月數據
var data = [{
date: 1,
title: "早",
timePeriod: "00:00-08:00"
},
{
date: 2,
title: "中",
timePeriod: "01:00-09:00"
},
{
date: 10,
title: "晚",
timePeriod: "08:00-16:00"
},
{
date: 4,
title: "早",
timePeriod: "09:00-17:00"
},
{
date: 25,
title: "早",
timePeriod: "00:00-08:00"
},
]
this.bindData(data)
},
})