个人中心
gpt4 book ai didi

javascript - 如何使用 Javascript 在不同月份的日历中突出显示多个日期？

转载 作者：行者123 更新时间：2023-11-30 19:00:29 26 4
gpt4 key购买 nike

<分区>

我在我的日历中使用 HTML 和 Javascript 创建了一个日历 我使用 Jquery 突出显示了特定月份的一些日期，但我想突出显示所有月份中的多个日期。在我的日历中，月份和年份是使用下拉列表显示的，日期是使用 HTML 表格显示的，请给出解决方案

这是我的代码

HTML代码

<div class="col-md-3">
            <div class="calendar1">
            <h3 class="card-header" id="monthAndYear"></h3>
            </div>
            <head>
            <div class="cal">
            <form class="form-inline">

            <label class="jumpto col-md-4" for="month">Jump To: </label>
            <select class="form-control col-md-6" name="month" id="month" onchange="jump()">

                <option value=0>Jan</option>
                <option value=1>Feb</option>
                <option value=2>Mar</option>
                <option value=3>Apr</option>
                <option value=4>May</option>
                <option value=5>Jun</option>
                <option value=6>Jul</option>
                <option value=7>Aug</option>
                <option value=8>Sep</option>
                <option value=9>Oct</option>
                <option value=10>Nov</option>
                <option value=11>Dec</option>
            </select>
             <div class="col-md-1"></div>
            <label for="year"></label><select class="form-control col-md-6" name="year" id="year" onchange="jump()">
            <option value=2018>2018</option>
            <option value=2019>2019</option>
            <option value=2020>2020</option>
            <option value=2021>2021</option>
        </select></form>
        <div id="calendar" >
            <table class="table table-bordered table-responsive-md" cellpadding="20"  >

            <tr bgcolor="white">
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>

            <tbody id="calendar-body" style="color:black;" bgcolor="white">

            </tbody >
        </table>
</div>
        <div class="form-inline">

            <button class="btn btn-outline-primary col-md-5" id="previous" onclick="previous()">Previous</button>
             <div class="col-md-2"></div>
            <button class="btn btn-outline-primary col-md-5" id="next" onclick="next()">Next</button>
        </div>
        <br/>
        </head>
    </div>
</div>

JavaScript 代码

<script>
    let today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();
let selectYear = document.getElementById("year");
let selectMonth = document.getElementById("month");

let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

let monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);


function next() {
    currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
    currentMonth = (currentMonth + 1) % 12;
    showCalendar(currentMonth, currentYear);
}

function previous() {
    currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
    currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
    showCalendar(currentMonth, currentYear);
}

function jump() {
    currentYear = parseInt(selectYear.value);
    currentMonth = parseInt(selectMonth.value);
    showCalendar(currentMonth, currentYear);
}

function showCalendar(month, year) {

    let firstDay = (new Date(year, month)).getDay();
    let daysInMonth = 32 - new Date(year, month, 32).getDate();

    let tbl = document.getElementById("calendar-body"); // body of the calendar

    // clearing all previous cells
    tbl.innerHTML = "";

    // filing data about month and in the page via DOM.
    monthAndYear.innerHTML = months[month] + " " + year;
    selectYear.value = year;
    selectMonth.value = month;

    // creating all cells
    let date = 1;
    for (let i = 0; i < 6; i++) {
        // creates a table row
        let row = document.createElement("tr");

        //creating individual cells, filing them up with data.
        for (let j = 0; j < 7; j++) {
            if (i === 0 && j < firstDay) {
                let cell = document.createElement("td");
                let cellText = document.createTextNode("");
                cell.appendChild(cellText);
                row.appendChild(cell);

            }
            else if (date > daysInMonth) {
                break;
            }

            else {
                let cell = document.createElement("td");
                let cellText = document.createTextNode(date);
                if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
                    cell.classList.add("bg-info");
                } // color today's date
                cell.appendChild(cellText);
                row.appendChild(cell);
                date++;

            }


        }

        tbl.appendChild(row); // appending each row into calendar body.


            //debugger;

    var mnth=[<?php echo $month2; ?>];
    //alert(mnth);
    mnth=mnth.toString();
     mn=mnth.split(',');
             mlength=mn.length;
             //  alert(mlength);
                 for( var j=1;j< mlength;j++){
                     var newmn=mn[j];
                    // alert(newmn);
$('select#month').find('option').each(function() {
    var data1=$(this).val();
    //alert(data1);
    if (data1==newmn){
        //alert(data1);

    var ary=[<?php echo $value; ?>];
         //alert(ary);
     ldate=ary.toString();
     ldate=ldate.split(',');
    //   alert(ldate);
         llength=ldate.length;
    //   alert(llength);

       for ( var i = 0; i <llength; i++) {
        var newdate= ldate[i];

          $('#calendar > table > tbody > tr').each(function() {
    $(this).children('td').each(function(){
   var data = $(this).html();

    if (data==newdate)      
    {
     $(this).css("background-color", "green");
    }


                                       })



                                   });

                                       }
         }              
});
}
 }
    }                
  </script>

var dates =[2019-12-21,2019-12-22,2019-12-23,2019-12-25,2019-12-26,2019-12-31,2020-01-01,2020 -01-02,2019-12-28];

26 4 0
文章推荐： c# - "Collection was modified..."问题
文章推荐： C中的打印函数mutex无法正常工作
文章推荐： c# - 过时的属性不会在 VS2010 中引起任何编译器警告
文章推荐： c - 获取当前时间的 future 时间规范
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com