• 原生js打造日程表-支持鼠标滚轮滚动选择月份-可以移植到任何框架中

     

    1. <html>
    2.  
    3.  
    4.  
    5. <head>
    6.  
    7.     <style>
    8.         * {
    9.             box-sizing: border-box;
    10.         }
    11.         
    12.         .calendar {
    13.             width: 100%;
    14.             border: 1px solid #e7e7e8;
    15.             user-select: none;
    16.         }
    17.         
    18.         .calendar .calendar_title {
    19.             padding: .5em 0 .5em 0;
    20.             text-align: center;
    21.             border-bottom: 1px solid #e7e7e8
    22.         }
    23.         
    24.         .calendar .calendar_week {
    25.             padding: .5em 0 .5em 0;
    26.         }
    27.         
    28.         .calendar .calendar_week span {
    29.             width: 14.2857%;
    30.             text-align: center;
    31.             display: inline-block;
    32.         }
    33.         
    34.         .calendar .calendar_dateCon .noEmpty {
    35.             padding: .5em;
    36.             width: 14.2857%;
    37.             text-align: left;
    38.             display: inline-block;
    39.             min-height: 120px;
    40.             float: left;
    41.         }
    42.         
    43.         .calendar .calendar_dateCon {
    44.             border-bottom: 1px solid #e7e7e8;
    45.         }
    46.         
    47.         .calendar .calendar_dateCon::after {
    48.             content: '';
    49.             display: block;
    50.             clear: both;
    51.         }
    52.         
    53.         .calendar .noEmpty {
    54.             border: 1px solid #e7e7e8;
    55.             border-right: 0px;
    56.             border-bottom: 0px;
    57.         }
    58.         
    59.         .calendar .noEmpty:nth-child(7n) {
    60.             border-right: 1px solid #e7e7e8;
    61.         }
    62.         
    63.         .dayNumText {
    64.             font-weight: 800;
    65.             font-size: 14px
    66.         }
    67.         
    68.         .activeDay .dayNumText {
    69.             background: #267ef0;
    70.             color: white!important;
    71.             border-radius: 100%;
    72.             width: 30px;
    73.             height: 30px;
    74.             text-align: center;
    75.             line-height: 30px;
    76.             font-size: 12px;
    77.         }
    78.         
    79.         .icon {
    80.             width: 16px;
    81.             height: 16px;
    82.             vertical-align: -0.2em;
    83.             cursor: pointer;
    84.         }
    85.         
    86.         .icon:hover {
    87.             transform: scale(1.2);
    88.         }
    89.         
    90.         .prevMonth .dayNumText,
    91.         .nextMonth .dayNumText {
    92.             color: gray
    93.         }
    94.         
    95.         .firstLine {
    96.             display: flex;
    97.             justify-content: space-between;
    98.         }
    99.         
    100.         .blueDot {
    101.             background: #2d8eff;
    102.             width: 5px;
    103.             height: 5px;
    104.             display: inline-block;
    105.             border-radius: 100%;
    106.             vertical-align: 0.1em;
    107.         }
    108.         
    109.         .taskLine,
    110.         .taskLineMore {
    111.             font-size: 12px;
    112.             margin-top: 5px;
    113.         }
    114.         
    115.         .taskLineMore {
    116.             color: #6d7176
    117.         }
    118.         
    119.         .taskLine>span {
    120.             margin-right: 5px;
    121.         }
    122.         
    123.         .nowMonth {
    124.             /* background: repeating-linear-gradient(45deg, rgb(212, 209, 209) 7%, #fff 10%); */
    125.         }
    126.     </style>
    127.  
    128. </head>
    129.  
    130. <body>
    131.     <div id="rili"></div>
    132.     <script type="text/javascript">
    133.         // 判断是否是闰年
    134.         function isLeapYear(year) {
    135.             return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);
    136.         }
    137.         // 关键！关键！关键！
    138.  
    139.         // 获取某年某月的第一天是周几
    140.         function getMonthFirstDayWeek(year, month) {
    141.             var month = +month - 1;
    142.             var date = new Date();
    143.             date.setFullYear(year);
    144.             date.setMonth(month);
    145.             date.setDate(1);
    146.             return date.getDay();
    147.         }
    148.         // 获取某年某月的天数
    149.         function getDay(year, month) {
    150.             var month = +month;
    151.             // 天的数组
    152.             var day31 = [];
    153.             var day30 = [];
    154.             var day29 = [];
    155.             var day28 = [];
    156.             for (var i = 1; i <= 31; i++) {
    157.                 day31.push(i);
    158.                 if (i <= 30) {
    159.                     day30.push(i);
    160.                 }
    161.                 if (i <= 29) {
    162.                     day29.push(i);
    163.                 }
    164.                 if (i <= 28) {
    165.                     day28.push(i);
    166.                 }
    167.             }
    168.             if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
    169.                 return day31;
    170.             }
    171.             if (month == 4 || month == 6 || month == 9 || month == 11) {
    172.                 return day30;
    173.             }
    174.             // 当月份等于2时，如果是闰年就返回29天，如果是平年就返回28天
    175.             if (month == 2) {
    176.                 if (isLeapYear(year)) {
    177.                     return day29;
    178.                 } else {
    179.                     return day28;
    180.                 }
    181.             }
    182.         }
    183.  
    184.  
    185.  
    186.  
    187.  
    188.  
    189.  
    190.         // 年
    191.         var year = new Date().getFullYear();
    192.         // 月
    193.         var month = new Date().getMonth() + 1;
    194.         var selectNowDay = "[year='" + new Date().getFullYear() + "']" + "[month='" + (new Date().getMonth() + 1) + "']" + "[value='" + (new Date().getDate()) + "']"
    195.  
    196.         function prevMonthClick() {
    197.             if (month == 1) {
    198.                 var prevMonth = 12;
    199.                 var prevYear = +year - 1;
    200.             } else {
    201.                 var prevMonth = +month - 1;
    202.                 var prevYear = +year;
    203.             }
    204.             year = prevYear;
    205.             month = prevMonth;
    206.             document.getElementById("rili").innerHTML = createRi(prevYear, prevMonth);
    207.             if (document.querySelector(selectNowDay)) {
    208.                 document.querySelector(selectNowDay).classList.add("activeDay")
    209.                 document.querySelector(selectNowDay).querySelector(".taskCon").innerHTML = `
    210.             <div class="taskLine"><span class='blueDot'></span><span>14:00</span><span>无主题</span></div>
    211.             <div class="taskLine"><span class='blueDot'></span><span>14:00</span><span>无主题</span></div>
    212.             <div class="taskLineMore">还有两个日程</div>
    213.         `
    214.             }
    215.  
    216.         }
    217.  
    218.         function nextMonthClick() {
    219.  
    220.             // 下一个月份
    221.             if (month == 12) {
    222.                 var nextMonth = 1;
    223.                 var nextYear = +year + 1;
    224.             } else {
    225.                 var nextMonth = +month + 1;
    226.                 var nextYear = year;
    227.             }
    228.             year = nextYear;
    229.             month = nextMonth;
    230.             document.getElementById("rili").innerHTML = createRi(nextYear, nextMonth);
    231.             if (document.querySelector(selectNowDay)) {
    232.                 document.querySelector(selectNowDay).classList.add("activeDay")
    233.                 document.querySelector(selectNowDay).querySelector(".taskCon").innerHTML = `
    234.             <div class="taskLine"><span class='blueDot'></span><span>14:00</span><span>无主题</span></div>
    235.             <div class="taskLine"><span class='blueDot'></span><span>14:00</span><span>无主题</span></div>
    236.             <div class="taskLineMore">还有两个日程</div>
    237.         `
    238.             }
    239.         }
    240.  
    241.         document.onmousewheel = function(event) {
    242.             var target = event.target;
    243.             var con = document.querySelector(".calendar_dateCon")
    244.             if (!con.contains(target)) {
    245.                 return
    246.             }
    247.             if (event.deltaY < 0) {
    248.                 prevMonthClick()
    249.             }
    250.             if (event.deltaY > 0) {
    251.                 nextMonthClick()
    252.             }
    253.         }
    254.         document.getElementById("rili").innerHTML = createRi(year, month);
    255.         document.querySelector(selectNowDay).classList.add("activeDay");
    256.         document.querySelector(selectNowDay).querySelector(".taskCon").innerHTML = `
    257.             <div class="taskLine"><span class='blueDot'></span><span>14:00</span><span>无主题</span></div>
    258.             <div class="taskLine"><span class='blueDot'></span><span>14:00</span><span>无主题</span></div>
    259.             <div class="taskLineMore">还有两个日程</div>
    260.         `
    261.  
    262.         function createRi(year, month) {
    263.             // 日历头部
    264.             var str = '<div class="calendar" value="{{month}}">' +
    265.                 `<div class="calendar_title"> 
    266.                     
    267.                     <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>
    268.                     <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> 
    269.                     {{year}}年{{month}}月</div>` +
    270.                 '<div class="calendar_week">' +
    271.                 '<span>周日</span><span>周一</span><span>周二</span><span>周三</span><span>周四</span><span>周五</span><span>周六</span>' +
    272.                 '</div>' +
    273.                 '<div class="calendar_dateCon">{{days}}</div>' +
    274.                 '</div>';
    275.  
    276.             // 替换月份
    277.             var str = str.replaceAll("{{year}}", year).replaceAll("{{month}}", month);
    278.             // 获取某年某月的第一天是周几，周一就代表在天数前面增加一个空格，周二就代表在天数前面增加二个空格
    279.             // 周天就代表在天数前面增加零个空格
    280.  
    281.             // 上一个月份
    282.             if (month == 1) {
    283.                 var prevMonth = 12;
    284.                 var prevYear = +year - 1;
    285.             } else {
    286.                 var prevMonth = +month - 1;
    287.                 var prevYear = +year;
    288.             }
    289.             var emptySpanPrev = getMonthFirstDayWeek(prevYear, prevMonth);
    290.             var daysPrev = getDay(prevYear, prevMonth);
    291.             // 当前月份
    292.             var emptySpan = getMonthFirstDayWeek(year, month);
    293.             var days = getDay(year, month);
    294.             var emptyHeadArr = [];
    295.             for (var i = 0; i < emptySpan; i++) {
    296.                 emptyHeadArr.push(daysPrev[daysPrev.length - emptySpan + i])
    297.             }
    298.             // 下一个月份
    299.             if (month == 12) {
    300.                 var nextMonth = 1;
    301.                 var nextYear = +year + 1;
    302.             } else {
    303.                 var nextMonth = +month + 1;
    304.                 var nextYear = year;
    305.             }
    306.  
    307.             var emptySpanNext = getMonthFirstDayWeek(nextYear, nextMonth);
    308.             var daysNext = getDay(nextYear, nextMonth);
    309.             var emptyEndArr = [];
    310.             if (emptySpanNext != 0) {
    311.                 for (var i = 0; i < (7 - emptySpanNext); i++) {
    312.                     emptyEndArr.push(daysNext[i])
    313.                 }
    314.             }
    315.  
    316.             // 日历格子
    317.             var spanStr = "";
    318.  
    319.             // 天数格子
    320.             for (var n = 0; n < emptyHeadArr.length; n++) {
    321.                 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>";
    322.             }
    323.             for (var n = 0; n < days.length; n++) {
    324.                 if (n == 0) {
    325.                     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>";
    326.                 } else {
    327.                     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>";
    328.                 }
    329.             }
    330.             for (var n = 0; n < emptyEndArr.length; n++) {
    331.                 if (n == 0) {
    332.                     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>";
    333.                 } else {
    334.                     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>";
    335.                 }
    336.             }
    337.             // 替换天数格子容器
    338.             var str = str.replace("{{days}}", spanStr);
    339.             // 返回总的字符串
    340.             return str;
    341.         }
    342.     </script>
    343. </body>
    344.  
    345. </html>

  • 相关阅读:
    SpringCloudAlibaba系列之Nacos服务注册与发现
    微信小程序之console.log()使用
    Linux实时查看Java接口数据
    SpringSecurity
    LeetCode 2512. 奖励最顶尖的 K 名学生：哈希表设计
    map底层实现原理
    基于微信JAVA后台新生报到小程序系统设计与实现 开题报告
    前端常见的十种布局
    阿里国际、ebay测评自养号，如何看待自己产品的销量？
    软件研发的十大浪费：研发效能的另一面
  • 原文地址：https://blog.csdn.net/liuhao9999/article/details/125558943