springboot+fullcalendar+layui
时间: 2023-08-31 14:05:17 浏览: 195
可以通过以下步骤在 Spring Boot 中集成 FullCalendar 和 layui:
1. 在 pom.xml 文件中添加 FullCalendar 和 layui 的依赖:
```xml
<dependency>
<groupId>org.webjars</groupId>
<artifactId>fullcalendar</artifactId>
<version>3.10.0</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>layui</artifactId>
<version>2.5.7</version>
</dependency>
```
2. 创建一个控制器类,并添加一个方法来返回 FullCalendar 页面:
```java
@Controller
public class CalendarController {
@GetMapping("/calendar")
public String calendar() {
return "calendar";
}
}
```
3. 创建一个名为 `calendar.html` 的 HTML 页面,并添加 FullCalendar 和 layui 的引用:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calendar</title>
<link rel="stylesheet" href="/webjars/layui/2.5.7/css/layui.css"/>
<link rel="stylesheet" href="/webjars/fullcalendar/3.10.0/fullcalendar.min.css"/>
<script src="/webjars/fullcalendar/3.10.0/lib/jquery.min.js"></script>
<script src="/webjars/fullcalendar/3.10.0/lib/moment.min.js"></script>
<script src="/webjars/fullcalendar/3.10.0/fullcalendar.min.js"></script>
<script src="/webjars/layui/2.5.7/layui.js"></script>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<div id="calendar"></div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: [
{
title: 'Event 1',
start: '2021-10-01T10:00:00',
end: '2021-10-01T12:00:00'
},
{
title: 'Event 2',
start: '2021-10-03T14:00:00',
end: '2021-10-03T16:00:00'
}
]
});
});
</script>
</body>
</html>
```
4. 运行应用程序,并访问 /calendar 页面,您将看到 FullCalendar 在页面上显示了两个事件。
阅读全文