javascript画全年日历

        前些日子闲聊群里有人提了用js画全年日历的需求，趁闲暇时间画了个小demo，下面还是先上效果图吧。

        高亮显示的是今天的日期和标记要高亮显示的日期，也添加了点击事件的钩子，自己可以实现钩子函数，从而操作点击的日期值。

下面还是先上dai

/**
 * 日历视图
 */
class DateView{
	/**
	 * [constructor 构造]
	 * @param  {[type]} option [description]
	 * @return {[type]}        [description]
	 */
	constructor(option){
		this.FtColor=option?.FtColor==undefined?"#000":option?.FtColor;
		this.BdColor=option?.BdColor==undefined?"#fff":option?.BdColor;
		this.BgColor=option?.BgColor==undefined?"#fff":option?.BgColor;
		this.FtSize=option?.FtSize==undefined?"30px":option?.FtSize;
		this.padding=option?.padding==undefined?"10px":option?.padding;
		this.parent=option?.parent==undefined?"body":option?.parent;
		this.index=0;
	}
	/**
	 * [setFtColor 设置字体颜色]
	 * @param {[type]} FtColor [description]
	 */
	setFtColor(FtColor){
		this.FtColor=FtColor;
		return this;
	}
	/**
	 * [setBdColor 设置边框颜色]
	 * @param {[type]} BdColor [description]
	 */
	setBdColor(BdColor){
		this.BdColor=BdColor;
		return this;
	}
	/**
	 * [setBgColor 设置背景颜色]
	 * @param {[type]} BgColor [description]
	 */
	setBgColor(BgColor){
		this.BgColor=BgColor;
		return this;
	}
	/**
	 * [setFtSize 设置字体大小]
	 * @param {[type]} FtSize [description]
	 */
	setFtSize(FtSize){
		this.FtSize=FtSize;
		return this;
	}
	/**
	 * [setPadding 设置padding]
	 * @param {[type]} padding [description]
	 */
	setPadding(padding){
		this.padding=padding;
		return this;
	}
	/**
	 * [setParent 设置日历容器]
	 * @param {[type]} parent [description]
	 */
	setParent(parent){
		this.parent=parent;
		return this;
	}
	/**
	 * [drawDateByMonth 取得某一月的日历视图]
	 * @param  {[type]} yearOrmonth [年或月]
	 * @param  {[type]} Month       [月]
	 * @param  {[type]} callBack    [钩子函数，点击日期后的动作]
	 * @param  {[type]} width       [控件宽度]
	 * @param  {[type]} tagData     [需要高亮显示的日期数据如['2023.1.12','2023.1.13']]
	 * @return {[type]}             [description]
	 */
	drawDateByMonth(yearOrmonth,Month,callBack,width,tagData){
		let date=new Date();
		let year,month;
		if(yearOrmonth==undefined){
			year=date.getFullYear();
			month=date.getMonth()+1;
		}else if(yearOrmonth!=undefined&&yearOrmonth>12){
			year=yearOrmonth;
			if(Month==undefined){
				throw new Error("缺少参数“月份”");
			}
			month=Month;
		}else{
			year=date.getFullYear();
			month=yearOrmonth;
		}
		if(year<1900||year>2100){
			throw new Error("年份超出了限定区间1900-2100");
		}
		let html=`<style>
			.dateView${this.index}{
				position: relative;
				${width};
				margin-left:10px;
				color:${this.FtColor};
				font-size: ${this.FtSize};
				background: ${this.BdColor};
				display:inline-block;
				vertical-align:top;
				padding:10px;
			}
			.dateView${this.index} tr{
				background: ${this.BdColor};
			}
			.dateView${this.index} tr td{
				background: ${this.BgColor};
				padding: ${this.padding};
				cursor:pointer;
			}
			.dateView${this.index}Tag{
				color:${this.BgColor};
				background: ${this.FtColor} !important;
			}
		</style>
		<table class="dateView${this.index}">
		<tr>
			<td colspan="7">${month}月</td>
		</tr>
		<tr>
			<td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td><td>七</td>
		</tr>`;

		let days=this.getDaysByYearAndMonth(year,month);//本月多少天
		let firstDay=new Date(year+"/"+month+"/1 1:1:1").getDay();//本月第一天是星期几
		firstDay=firstDay==0?6:firstDay-1;
		let weeks=Math.ceil((days+firstDay)/7);//本月有几周
		let dateArr=[];
		for(var i=1;i<weeks*7+1;i++){
			if((i-firstDay<=0)||(i-firstDay>days)){
				dateArr.push("");
			}else{
				dateArr.push(i-firstDay);
			}
		}
		function splitArray(array, size){
		  let data = [];
		  for (let i = 0; i < array.length; i += size) {
		    data.push(array.slice(i, i + size))
		  }
		  return data
		}
		dateArr=splitArray(dateArr,7);
		tagData=tagData==undefined?[]:tagData;
		let today=new Date();
		today=today.getFullYear()+"-"+(today.getMonth()+1)+"-"+today.getDate();
		tagData.push(today);
		for(var i in dateArr){
			html+=`<tr>`;
			for(var j in dateArr[i]){
				var t=`${year}-${month}-${dateArr[i][j]}`;
				if(tagData.indexOf(t)>=0){
					html+=`<td class="dateView${this.index}Tag" t="${t}">${dateArr[i][j]}</td>`;
				}else{
					html+=`<td t="${t}">${dateArr[i][j]}</td>`;
				}
			}
			html+=`</tr>`;
		}
		if(this.parent=="body"){
			document.body.insertAdjacentHTML("beforeend",html);
		}else{
			document.querySelector(this.parent).insertAdjacentHTML("beforeend",html);
		}
		if(callBack!=undefined){
			document.querySelector(`.dateView${this.index}`).addEventListener('click',function(e){
				if(e.target.getAttribute("t")!=null){
					callBack(e.target.getAttribute("t"));
				}
			});
		}
		
		this.index++;
	}
	/**
	 * [getDaysByYearAndMonth 根据年月取得月份的天数]
	 * @param  {[type]} year  [年]
	 * @param  {[type]} month [月]
	 * @return {[type]}       [description]
	 */
	getDaysByYearAndMonth(year,month){
		if([1,3,5,7,8,10,12].indexOf(month)>=0){
			return 31;
		}else if(month==2){
			if(year%100==0){
				if(year%400==0){
					return 29;
				}else{
					return 28;
				}
			}else{
				if(year%4==0){
					return 29;
				}else{
					return 28;
				}
			}
		}else{
			return 30;
		}
	}
	/**
	 * [drawDateByYear 画出某一年全年的日历]
	 * @param  {[type]} year     [年]
	 * @param  {[type]} cols     [一行显示几个月份]
	 * @param  {[type]} callBack [钩子函数，点击日期后的动作]
	 * @param  {[type]} tagData  [需要高亮显示的日期数据如['2023.1.12','2023.1.13']]
	 * @return {[type]}          [description]
	 */
	drawDateByYear(year,cols,callBack,tagData){
		year=year==undefined?new Date().getFullYear():year;
		cols=cols==undefined?5:cols;
		let width="width:"+Math.floor(100/cols-1)+"%";
		console.log(width)
		for(var i=1;i<=12;i++){
			this.drawDateByMonth(year,i,callBack,width,tagData);
		}
	}
}




