当前位置：网站首页>原生js打造日程表-支持鼠标滚轮滚动选择月份-可以移植到任何框架中
原生js打造日程表-支持鼠标滚轮滚动选择月份-可以移植到任何框架中
2022-07-01 18:44:00 【紫微前端】
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.calendar {
width: 100%;
border: 1px solid #e7e7e8;
user-select: none;
}
.calendar .calendar_title {
padding: .5em 0 .5em 0;
text-align: center;
border-bottom: 1px solid #e7e7e8
}
.calendar .calendar_week {
padding: .5em 0 .5em 0;
}
.calendar .calendar_week span {
width: 14.2857%;
text-align: center;
display: inline-block;
}
.calendar .calendar_dateCon .noEmpty {
padding: .5em;
width: 14.2857%;
text-align: left;
display: inline-block;
min-height: 120px;
float: left;
}
.calendar .calendar_dateCon {
border-bottom: 1px solid #e7e7e8;
}
.calendar .calendar_dateCon::after {
content: '';
display: block;
clear: both;
}
.calendar .noEmpty {
border: 1px solid #e7e7e8;
border-right: 0px;
border-bottom: 0px;
}
.calendar .noEmpty:nth-child(7n) {
border-right: 1px solid #e7e7e8;
}
.dayNumText {
font-weight: 800;
font-size: 14px
}
.activeDay .dayNumText {
background: #267ef0;
color: white!important;
border-radius: 100%;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 12px;
}
.icon {
width: 16px;
height: 16px;
vertical-align: -0.2em;
cursor: pointer;
}
.icon:hover {
transform: scale(1.2);
}
.prevMonth .dayNumText,
.nextMonth .dayNumText {
color: gray
}
.firstLine {
display: flex;
justify-content: space-between;
}
.blueDot {
background: #2d8eff;
width: 5px;
height: 5px;
display: inline-block;
border-radius: 100%;
vertical-align: 0.1em;
}
.taskLine,
.taskLineMore {
font-size: 12px;
margin-top: 5px;
}
.taskLineMore {
color: #6d7176
}
.taskLine>span {
margin-right: 5px;
}
.nowMonth {
/* background: repeating-linear-gradient(45deg, rgb(212, 209, 209) 7%, #fff 10%); */
}
</style>
</head>
<body>
<div id="rili"></div>
<script type="text/javascript">
// 判断是否是闰年
function isLeapYear(year) {
return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);
}
// 关键！关键！关键！
// 获取某年某月的第一天是周几
function getMonthFirstDayWeek(year, month) {
var month = +month - 1;
var date = new Date();
date.setFullYear(year);
date.setMonth(month);
date.setDate(1);
return date.getDay();
}
// 获取某年某月的天数
function getDay(year, month) {
var month = +month;
// 天的数组
var day31 = [];
var day30 = [];
var day29 = [];
var day28 = [];
for (var i = 1; i <= 31; i++) {
day31.push(i);
if (i <= 30) {
day30.push(i);
}
if (i <= 29) {
day29.push(i);
}
if (i <= 28) {
day28.push(i);
}
}
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
return day31;
}
if (month == 4 || month == 6 || month == 9 || month == 11) {
return day30;
}
// 当月份等于2时，如果是闰年就返回29天，如果是平年就返回28天
if (month == 2) {
if (isLeapYear(year)) {
return day29;
} else {
return day28;
}
}
}
// 年
var year = new Date().getFullYear();
// 月
var month = new Date().getMonth() + 1;
var selectNowDay = "[year='" + new Date().getFullYear() + "']" + "[month='" + (new Date().getMonth() + 1) + "']" + "[value='" + (new Date().getDate()) + "']"
function prevMonthClick() {
if (month == 1) {
var prevMonth = 12;
var prevYear = +year - 1;
} else {
var prevMonth = +month - 1;
var prevYear = +year;
}
year = prevYear;
month = prevMonth;
document.getElementById("rili").innerHTML = createRi(prevYear, prevMonth);
if (document.querySelector(selectNowDay)) {
document.querySelector(selectNowDay).classList.add("activeDay")
document.querySelector(selectNowDay).querySelector(".taskCon").innerHTML = `
<div class="taskLine"><span class='blueDot'></span><span>14:00</span><span>无主题</span></div>
<div class="taskLine"><span class='blueDot'></span><span>14:00</span><span>无主题</span></div>
<div class="taskLineMore">还有两个日程</div>
`
}
}
function nextMonthClick() {
// 下一个月份
if (month == 12) {
var nextMonth = 1;
var nextYear = +year + 1;
} else {
var nextMonth = +month + 1;
var nextYear = year;
}
year = nextYear;
month = nextMonth;
document.getElementById("rili").innerHTML = createRi(nextYear, nextMonth);
if (document.querySelector(selectNowDay)) {
document.querySelector(selectNowDay).classList.add("activeDay")
document.querySelector(selectNowDay).querySelector(".taskCon").innerHTML = `
<div class="taskLine"><span class='blueDot'></span><span>14:00</span><span>无主题</span></div>
<div class="taskLine"><span class='blueDot'></span><span>14:00</span><span>无主题</span></div>
<div class="taskLineMore">还有两个日程</div>
`
}
}
document.onmousewheel = function(event) {
var target = event.target;
var con = document.querySelector(".calendar_dateCon")
if (!con.contains(target)) {
return
}
if (event.deltaY < 0) {
prevMonthClick()
}
if (event.deltaY > 0) {
nextMonthClick()
}
}
document.getElementById("rili").innerHTML = createRi(year, month);
document.querySelector(selectNowDay).classList.add("activeDay");
document.querySelector(selectNowDay).querySelector(".taskCon").innerHTML = `
<div class="taskLine"><span class='blueDot'></span><span>14:00</span><span>无主题</span></div>
<div class="taskLine"><span class='blueDot'></span><span>14:00</span><span>无主题</span></div>
<div class="taskLineMore">还有两个日程</div>
`
function createRi(year, month) {
// 日历头部
var str = '<div class="calendar" value="{
{month}}">' +
`<div class="calendar_title">
<svg title="上一月" onclick="prevMonthClick()" t="1656645725615" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2384" width="200" height="200"><path d="M910.222222 796.444444c-17.066667 0-34.133333-5.688889-45.511111-17.066666L551.822222 409.6c-11.377778-5.688889-17.066667-11.377778-34.133333-11.377778-5.688889 0-22.755556 5.688889-28.444445 11.377778l-329.955555 364.088889c-22.755556 22.755556-56.888889 22.755556-79.644445 5.688889-22.755556-22.755556-22.755556-56.888889-5.688888-79.644445l329.955555-364.088889c28.444444-34.133333 73.955556-51.2 119.466667-51.2s85.333333 22.755556 119.466666 56.888889l312.888889 364.088889c22.755556 22.755556 17.066667 56.888889-5.688889 79.644445-11.377778 5.688889-28.444444 11.377778-39.822222 11.377777z" p-id="2385"></path></svg>
<svg title="下一月" onclick="nextMonthClick()" t="1656645659090" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2229" width="200" height="200"><path d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z" p-id="2230"></path></svg>
{
{year}}年{
{month}}月</div>` +
'<div class="calendar_week">' +
'<span>周日</span><span>周一</span><span>周二</span><span>周三</span><span>周四</span><span>周五</span><span>周六</span>' +
'</div>' +
'<div class="calendar_dateCon">{
{days}}</div>' +
'</div>';
// 替换月份
var str = str.replaceAll("{
{year}}", year).replaceAll("{
{month}}", month);
// 获取某年某月的第一天是周几，周一就代表在天数前面增加一个空格，周二就代表在天数前面增加二个空格
// 周天就代表在天数前面增加零个空格
// 上一个月份
if (month == 1) {
var prevMonth = 12;
var prevYear = +year - 1;
} else {
var prevMonth = +month - 1;
var prevYear = +year;
}
var emptySpanPrev = getMonthFirstDayWeek(prevYear, prevMonth);
var daysPrev = getDay(prevYear, prevMonth);
// 当前月份
var emptySpan = getMonthFirstDayWeek(year, month);
var days = getDay(year, month);
var emptyHeadArr = [];
for (var i = 0; i < emptySpan; i++) {
emptyHeadArr.push(daysPrev[daysPrev.length - emptySpan + i])
}
// 下一个月份
if (month == 12) {
var nextMonth = 1;
var nextYear = +year + 1;
} else {
var nextMonth = +month + 1;
var nextYear = year;
}
var emptySpanNext = getMonthFirstDayWeek(nextYear, nextMonth);
var daysNext = getDay(nextYear, nextMonth);
var emptyEndArr = [];
if (emptySpanNext != 0) {
for (var i = 0; i < (7 - emptySpanNext); i++) {
emptyEndArr.push(daysNext[i])
}
}
// 日历格子
var spanStr = "";
// 天数格子
for (var n = 0; n < emptyHeadArr.length; n++) {
spanStr += "<span class='noEmpty prevMonth' year='" + prevYear + "' month='" + prevMonth + "' value='" + emptyHeadArr[n] + "'><div class='firstLine'><span class='dayNumText'>" + emptyHeadArr[n] + "</span><span></span><span></span></div><div class='taskCon'></div></span>";
}
for (var n = 0; n < days.length; n++) {
if (n == 0) {
spanStr += "<span class='noEmpty nowMonth' year='" + year + "' month='" + (+month) + "' value='" + days[n] + "'><div class='firstLine'><span class='dayNumText'>" + (+month) + "月</span><span></span><span></span></div><div class='taskCon'></div></span>";
} else {
spanStr += "<span class='noEmpty nowMonth' year='" + year + "' month='" + (+month) + "' value='" + days[n] + "'><div class='firstLine'><span class='dayNumText'>" + days[n] + "</span><span></span><span></span></div><div class='taskCon'></div></span>";
}
}
for (var n = 0; n < emptyEndArr.length; n++) {
if (n == 0) {
spanStr += "<span class='noEmpty nextMonth' year='" + nextYear + "' month='" + nextMonth + "' value='" + emptyEndArr[n] + "'><div class='firstLine'><span class='dayNumText'>" + nextMonth + "月</span><span></span><span></span></div><div class='taskCon'></div></span>";
} else {
spanStr += "<span class='noEmpty nextMonth' year='" + nextYear + "' month='" + nextMonth + "' value='" + emptyEndArr[n] + "'><div class='firstLine'><span class='dayNumText'>" + emptyEndArr[n] + "</span><span></span><span></span></div><div class='taskCon'></div></span>";
}
}
// 替换天数格子容器
var str = str.replace("{
{days}}", spanStr);
// 返回总的字符串
return str;
}
</script>
</body>
</html>边栏推荐
- Digital business cloud: from planning to implementation, how does Minmetals Group quickly build a new pattern of digital development?
- [live broadcast appointment] database obcp certification comprehensive upgrade open class
- 制造业SRM管理系统供应商全方位闭环管理，实现采购寻源与流程高效协同
- 华为联机对战服务玩家掉线重连案例总结
- Lake Shore—OptiMag 超导磁体系统 — OM 系列
- 【6.24-7.1】写作社区精彩技术博文回顾
- The best landing practice of cave state in an Internet ⽹⾦ financial technology enterprise
- ETL development of data warehouse (IV)
- The difference between indexof and includes
- Junit单元测试框架详解
猜你喜欢
Is PMP cancelled??
kubernetes命令入门（namespaces，pods）
Lumiprobe 活性染料丨吲哚菁绿说明书
有关 M91 快速霍尔测量仪的更多信息
Dlib+opencv library for fatigue detection
CDGA|从事通信行业，那你应该考个数据管理证书
Lumiprobe cell imaging study PKH26 cell membrane labeling kit
【Go ~ 0到1 】 第五天 7月1 类型别名,自定义类型,接口,包与初始化函数
Dlib+Opencv库实现疲劳检测
![[live broadcast appointment] database obcp certification comprehensive upgrade open class](/img/38/1ec382d0edda83d4052868255af9ea.jpg)
[live broadcast appointment] database obcp certification comprehensive upgrade open class
随机推荐
The former 4A executives engaged in agent operation and won an IPO
[6.24-7.1] review of wonderful technical blog posts in the writing community
Games202 operation 0 - environment building process & solving problems encountered
Cdga | if you are engaged in the communication industry, you should get a data management certificate
数商云：从规划到落地，五矿集团如何快速构建数字化发展新格局？
indexof和includes的区别
水产行业智能供应链管理平台解决方案：支撑企业供应链数字化，提升企业管理效益
SuperVariMag 超导磁体系统 — SVM 系列
Lumiprobe 细胞成像研究丨PKH26细胞膜标记试剂盒
How to operate technology related we media well?
华为联机对战服务玩家掉线重连案例总结
Solution: you can ping others, but others can't ping me
C端梦难做，科大讯飞靠什么撑起10亿用户目标？
PostgreSQL varchar[] array type operation
生鲜行业B2B电商平台解决方案，提高企业交易流程标准化和透明度
nacos启动失败问题解决与总结
ubuntu14安装MySQL并配置root账户本地与远程访问
Cache problems after app release
见证时代！“人玑协同 未来已来”2022弘玑生态伙伴大会开启直播预约
论文阅读【Learning to Discretely Compose Reasoning Module Networks for Video Captioning】