FullCalendar 插件是如何使用的
时间: 2024-03-06 11:47:54 浏览: 113
FullCalendar 是一个非常流行的日历插件,可以用来显示日程安排、事件等。它支持各种不同的视图(月视图、周视图、日视图等),并且可以自定义事件的颜色、标签等。
使用 FullCalendar 插件,你需要先在页面中引入 FullCalendar 的 JavaScript 和 CSS 文件。然后,你需要在页面中创建一个空的 `div` 元素,并给它一个唯一的 ID。接下来,你可以在 JavaScript 中初始化 FullCalendar,并指定要显示的数据源(比如一个 JSON 数据文件或一个 AJAX 调用)。
以下是一个简单的 FullCalendar 示例代码:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js'></script>
</head>
<body>
<div id='calendar'></div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
</script>
</body>
</html>
```
JavaScript 代码:
```javascript
$('#calendar').fullCalendar({
events: [
{
title: 'My Event',
start: '2021-09-01'
}
]
});
```
这个例子中,我们首先在 HTML 中引入了 FullCalendar 的 JavaScript 和 CSS 文件。然后,我们在页面中创建了一个空的 `div` 元素,并给它一个唯一的 ID(这里是 `calendar`)。接下来,在 JavaScript 中,我们使用 jQuery 的 `$(document).ready()` 方法来确保页面已经加载完毕后再初始化 FullCalendar。最后,我们指定了一个事件数据源,这个数据源只包含一个事件,它的标题是 `My Event`,开始时间是 2021 年 9 月 1 日。
当你打开这个页面时,你应该能看到一个简单的日历,上面显示着一个事件。你可以尝试添加更多的事件,或者尝试使用 FullCalendar 的其他功能。
阅读全文