### 簡單的 FullCalendar 的例子
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FullCalendar Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@3.10.2/dist/fullcalendar.min.css" />
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@3.10.2/dist/fullcalendar.min.js"></script>
</head>
<body>
<div id="calendar"></div>
<script>
$(document).ready(function() {
// 初始化 FullCalendar
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2023-11-01', // 初始日期
editable: true,
events: [
{
id: 1,
title: 'Event 1',
start: '2023-11-01T10:00:00',
end: '2023-11-01T14:00:00',
url: 'https://google.com'
},
{
id: 2,
title: 'Event 2',
start: '2023-11-07T12:00:00',
end: '2023-11-07T18:00:00',
description: 'This is a description for Event 2.',
color: 'red'
},
{
id: 3,
title: 'Event 3',
start: '2023-11-17T12:00:00',
end: '2023-11-17T14:00:00',
description: 'This is a description for Event 3.',
color: 'green'
},
{
id: 4,
title: 'Event 4',
start: '2023-11-17T18:00:00',
end: '2023-11-17T20:00:00',
description: 'This is a description for Event 4.',
color: 'pink'
}
],
// 點擊事件
eventClick: function(event) {
if (confirm('Do you want to delete this event?')) {
// 移除畫面上的事件
$('#calendar').fullCalendar('removeEvents', event.id);
}
},
// 滑鼠移出事件
eventMouseout: function() {
},
// 事件拖曳
eventDrop: function(event, delta, revertFunc) {
var title = event.title;
var offset = delta;
var msg = `${title} was dropped.\nOffset: ${offset}`;
alert(msg);
revertFunc(); // 還原事件的位置
},
eventRender: function(event, element) {
element.attr('data-toggle', 'tooltip'); // 添加 Bootstrap tooltip 屬性
element.attr('title', event.description); // 使用事件的描述作為提示框內容
}
});
});
</script>
</body>
</html>
```
### 非同步的方式讀取資料
```js
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2023-11-01',
editable: true,
events: function(start, end, timezone, callback) {
// 在這裡呼叫你的 API
$.ajax({
url: 'your-api-endpoint', // 替換成實際的 API 端點
dataType: 'json',
data: {
// 可以根據 FullCalendar 文檔的要求傳遞參數
start: start.format(),
end: end.format(),
// 其他參數...
},
success: function(response) {
// 在這裡處理 API 返回的數據
var events = [];
// 將數據轉換為 FullCalendar 能理解的格式
// 例如，response 中應該包含 start、end、title 等字段
for (var i = 0; i < response.length; i++) {
events.push({
title: response[i].title,
start: response[i].start,
end: response[i].end
});
}
callback(events);
}
});
}
});
```