JavaScript 日历

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
table {display: inline-block;border: 1px solid red;/**HTML5 中 table的cellspacing和cellpadding时被提示该属性已过时或者提示非法属性border-collapse定义为collapse时，他们的边框会重叠在一起，定义为separate时单元格边框之间会有间隙*/border-collapse:collapse;
}
table td {padding: 0;width: 2rem;height: 2rem;text-align: center;box-sizing: border-box;transition: border-radius .5s ease, border-color .5s;overflow-y: hidden;
}
/* 本来最简单的方法是设置overflow:hidden来遮住多余的背景，但是发现行不通 */
.goPrevMonth>span, .goNextMonth>span {display: inline-block;/** 由于原先的箭头太瘪了，需要拉伸 */transform: scale(1,1.5);/** 由于箭头是文字，因此会被选中，需要设置禁止选中，不然很难看 */user-select: none;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;
}
.goPrevMonth:active, .goNextMonth:active {background-color: Bisque;
}
#calendar tr:nth-child(2) {background-color: SkyBlue;
}
.prevMonth, .nextMonth {color: gray;
}
.week {color: Snow;font-weight: bold;
}
.today {border-radius: 50%;color: white;background-color: Coral;font-weight: bold;
}
.today:hover {box-shadow: 0 0 5px red inset , 0 0 3px orange;border-radius: 0%;
}
.currentMonth {/** 如果不设置的话，默认的起始色为黑色 */border-color: transparent;
}
.currentMonth:hover {border: 2px groove lightgray;
}
</style>
<script>
class CalendarRender {constructor (container) {this.container = container;this.dayOfWeek = ["一","二","三","四","五","六","日"];this.today = new Date();//getMonth的月份的参数介于0-11之间this.firstDayOfMonth = new Date(this.today.getFullYear(), this.today.getMonth(), 1);this.update(0);}//前一个月goPrevMonth() {this.update(-1);}//后一个月goNextMonth() {this.update(1);}calc() {this.data = new Array();const isCurrentMonth = this.firstDayOfMonth.getMonth() == this.today.getMonth();const lastDateOfMonth = new Date(this.firstDayOfMonth.getFullYear(), this.firstDayOfMonth.getMonth()+1, 0);const lastDate = lastDateOfMonth.getDate();//星期日的值为0const firstDay = this.firstDayOfMonth.getDay();let prevCount = 0;let prevLastDate = 0;if(firstDay != 1) {const firstDayOfMonthYesterday = new Date(this.firstDayOfMonth.getFullYear(), this.firstDayOfMonth.getMonth(), 0);prevLastDate = firstDayOfMonthYesterday.getDate();if(firstDay == 0) {prevCount = 6;} else {prevCount = firstDay - 1;}}let n = 0;let m = 0;for(let i=0; i<5; i++) {for(let j=0; j<7; j++) {if(i == 0 && prevCount > j) {this.data.push([prevLastDate - prevCount + 1 + j, -1]);} else if(n == lastDate) {m++;this.data.push([m,1]);} else {n++;if(isCurrentMonth && n == this.today.getDate()) {this.data.push([n,0xFF]);} else {this.data.push([n,0]);}}}}}render() {this.container.innerHTML = "";let index = 0, tr, td;const table = document.createElement("table");tr = document.createElement("tr");const lttd = document.createElement("td");const gttd = document.createElement("td");td = document.createElement("td");//getMonth的月份的参数介于0-11之间td.textContent = this.firstDayOfMonth.getFullYear() + " 年 " + (this.firstDayOfMonth.getMonth()+1) + " 月"//colSpan设置列跨度，rowSpan设置行跨度td.colSpan = 5;lttd.innerHTML = "<span>&lt</span>";gttd.innerHTML = "<span>&gt</span>";lttd.className = "goPrevMonth";gttd.className = "goNextMonth";table.appendChild(tr);tr.appendChild(lttd);tr.appendChild(td);tr.appendChild(gttd);//这么写是错误的，因为click函数中的this不是当前对象，因此可以通过缓存this的办法解决//lttd.onclick = this.goPrevMonth;//gttd.onclick = this.goNextMonth;const that = this;lttd.onclick=()=>{that.goPrevMonth.apply(that)};gttd.onclick=()=>{that.goNextMonth.apply(that)};tr = document.createElement("tr");for(let i=0; i<this.dayOfWeek.length; i++) {td = document.createElement("td");td.innerText = this.dayOfWeek[i];td.className = "week";tr.appendChild(td);}table.appendChild(tr);for(let i=0; i<5; i++) {tr = document.createElement("tr");for(let j=0; j<7; j++) {td = document.createElement("td");const data = this.data[index];td.textContent = data[0];index++;let className;switch(data[1]) {case -1:className = "prevMonth";break;case 0:className = "currentMonth";break;case 1:className = "nextMonth";break;case 0xFF:className = "today";break;}td.className = className;tr.appendChild(td);}table.appendChild(tr);}this.container.appendChild(table);}update(monthDiff) {this.firstDayOfMonth.setMonth(this.firstDayOfMonth.getMonth()+monthDiff);this.calc();this.render();}
}
window.()=>{const calendar = document.getElementById("calendar");const tool = new CalendarRender(calendar);
}
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>

JavaScript 日历相关推荐

精心挑选12款优秀的 JavaScript 日历和时间选择插件
今天这篇文章向大家分享12款精心挑选的优秀 JavaScript 日历和时间选择插件,都带有详细的使用教程和效果演示.这些插件能够帮助 Web 开发人员更快速的实现各种精美的日历和时间选择效果.同时推 ...
12款优秀的 JavaScript 日历和时间选择控件
这些插件能够帮助 Web 开发人员更快速的实现各种精美的日历和时间选择效果. 1. The Coolest Calendar 界面非常漂亮的一款日期选择插件,有详细的使用文档,最新版本 1.5. 点 ...
javascript日历插件
javascript日历插件原文:javascript日历插件 javascript日历插件最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的 ...
JavaScript日历（es5版本）
近期在知乎上看到这么一个帖子,题主说自己JavaScript都学完了,结果老师留的作业还是不会写,就是写一个日历的插件,结果楼下一堆大牛出现了,百度的阿里的纷纷站出来发表自己的看法,有人认为简单,有人 ...
前端ui组件(1):日程排班—11个优秀JavaScript 日历插件
日历是我们生活中重要的一部分.在当今世界,人们大多使用网络或移动日历.它们随处可见,包括在各种软件中:预订应用.旅行软件.项目管理.管理面板等. 出于多种原因,用户可能需要在网站上使用日历.用户需要容 ...
Javascript日历
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD& ...
11个顶级 JavaScript 日历插件
参考链接:https://mp.weixin.qq.com/s?__biz=MzI3NzIzMDY0NA==&mid=2247487050&idx=1&sn=e1cf66726 ...
JS日历控件优化(增加时分秒)
JS日历控件优化在今年7月份时候写了一篇关于 "JS日历控件" 的文章 , 当时只支持年月日的日历控件,现在优化如下: 1. 在原基础上支持 yyyy-mm- ...
Calendars - 日历插件
Calendars - 日历插件 1)jQuery Frontier Calendar是一个可灵活定制的月日历jQuery插件,看起来类似于Google Calendar.当在一个日期单元格中有比较多 ...

JavaScript 日历

JavaScript 日历相关推荐

最新文章

热门文章