编码实现html日历,要求:把从MySQL数据库获取到的event列表写入array,在前端用var events = new Array()调用该array
时间: 2024-02-16 11:04:10 浏览: 18
好的,以下是一个简单的示例代码,可以实现从 MySQL 数据库获取事件列表,将事件列表写入数组,并将数组作为参数传递给前端的日历组件:
```php
<?php
// 连接 MySQL 数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "mydb";
$conn = mysqli_connect($servername, $username, $password, $dbname);
// 获取事件列表
$sql = "SELECT * FROM events";
$result = mysqli_query($conn, $sql);
// 将事件列表写入数组
$events = array();
while($row = mysqli_fetch_assoc($result)) {
$events[] = array(
'title' => $row['title'],
'start' => $row['start_date'],
'end' => $row['end_date']
);
}
// 将数组转换为 JSON 格式
$events_json = json_encode($events);
?>
<!-- 在 HTML 中引入日历组件的 JS 和 CSS 文件 -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js'></script>
<!-- 在 HTML 中添加一个容器,用于显示日历 -->
<div id='calendar'></div>
<!-- 在 JS 中使用 events 变量,将事件列表传递给日历组件 -->
<script>
var events = <?php echo $events_json; ?>;
$(document).ready(function() {
$('#calendar').fullCalendar({
events: events
});
});
</script>
```
上面的代码中,我们首先连接 MySQL 数据库,获取事件列表,并将事件列表写入数组。然后,我们将数组转换为 JSON 格式,并将 JSON 字符串嵌入到 JS 代码中。在 HTML 中,我们引入了日历组件的 JS 和 CSS 文件,并添加了一个容器 `<div id='calendar'></div>`,用于显示日历。在 JS 中,我们使用 events 变量,将事件列表传递给日历组件。最终,我们调用 fullCalendar() 方法,初始化日历组件,并将 events 参数设置为我们刚刚定义的 events 变量。