let d=new DateView({
	FtSize:"20px",
	FtColor:"#123ae3"
});
d.drawDateByYear(2023,5,function(v){
	alert(v);
},[
	'2023-10-13',
	'2023-9-26',
	'2023-10-12'
]);

使用也很简单，本文开始的效果图，实现代码如下

let d=new DateView({
	FtSize:"20px",
	FtColor:"#123ae3"
});
d.drawDateByYear(2023,5,function(v){
	alert(v);
},[
	'2023-10-13',
	'2023-9-26',
	'2023-10-12'
]);

 其中FtSize为字体大小，Ftcolor为字体颜色，具体设置看构造函数，也有单独的设置字体大小颜色等配置的函数，通过链式操作即可，例如

let d=new DateView({
    FtSize:"20px",
    FtColor:"#123ae3"
});

也可以写成

let d=new DateView();

d.setFtColor("#123ae3").FtSize("20px");

或者也可以不传入任何参数，将默认输出黑白日历

drawDateByYear()方法画出全年的日历，也可以用drawDateByMonth()方法画出某个月的单月日历，默认将日历dom插入到body里，也可以通过传入parent修改日历容器，例如某个div，d.drawDateByYear(2023,5,function(v){
    alert(v);
},[
    '2023-10-13',
    '2023-9-26',
    '2023-10-12'
]);

其中这个匿名函数

function(v){
    alert(v);
}为点击回调的钩子函数，这个是点击相应日期后alert()以下被点击的日期，这个自己根据业务需要实现。

后面这个数组就是要高亮显示的日期

代码都有注释，比较明了了