fullcalendar V6例子
时间: 2023-10-10 17:06:47 浏览: 163
以下是fullcalendar V6的一个例子:
HTML代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FullCalendar V6 Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.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.9.0/fullcalendar.min.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
```
JavaScript代码:
```javascript
$(document).ready(function() {
// 初始化日历
var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
initialView: 'dayGridMonth', // 初始视图
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}, // 标题栏
events: [
{
title: 'Event 1',
start: '2021-09-01',
end: '2021-09-03'
},
{
title: 'Event 2',
start: '2021-09-07'
},
{
title: 'Event 3',
start: '2021-09-09',
end: '2021-09-11'
}
] // 事件
});
// 渲染日历
calendar.render();
});
```
在这个例子中,我们使用了FullCalendar的V6版本,并在HTML代码中引入了FullCalendar的CSS和JavaScript文件。然后,我们初始化了一个FullCalendar对象,并指定了初始视图、标题栏和事件。最后,我们调用了`render()`方法,将日历渲染到页面上。
这是一个非常基本的例子,你可以根据自己的需求添加更多的配置和功能。
阅读全文