日历小部件

Question

JavaScript 中日历小部件的确切逻辑是什么？单击日期时会显示包含当前日期的对话和欢迎消息吗？我一直在尝试这个但没有得到我想要的输出...... 这是 link

enter code here

https://codepen.io/naimiii/pen/mdOrBmO

Answer 1

你的意思是这样的吗？

let yearChosen =new Date().getFullYear()//2021
let monthChosen =new Date().getMonth()//march

let months=["March"];
function getNumberofDays(year,month){
    let numDays = new Date(year, month ,0).getDate();
    return numDays;
}



function renderCal(getNumDays){
    let yearPTag=document.getElementById("year");
    yearPTag.innerText= yearChosen;
    let monthName = months;
    let monthPTag=document.getElementById("month");
    monthPTag.innerText=monthName;
    for (let i=1; i <= getNumDays; i++){
       let  dayPTag =document.createElement('p');
       dayPTag.style.fontSize ="20px";
       let dayText = document.createTextNode(i.toString());
       dayPTag.appendChild(dayText);
       //trying  to get March 30,2021
       let date = months + " " + i.toString() + ", " + yearChosen;
       //console.log(date);
       let dayOfWeek= new Date(date).getDay();
       dayPTag.addEventListener("click", function(){
         alert("Hello, Date: " + date);
       });
       document.getElementById(dayOfWeek.toString()).appendChild(dayPTag);
    } 

}
renderCal(getNumberofDays(yearChosen,monthChosen));

#container{
    width:400px;
    height:400px;
    border: 1px solid black;
    margin: 150px 400px;
}

#header{
    margin-top: 10px;
    display:flex;
    justify-content: space-around;
}

i{
    font-size: 20px;
}

.month-year{
    display:inline;
}

#days{
    display: flex;
   justify-content: space-around;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    <div id="container">
     <div id="header">
    <div>
     <i><</i>
     <p class="month-year" id="month">March</p c>
     <i>></i>
    </div>
    <div>
     <i><</i>
     <p  class="month-year" id="year">2021</p>
     <i>></i>
    </div>
    </div>
   <div id="days">
    <div id="0" class="day-column"><p>Sun</p></div>
    <div id="1" class="day-column"><p>Mon</p></div>
    <div id="2" class="day-column"><p>Tue</p></div>
    <div id="3" class="day-column"><p>Wed</p></div>
    <div id="4" class="day-column"><p>thur</p></div>
    <div id="5" class="day-column"><p>Fri</p></div>
    <div id="6" class="day-column"><p>Sat</p></div>
    </div>
</div>
<script src="index.js"></script>
</body>
</html>

日历小部件

Calender Widget

javascript

css

calendar