javascript画全年日历
创始人
2024-05-12 11:39:27
前些日子闲聊群里有人提了用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=`${month}月 一 二 三 四 五 六 七 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+=``;for(var j in dateArr[i]){var t=`${year}-${month}-${dateArr[i][j]}`;if(tagData.indexOf(t)>=0){html+=`${dateArr[i][j]} `;}else{html+=`${dateArr[i][j]} `;}}html+=` `;}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()以下被点击的日期，这个自己根据业务需要实现。
后面这个数组就是要高亮显示的日期
代码都有注释，比较明了了
下一篇：动态规划之01背包问题
相关内容
热门资讯
demo什么意思 demo版本...
618快到了，各位的小金库大概也在准备开闸放水了吧。没有小金库的，也该向老婆撒娇卖萌服个软了，一切只...
苗族的传统节日 贵州苗族节日有...
【岜沙苗族芦笙节】岜沙，苗语叫“分送”，距从江县城7.5公里，是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景...
北京从元代开始，逐渐走上帝国首都的道路，先是成为大辽朝五大首都之一的南京城，随着金灭辽，金代从海陵王...
长白山自助游攻略 吉林长白山游...
昨天介绍了西坡的景点详细请看链接：一个人的旅行，据说能看到长白山天池全凭运气，您的运气如何？今日介绍...