日历控件

这个日历控件可以灵活的应用到pc/wap站，可以选择下拉加载更多月份/点击左右按钮切换上月下月/可以固定的显示json数据中相应的月份

html

					

						

							
							

							
						
						

							
日
							
一
							
二
							
三
							
四
							
五
							
六
						
						


						
					
				

　　css

.calendar {
	margin: 0 20px;
	width: 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%;
	width: calc(100%/ 7);
	position: relative;
	cursor: pointer;
	line-height: 40px;
	width: 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 {
	width: 54px;
	height: 54px;
}

.calendar .calendar-btn a.leftbtn {
	background: url(../src/images/[email protected]) no-repeat center;
	background-size: 8px;
}

.calendar .calendar-btn a.rightbtn {
	background: url(../src/images/[email protected]) 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;
	width: 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 = '
';
		//		calendarList += '
' + newYears + '日' + newMonths + '月
';
		calendarList += '
';
		if(emptyAll > 0) {
			for(var j = 0; j < emptyAll; j++) {
				calendarList += ('
');
			}
		}

		//判断是否是这个月
		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 += ('
' + days + '
');
				} else if(i == newDate) { //今日
					calendarList += ('
' + days + '
');
				} else { //今日以后
					calendarList += ('
' + days + '
');
				}
			}
		} else {
			for(var i = 1; i <= newDayNum; i++) {
				var days = i > 9 ? i : '0' + i;
				calendarList += ('
' + days + '
');
			}
		}

		calendarList += '
' +
			'
';
		$(".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('' + item.show + '')
					} 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": ""
  }
]