当前位置：网站首页>原生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>边栏推荐
- Docker deploy mysql8.0
- 【pytorch记录】模型的分布式训练DataParallel、DistributedDataParallel
- Solidity - 算术运算的截断模式（unchecked）与检查模式（checked）- 0.8.0新特性
- Lumiprobe phosphide hexaethylene phosphide specification
- indexof和includes的区别
- Extensive reading of the paper [film: visual reasoning with a general condition layer]
- kubernetes命令入门（namespaces，pods）
- Boost the development of digital economy and consolidate the base of digital talents - the digital talent competition was successfully held in Kunming
- Mipi interface, DVP interface and CSI interface of camera [easy to understand]
- 241. Different Ways to Add Parentheses
猜你喜欢
Lake Shore M91快速霍尔测量仪
Dom4J解析XML、Xpath检索XML
C-end dream is difficult to achieve. What does iFLYTEK rely on to support the goal of 1billion users?
Is PMP cancelled??
3. "Create your own NFT collections and publish a Web3 application to show them" cast NFT locally
Once the SQL is optimized, the database query speed is increased by 60 times
SuperOptiMag 超导磁体系统 — SOM、SOM2 系列
中英说明书丨人可溶性晚期糖基化终末产物受体(sRAGE)Elisa试剂盒
Lake Shore - crx-em-hf low temperature probe station
混沌工程平台 ChaosBlade-Box 新版重磅发布
随机推荐
sql查询去重统计的方法总结
前4A高管搞代运营，拿下一个IPO
B2B e-commerce platform solution for fresh food industry to improve the standardization and transparency of enterprise transaction process
【pytorch记录】模型的分布式训练DataParallel、DistributedDataParallel
Solution: you can ping others, but others can't ping me
论文泛读【FiLM: Visual Reasoning with a General Conditioning Layer】
物联网平台thingsboard搭建学习记录
赋能「新型中国企业」，SAP Process Automation 落地中国
Huawei game failed to initialize init with error code 907135000
How to operate technology related we media well?
Improve yolov5 with gsconv+slim neck to maximize performance!
Chaos engineering platform chaosblade box new heavy release
How to redraw the header of CListCtrl in MFC
Clean up system cache and free memory under Linux
Extensive reading of the paper [film: visual reasoning with a general condition layer]
【Go ~ 0到1 】 第四天 6月30 defer,结构体,方法
Lake Shore低温恒温器的氦气传输线
寶，運維100+服務器很頭疼怎麼辦？用行雲管家！
Graduation summary
Lean thinking: source, pillar, landing. I understand it after reading this article