[JS]基于JQ的简单日历组件

开门见山，需求UI如图

找了几个日历插件，越看越麻烦，直接上手撸更容易满足定制化需求

 

HTML:

<div id="calendarArea"> </div>

---

JS:

function getDays(year, month, day) {

var columnIndex = 1, cellIndex = 1;

var prevMonth = new Date(year, month - 1, 0);

var prevDays = [];

// 填充前一月的空位

while (prevMonth.getDay() !== 6) {

prevDays.unshift(prevMonth.getDate())

prevMonth.setDate(prevMonth.getDate() - 1)

}

prevDays.forEach(day => {

var cell = getCell(columnIndex, cellIndex);

cell.innerHTML = '<div class="td-container" style="color:rgba(0,0,0,0)">' + day + '</div>';

cellIndex++

})

// 当前月从1号开始

var nowDay = 1;

var nowMonth = new Date(year, month - 1, 1);

var lastDay = new Date(year, month - 1, day).getDate();

while (nowDay <= lastDay) {

if (cellIndex > 7) {

cellIndex = 1;

columnIndex++;

}

var cell = getCell(columnIndex, cellIndex);

if (true) { // 判断是否异常

cell.innerHTML = '<div class="td-container" style="color:#fff;background-color:rgb(255,93,92);" onclick="showAlarmDetail()"><div>' + nowDay + '</div><div>异常</div></div>';

} else {

cell.innerHTML = '<div class="td-container" style="background-color:rgb(244,244,244)">' + nowDay + '</div>';

}

cellIndex++;

nowDay++;

nowMonth.setDate(nowDay);

}

}

// 获取到td的dom list

function getCell(column, cell) {

return document.querySelectorAll('#table' + calendarIdx + ' tbody tr')[column - 1].querySelectorAll('td')[cell - 1]

}

// 渲染单个月

const renderSingleMonth = (year, month, day) => {

$("#calendarArea").append('<table cellspacing=0 style="bordercolor:#C0C0C0;text-align:center;" width="100%" id="table' + calendarIdx + '">' +

'<thead><tr>' + month + '月</tr>' +

// '<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>' +

'</thead><tbody>' +

'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>' +

'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>' +

'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>' +

'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>' +

'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>' +

'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>' +

'</tbody></tbale>');

let days = getDays(year, month, day);

}

let currentDate = new Date();

let calendarIdx = 0

let year = currentDate.getFullYear()

let month = currentDate.getMonth() + 1

let lastDay = currentDate.getDate()

renderSingleMonth(year, month, lastDay)

calendarIdx++;

month--;

// 上一个月的calendar

lastDay = new Date(year, month, 0).getDate();

renderSingleMonth(year, month, lastDay)

calendarIdx++;

month--;

// 上上个月的calendar

lastDay = new Date(year, month, 0).getDate();

renderSingleMonth(year, month, lastDay)

calendarIdx++;

month--;

···

效果如下：

细节完善就不po了~