js日历添加事件

在JavaScript中实现日历添加事件的功能，通常涉及到HTML、CSS和JavaScript的结合使用。以下是一个基础的示例，展示如何创建一个简单的日历，并在特定日期上添加事件。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Calendar with Events</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="calendar"></div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

#calendar {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const calendarElement = document.getElementById('calendar');
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth();

    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const firstDayOfMonth = new Date(year, month, 1).getDay();

    let calendarHTML = '<table><tr><th colspan="7">' + year + '年' + (month + 1) + '月</th></tr>';
    calendarHTML += '<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>';

    let dayCounter = 1;
    for (let i = 0; i < 6; i++) {
        calendarHTML += '<tr>';
        for (let j = 0; j < 7; j++) {
            if (i === 0 && j < firstDayOfMonth) {
                calendarHTML += '<td></td>';
            } else if (dayCounter > daysInMonth) {
                break;
            } else {
                const dateStr = year + '-' + (month + 1) + '-' + dayCounter;
                const event = getEventForDate(dateStr);
                calendarHTML += '<td>' + dayCounter + (event ? '<br>' + event : '') + '</td>';
                dayCounter++;
            }
        }
        calendarHTML += '</tr>';
        if (dayCounter > daysInMonth) break;
    }
    calendarHTML += '</table>';
    calendarElement.innerHTML = calendarHTML;
});

function getEventForDate(dateStr) {
    const events = {
        '2023-10-15': '会议',
        '2023-10-20': '生日派对'
    };
    return events[dateStr];
}

解释

HTML部分：创建一个基本的HTML结构，包含一个用于显示日历的<div>元素。
CSS部分：简单的样式设置，使日历看起来更整洁。
JavaScript部分：
- 计算当前月份的天数和第一天是星期几。
- 生成日历的HTML结构，并在特定日期上添加事件。
- getEventForDate函数用于根据日期返回相应的事件。