当前位置：网站首页>原生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>边栏推荐
- 11. Users, groups, and permissions (1)
- C-end dream is difficult to achieve. What does iFLYTEK rely on to support the goal of 1billion users?
- 论文阅读【Learning to Discretely Compose Reasoning Module Networks for Video Captioning】
- Reading the paper [learning to discretely compose reasoning module networks for video captioning]
- Chaos engineering platform chaosblade box new heavy release
- [AGC] how to solve the problem that the local display of event analysis data is inconsistent with that in AGC panel?
- The intelligent epidemic prevention system provides safety guarantee for the resumption of work and production at the construction site
- Getting started with kubernetes command (namespaces, pods)
- B2B e-commerce platform solution for fresh food industry to improve the standardization and transparency of enterprise transaction process
- 市值蒸发740亿，这位大佬转身杀入预制菜
猜你喜欢
![[live broadcast appointment] database obcp certification comprehensive upgrade open class](/img/38/1ec382d0edda83d4052868255af9ea.jpg)
[live broadcast appointment] database obcp certification comprehensive upgrade open class
Lake shore M91 fast hall measuring instrument
Stanford, salesforce|maskvit: masked vision pre training for video prediction
![[quick application] there are many words in the text component. How to solve the problem that the div style next to it will be stretched](/img/5c/b0030fd5fbc07eb94013f2699c2a04.png)
[quick application] there are many words in the text component. How to solve the problem that the div style next to it will be stretched
【森城市】GIS数据漫谈（一）
Lake Shore 连续流动低温恒温器传输线
Is PMP cancelled??
![[to.Net] C set class source code analysis](/img/59/4c7b910bc6505e5f81015ce80812fc.png)
[to.Net] C set class source code analysis
水产行业智能供应链管理平台解决方案：支撑企业供应链数字化，提升企业管理效益
Supervarimag superconducting magnet system SVM series
随机推荐
Learning notes [Gumbel softmax]
[quick application] win7 system cannot run and debug projects using Huawei ide
M91 fast hall measuring instrument - better measurement in a shorter time
Lake Shore 连续流动低温恒温器传输线
Learn MySQL from scratch - database and data table operations
6月刊 | AntDB数据库参与编写《数据库发展研究报告》 亮相信创产业榜单
论文阅读【Learning to Discretely Compose Reasoning Module Networks for Video Captioning】
物联网平台thingsboard搭建学习记录
Superoptimag superconducting magnet system - SOM, Som2 series
Learning notes - steps of JDBC connection database operation
寶，運維100+服務器很頭疼怎麼辦？用行雲管家！
白盒加密技术浅理解
华为游戏初始化init失败，返回错误码907135000
Go language self-study series | go language data type
精益思想：来源，支柱，落地。看了这篇文章就懂了
The market value evaporated by 74billion yuan, and the big man turned and entered the prefabricated vegetables
MySQL common graphics management tools | dark horse programmers
Supervarimag superconducting magnet system SVM series
Today, with the popularity of micro services, how does service mesh exist?
pickle.load报错【AttributeError: Can‘t get attribute ‘Vocabulary‘ on ＜module ‘__main__‘】