当前位置：首页 > news >正文

javascript画全年日历

news 来源：原创 2023/3/27 22:43:42

前些日子闲聊群里有人提了用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()以下被点击的日期，这个自己根据业务需要实现。

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

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

查看全文中文繁体

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.exyb.cn/news/show-4501757.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈，一经查实，立即删除！