在PHP页面生成一个2015-2030年的日历,要求突出当前日期,并可以通过点击←→按钮更改月份。并通过连接数据库,把数据库中所有人的所有日程条目都输出到对应日期的单元格里。点击某条目时会弹出窗口显示该条目详情。请生成完整代码
时间: 2024-02-09 18:11:00 浏览: 31
好的,以下是实现该功能的完整代码:
index.php
```php
<?php
// 连接数据库并查询所有日程条目
$dsn = 'mysql:host=localhost;dbname=your_database_name';
$username = 'your_username';
$password = 'your_password';
try {
$db = new PDO($dsn, $username, $password);
} catch (PDOException $e) {
echo '连接数据库失败:' . $e->getMessage();
exit();
}
$stmt = $db->query('SELECT * FROM schedules');
$schedules = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 获取当前日期和月份
$currentYear = date('Y');
$currentMonth = date('n');
// 处理通过点击按钮更改月份的操作
if (isset($_GET['month'])) {
$currentMonth = $_GET['month'];
if ($currentMonth < 1) {
$currentMonth = 12;
$currentYear--;
} elseif ($currentMonth > 12) {
$currentMonth = 1;
$currentYear++;
}
}
// 计算当前月份第一天是星期几,以及当前月份的天数
$firstDayOfWeek = date('w', mktime(0, 0, 0, $currentMonth, 1, $currentYear));
$numDaysInMonth = date('t', mktime(0, 0, 0, $currentMonth, 1, $currentYear));
// 输出日历表格
echo '<table>';
echo '<tr><th colspan="7">' . $currentYear . '年' . $currentMonth . '月</th></tr>';
echo '<tr><th>周日</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th></tr>';
echo '<tr>';
// 输出月份第一天前的空单元格
for ($i = 0; $i < $firstDayOfWeek; $i++) {
echo '<td></td>';
}
// 输出每天的单元格
$currentDay = 1;
while ($currentDay <= $numDaysInMonth) {
for ($i = $firstDayOfWeek; $i < 7 && $currentDay <= $numDaysInMonth; $i++) {
$date = $currentYear . '-' . $currentMonth . '-' . $currentDay;
$scheduleItems = array_filter($schedules, function ($item) use ($date) {
return $item['date'] == $date;
});
$hasSchedule = !empty($scheduleItems);
$class = ($currentDay == date('j') && $currentMonth == date('n')) ? 'today' : '';
echo '<td class="' . $class . '">';
echo '<div class="day">' . $currentDay . '</div>';
if ($hasSchedule) {
echo '<div class="schedules">';
foreach ($scheduleItems as $item) {
echo '<div class="schedule">' . $item['title'] . '</div>';
}
echo '</div>';
}
echo '</td>';
$currentDay++;
$firstDayOfWeek = 0; // 第一行已经输出完毕,将 $firstDayOfWeek 设为0
}
if ($currentDay <= $numDaysInMonth) {
echo '</tr><tr>';
}
}
// 输出月份最后一天后的空单元格
if ($i < 7) {
for ($j = $i; $j < 7; $j++) {
echo '<td></td>';
}
}
echo '</tr>';
echo '</table>';
echo '<div class="buttons">';
echo '<a href="?month=' . ($currentMonth - 1) . '">← 上一个月</a>';
echo '<a href="?month=' . ($currentMonth + 1) . '">下一个月 →</a>';
echo '</div>';
?>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #000;
padding: 5px;
text-align: center;
}
th {
background-color: #eee;
}
.today {
background-color: #f00;
}
.schedules {
font-size: 12px;
margin-top: 5px;
}
.schedule {
margin-bottom: 3px;
}
.buttons {
margin-top: 10px;
text-align: center;
}
.buttons a {
margin-right: 10px;
}
</style>
```
上述代码实现了生成日历和通过连接数据库输出日程条目的功能,但是点击日程条目时弹出窗口显示该条目详情的功能尚未实现。为了实现该功能,我们需要使用 JavaScript。
index.php(添加 JavaScript 代码)
```php
<?php
// ...
// 输出日历表格
echo '<table id="calendar">';
// ...
echo '</table>';
echo '<div class="buttons">';
echo '<a href="?month=' . ($currentMonth - 1) . '">← 上一个月</a>';
echo '<a href="?month=' . ($currentMonth + 1) . '">下一个月 →</a>';
echo '</div>';
?>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #000;
padding: 5px;
text-align: center;
}
th {
background-color: #eee;
}
.today {
background-color: #f00;
}
.schedules {
font-size: 12px;
margin-top: 5px;
}
.schedule {
margin-bottom: 3px;
}
.buttons {
margin-top: 10px;
text-align: center;
}
.buttons a {
margin-right: 10px;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
#overlay .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
<div id="overlay">
<div class="content"></div>
</div>
<script>
// 获取所有日程条目
var schedules = <?php echo json_encode($schedules); ?>;
// 获取所有日期单元格
var cells = document.querySelectorAll('#calendar td');
// 为每个日期单元格添加点击事件
cells.forEach(function (cell) {
cell.addEventListener('click', function () {
// 获取该单元格对应的日期
var date = cell.querySelector('.day').textContent;
date = '<?php echo $currentYear . '-' . $currentMonth . '-'; ?>' + date;
// 获取该日期的所有日程条目
var scheduleItems = schedules.filter(function (item) {
return item.date === date;
});
// 如果有日程条目,则弹出窗口显示详情
if (scheduleItems.length > 0) {
var content = '<ul>';
scheduleItems.forEach(function (item) {
content += '<li>' + item.title + '</li>';
});
content += '</ul>';
document.querySelector('#overlay .content').innerHTML = content;
document.querySelector('#overlay').style.display = 'block';
}
});
});
// 为弹出窗口添加点击事件,点击任意位置都会关闭窗口
document.querySelector('#overlay').addEventListener('click', function () {
document.querySelector('#overlay').style.display = 'none';
});
</script>
```
上述代码实现了弹出窗口显示日程条目详情的功能,该功能通过 JavaScript 实现。