这个日历控件可以灵活的应用到pc/wap站，可以选择下拉加载更多月份/点击左右按钮切换上月下月/可以固定的显示json数据中相应的月份
html
<div class="calendar-con"> <div class="calendar"> <div class="calendar-btn"> <a class="leftbtn" href="javascript:;"></a> <h3></h3> <a class="rightbtn" href="javascript:;"></a> </div> <ol class="title"> <li>日</li> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> </ol> <div class="content"> </div> </div> </div>
css
.calendar {
margin: 0 20px;
calc(100% - 40px);
}
.calendar .title {
display: flex;
}
.calendar .title li {
flex: 1;
height: 40px;
line-height: 40px;
}
.calendar .list ul {
display: flex;
flex-wrap: wrap;
}
.calendar .list ul li {
text-align: center;
height: 40px;
font-size: 14px;
color: #000;
text-decoration: initial;
letter-spacing: 0.6px;
border-radius: 50%;
calc(100%/ 7);
position: relative;
cursor: pointer;
line-height: 40px;
40px;
margin-right: 16px;
}
.calendar .list ul li:nth-child(7n){
margin-right: 0;
}
.calendar .list ul li:nth-child(7n),
.calendar .list ul li:nth-child(7n+1),
.calendar .title ol li:nth-child(7n),
.calendar .title ol li:nth-child(7n+1) {
color: #DDA526;
}
.calendar .list ul li.active {
background-image: linear-gradient(82deg, #0675e6 0%, #021b7a 100%);
color: #fff;
}
.calendar .calendar-btn {
margin-top: 10px;
height: 54px;
display: flex;
justify-content: space-between;
align-items: center;
}
.calendar .calendar-btn a {
54px;
height: 54px;
}
.calendar .calendar-btn a.leftbtn {
background: url(../src/images/Path@2x.png) no-repeat center;
background-size: 8px;
}
.calendar .calendar-btn a.rightbtn {
background: url(../src/images/PathCopy@2x.png) no-repeat center;
background-size: 8px;
}
.calendar .calendar-btn h3 {
font-size: 25px;
font-family: Impact;
color: #666;
}
.calendar .list ul li.disabled {
color: #dedede;
}
.calendar .list ul li.active {
background-image: linear-gradient(82deg, #0675e6 0%, #021b7a 100%);
color: #fff;
}
.calendar .list ul li.closure {
color: #999;
}
.calendar .list ul li.closure i {
font-style: normal;
font-size: .16rem;
color: #999;
position: absolute;
100%;
display: block;
height: .22rem;
bottom: .32rem;
}
js
function calendar(obj) {
var myDate = new Date(); //获取当前日期
var newDate = myDate.getDate(); //今天几号
var newDay = myDate.getDay(); //今天周几
var newMonth = myDate.getMonth(); // 这是几月
var newFullYear = myDate.getFullYear(); // 这是哪年
var obj = obj;
var dateArr = [];
console.log(obj)
obj.map((item) => {
dateArr.push(new Date(item.date))
})
var maxDate = new Date(Math.max.apply(null, dateArr)); //数据中最大的日期（月）
var maxMonth = maxDate.getMonth() + 1;
var maxYear = maxDate.getFullYear();
var minDate = new Date(Math.min.apply(null, dateArr)); //数据中最小的日期（月）
var minMonth = minDate.getMonth() + 1;
var minYear = minDate.getFullYear();
var monthMaxNum = maxMonth - newMonth + (maxYear - newFullYear) * 12; //最多
var monthMinNum = newMonth - minMonth + (newFullYear - minYear) * 12 + 1; //最少
function calendarCon(newYears, newMonths) {
var oldDate = new Date(newYears, newMonths);
var calendarList;
oldDate.setMonth(newMonths);
oldDate.setDate(0);
var newDayNum = oldDate.getDate(0); //获取天数
oldDate.setDate(1);
var emptyAll = oldDate.getDay(); //获取每月空白数量
if(newMonth == 0) {
newYears -= 1;
}
newMonths = newMonths == 0 ? 12 : newMonths;
newMonths = newMonths > 9 ? newMonths : '0' + newMonths;
calendarList = '<div class="list">';
// calendarList += '<h3>' + newYears + '日' + newMonths + '月</h3>';
calendarList += '<ul>';
if(emptyAll > 0) {
for(var j = 0; j < emptyAll; j++) {
calendarList += ('<li></li>');
}
}
//判断是否是这个月
if((myDate.getMonth() + 1) == newMonths && myDate.getFullYear() == newYears) {
for(var i = 1; i <= newDayNum; i++) {
var days = i > 9 ? i : '0' + i;
if(i < newDate) { // 今日以前
calendarList += ('<li _date="' + newYears + '-' + newMonths + '-' + days + '" class="disabled">' + days + '</li>');
} else if(i == newDate) { //今日
calendarList += ('<li _date="' + newYears + '-' + newMonths + '-' + days + '" class="disabled">' + days + '</li>');
} else { //今日以后
calendarList += ('<li _date="' + newYears + '-' + newMonths + '-' + days + '" class="disabled">' + days + '</li>');
}
}
} else {
for(var i = 1; i <= newDayNum; i++) {
var days = i > 9 ? i : '0' + i;
calendarList += ('<li _date="' + newYears + '-' + newMonths + '-' + days + '" class="disabled" >' + days + '</li>');
}
}
calendarList += '</ul>' +
'</div>';
$(".calendar .calendar-btn h3").html(newYears + "," + newMonths)
return calendarList;
};
//滚动加载更多
// $(".calendar .content").on("resize scroll", function() {
// var windowHeight = $(".calendar .content").height(); //当前窗口的高度
// var scrollTop = $(".calendar .content").scrollTop(); //当前滚动条从上往下滚动的距离
// var docHeight = $(".calendar .content .list").height() * $(".calendar .content .list").length; //当前文档的高度
// //console.log(scrollTop, windowHeight, docHeight);
// //换句话说：（滚动条滚动的距离 + 窗口的高度 = 文档的高度） 这个是基本的公式
// if((scrollTop + windowHeight - 20) >= docHeight) {
// monthNum++;
//
// //月超12，年加1，月归0;
// for(var i = 0; i < monthNum; i++) {
// newMonth++
// if(newMonth > 11) {
// newMonth = 0;
// newFullYear += 1;
// }
// $(".calendar .content").append(calendarCon(newFullYear, newMonth))
// }
// }
// });
var monthAllNum = monthMaxNum + monthMinNum;
$(".calendar .calendar-btn a").click(function() {
if($(this).hasClass('rightbtn')) {
monthMaxNum--;
monthMinNum++;
if(monthMinNum >= monthAllNum) {
monthMinNum = monthAllNum;
}
if(monthMaxNum <= 0) {
monthMaxNum = 1;
return false
}
newMonth++;
} else if($(this).hasClass('leftbtn')) {
monthMinNum--;
monthMaxNum++;
if(monthMaxNum >= monthAllNum) {
monthMaxNum = monthAllNum;
}
if(monthMinNum <= 0) {
monthMinNum = 1;
return false
}
newMonth--;
}
console.log(newMonth)
if(newMonth > 11) {
newMonth = 0;
newFullYear += 1;
} else if(newMonth <= 0) {
newMonth = 12;
newFullYear -= 1;
}
$(".calendar .content").empty();
$(".calendar .content").append(calendarCon(newFullYear, newMonth))
_optionalDate()
})
//月超12，年加1，月归0;
for(var i = 0; i < 1; i++) {
newMonth++
if(newMonth > 11) {
newMonth = 0;
newFullYear += 1;
}
$(".calendar .content").append(calendarCon(newFullYear, newMonth));
}
function _optionalDate() {
$(".calendar .list ul li").each(function() {
var _this = $(this);
var _date = _this.attr('_date');
obj.map((item) => {
//console.log(item.date)
//console.log(_date , item.date)
if(_date == item.date) {
if(!item.open) {
_this.attr('class', 'closure');
_this.append('<i>' + item.show + '</i>')
} else {
_this.attr('class', '');
}
}
})
})
}
_optionalDate();
$(".calendar").on('click', ' .list ul li', function() {
if(!$(this).hasClass('disabled') && !$(this).hasClass('closure') && $(this).html() != '') {
$(this).addClass('active').siblings().removeClass('active');
}
})
}
json
[
{
"date": "2018-08-08",
"open": true,
"show": ""
},
{
"date": "2019-08-09",
"open": false,
"show": "闭馆"
},
{
"date": "2019-08-10",
"open": true,
"show": ""
},
{
"date": "2019-08-11",
"open": true,
"show": ""
},
{
"date": "2019-08-12",
"open": true,
"show": ""
},
{
"date": "2019-08-13",
"open": true,
"show": ""
},
{
"date": "2019-08-14",
"open": true,
"show": ""
},
{
"date": "2019-08-15",
"open": true,
"show": ""
},
{
"date": "2019-08-16",
"open": false,
"show": "闭馆"
},
{
"date": "2019-11-17",
"open": true,
"show": ""
}
]