outlook日历中可以显示多条日程。请参考outlook日历样式,在页面生成一个2015-2030年的日历框架,要求突出当前日期,并可以通过点击←→按钮更改月份。连接MySQL数据库,按employee_id把ot_apply表中对应日期的event内容输出在当天的日历单元格中。请生成完整代码
时间: 2024-02-11 08:04:32 浏览: 181
好的,以下是一个简单的实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日历</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 5px;
text-align: center;
}
th {
background-color: #ddd;
}
.today {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<button id="prevMonthBtn"><</button>
<span id="monthYear"></span>
<button id="nextMonthBtn">></button>
</div>
<table>
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody id="calendarBody">
</tbody>
</table>
<script>
// 获取当前日期
var today = new Date();
var currentMonth = today.getMonth();
var currentYear = today.getFullYear();
// 获取 DOM 元素
var monthYear = document.getElementById("monthYear");
var calendarBody = document.getElementById("calendarBody");
var prevMonthBtn = document.getElementById("prevMonthBtn");
var nextMonthBtn = document.getElementById("nextMonthBtn");
// 绑定按钮事件
prevMonthBtn.addEventListener('click', function() {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
renderCalendar();
});
nextMonthBtn.addEventListener('click', function() {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
renderCalendar();
});
// 渲染日历
function renderCalendar() {
// 清空日历
calendarBody.innerHTML = "";
// 设置日期
var date = new Date(currentYear, currentMonth, 1);
var monthStart = date.getDay();
var daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
// 显示月份和年份
monthYear.innerHTML = date.toLocaleString('default', { month: 'long' }) + " " + currentYear;
// 渲染日期
for (var i = 0; i < 6; i++) {
var row = document.createElement("tr");
for (var j = 0; j < 7; j++) {
if (i === 0 && j < monthStart) {
var cell = document.createElement("td");
var cellText = document.createTextNode("");
cell.appendChild(cellText);
row.appendChild(cell);
} else if (i * 7 + j - monthStart + 1 > daysInMonth) {
break;
} else {
var cell = document.createElement("td");
var cellText = document.createTextNode(i * 7 + j - monthStart + 1);
cell.appendChild(cellText);
row.appendChild(cell);
// 判断是否是当前日期,是则添加样式
if (currentYear === today.getFullYear() &&
currentMonth === today.getMonth() &&
i * 7 + j - monthStart + 1 === today.getDate()) {
cell.classList.add("today");
}
// 从数据库中获取事件数据
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var events = JSON.parse(this.responseText);
for (var k = 0; k < events.length; k++) {
var event = events[k];
if (event.date === currentYear + "-" + (currentMonth + 1) + "-" + (i * 7 + j - monthStart + 1)) {
var eventNode = document.createElement("p");
var eventText = document.createTextNode(event.event);
eventNode.appendChild(eventText);
cell.appendChild(eventNode);
}
}
}
};
xhttp.open("GET", "getEvents.php?employee_id=12345", true);
xhttp.send();
}
}
calendarBody.appendChild(row);
}
}
// 初始化日历
renderCalendar();
</script>
</body>
</html>
```
注意,这里并没有完整的实现从数据库中获取事件数据,而是提供了一个简单的 AJAX 请求的示例。你需要根据自己的需求更改 AJAX 请求的 URL 和参数,并在服务器端实现对应的接口。
阅读全文