将事件添加到javascript生成的日历中

adding events to a javascript generated calender

本文关键字：日历 javascript 事件 添加      更新时间：2023-09-26

我正在为学校作业制作日历，我使用javascript循环生成了日历。我希望能够将事件添加到特定的日期（比如生日之类的）。我想把它们放在日历下面的盒子里。我很困在自动取款机上，因为我不知道如何做到这一点。HTML:

<html>
<head>
 <link href="CSS.css" rel="stylesheet" type="text/css">
</head>
<body id="body">
<center>
<button id="Vorige" onclick="VorigeFunc()">Vorige</button> <button id="Volgende" onclick="VolgendeFunc()">Volgende</button>
<div id="div">
<script type="text/javascript" src="Kal.js"> </script>
</div>
</center>
</body>
</html>

JavaScript:

var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var today = new Date();
var dag = today.getDay();
var myMonth = today.getMonth();
var jaar = today.getFullYear();
var volBtn = document.getElementById('Volgende');
var vorBtn = document.getElementById('Vorige');
var monthLengthCorrected = 0;

function Kalender(){
    var myHTML ='';
    var firstDayDate = new Date(jaar, myMonth, 1);
    var firstDay = firstDayDate.getDay();
    myHTML+='<div id="month">'+monthNames[myMonth] + " " + jaar+'</div><table id="cal">';
    for (var i = 0; i < dayNames.length; i++){
        myHTML += '<td>' + dayNames[i] + ' ' + '</td>';
        if ((i+1)%7 == 0){
            myHTML += "</tr>";
        } 
    };
    monthLengthCorrected = monthLength[myMonth];
    if (myMonth == 1) {
        if (jaar % 4 == 0)
            monthLengthCorrected = 29;
    };
    monthLengthCorrected += firstDay;

    for (var i=1; i <= monthLengthCorrected; i++){
        if (i <= firstDay){
            myHTML += "<td> </td>";
            }
        else {
            myHTML+="<td><a href='#'>" + (i - firstDay) + "</a></td> ";
            };
        if (i%7 == 0){
            myHTML += "</tr>";
        }; 
    };
     myHTML+='</table>';
    document.getElementById('div').innerHTML = myHTML;
}

var VolgendeFunc = function(){
   myMonth = myMonth + 1;
    if (myMonth == 12){
       myMonth = 0;
       jaar = jaar + 1;
    } 
   document.getElementById('month').innerHTML = myMonth;
   Kalender();
}
var VorigeFunc = function(){
    myMonth = myMonth - 1;
   if (myMonth == -1){
       myMonth = 11;
       jaar = jaar - 1;
    }
    document.getElementById('month').innerHTML = myMonth;
    Kalender();
}
Kalender();

CSS：

#Vorige{
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
width: 120px;
}
#Vorige:hover{
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
#Volgende{
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
width: 120px;
}
#Volgende:hover{
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
#div{
    font-size: 40px;
}
#div tr{
    color:#2b2b2b; 
    width:30px; 
    height:30px; 
    line-height:30px; 
    text-align:center; 
    border:1px solid #e6e6e6; 
    cursor:default; 
}
#cal{
    font-size: 25px; 
    -moz-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25); 
    -webkit-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25); 
    margin:50px auto; 
    font:"Helvetica Neue";
    display:table; 
}
#cal td { 
    color:#2b2b2b; 
    width:40px; 
    height:30px; 
    line-height:30px; 
    text-align:center; 
    border:2px solid #e6e6e6; 
    cursor:default; 
}

使用fullcalendar插件（jQuery）！

相关文章：