首页fullcalendar V6的例子

fullcalendar V6的例子

时间: 2023-10-11 22:13:32 浏览: 73

以下是一个简单的 fullcalendar V6 示例，显示当前月份的日历，并添加了一个事件： ```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.10.2/fullcalendar.min.css" /> <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.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', // 默认显示月视图 events: [ // 添加一个事件 { title: 'My Event', start: '2021-06-10', // 事件开始时间 end: '2021-06-12' // 事件结束时间 } ] }); calendar.render(); // 渲染日历 }); </script> </body> </html> ``` 在上面的示例中，我们首先引入了 fullcalendar 的 CSS 和 JS 文件。然后在页面加载完成后，我们使用 `document.addEventListener('DOMContentLoaded', function() {...})` 来初始化日历。在初始化日历时，我们定义了一个容器 `calendarEl` 来显示日历，并设置了日历的初始视图为月视图 `initialView: 'dayGridMonth'`。我们还添加了一个事件，事件标题为 `My Event`，事件开始时间为 `2021-06-10`，事件结束时间为 `2021-06-12`。最后，我们调用 `calendar.render()` 来渲染日历。

阅读全文