springboot+fullcalendar+layui点击日历进行增删改查完整案例

这里是一个基于Spring Boot、FullCalendar、Layui的点击日历进行增删改查的完整案例。

首先，我们需要引入相关依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>fullcalendar</artifactId>
    <version>3.9.0</version>
</dependency>

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>layui</artifactId>
    <version>2.5.6</version>
</dependency>

接着，我们需要在HTML页面中引入相关的CSS和JS文件：

<!-- FullCalendar CSS -->
<link href="/webjars/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />

<!-- FullCalendar JS -->
<script src="/webjars/fullcalendar/3.9.0/fullcalendar.min.js"></script>

<!-- Layui CSS -->
<link href="/webjars/layui/2.5.6/css/layui.css" rel="stylesheet" />

<!-- Layui JS -->
<script src="/webjars/layui/2.5.6/layui.js"></script>

接下来，我们需要在HTML页面中定义一个FullCalendar的div：

<div id="calendar"></div>

然后，我们需要在JS代码中初始化FullCalendar：

$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        events: '/events'
    });
});

这里的`events`属性指定了FullCalendar从哪里获取事件数据。我们需要在后端编写一个REST接口来提供事件数据。

接下来，我们需要使用Layui的弹窗组件来实现添加/编辑事件的功能。首先，我们需要在JS代码中定义一个弹窗：

var editEventDialog = layui.layer.open({
    type: 1,
    title: '编辑事件',
    content: $('#edit-event-dialog'),
    area: ['600px', '400px'],
    btn: ['保存', '取消'],
    yes: function(index, layero) {
        // 保存事件
    },
    success: function(layero, index) {
        // 初始化表单
    }
});

这里的`content`属性指定了弹窗的内容。我们需要在HTML页面中定义一个表单来编辑事件信息，并将其放到一个隐藏的div中：

<div id="edit-event-dialog" style="display: none;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-block">
                <input type="text" name="start" required lay-verify="required" placeholder="请选择开始时间" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-block">
                <input type="text" name="end" required lay-verify="required" placeholder="请选择结束时间" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="请输入描述" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>

接下来，我们需要在JS代码中监听FullCalendar的`select`和`eventClick`事件，以显示弹窗并编辑事件信息：

$('#calendar').fullCalendar({
    // ...
    selectable: true,
    select: function(start, end, jsEvent, view) {
        // 显示弹窗
        layui.layer.open(editEventDialog);
    },
    eventClick: function(event, jsEvent, view) {
        // 显示弹窗
        layui.layer.open(editEventDialog);

        // 填充表单
        layui.form.val('form', {
            'title': event.title,
            'start': event.start.format('YYYY-MM-DD HH:mm:ss'),
            'end': event.end.format('YYYY-MM-DD HH:mm:ss'),
            'description': event.description
        });
    }
});

最后，我们需要在后端编写一个REST接口来提供事件数据，并在前端使用Ajax请求来获取数据：

@RestController
public class EventController {

    @GetMapping("/events")
    public List<Event> getEvents() {
        // 获取事件数据
    }

    @PostMapping("/events")
    public void addEvent(@RequestBody Event event) {
        // 添加事件
    }

    @PutMapping("/events/{id}")
    public void updateEvent(@PathVariable("id") Long id, @RequestBody Event event) {
        // 更新事件
    }

    @DeleteMapping("/events/{id}")
    public void deleteEvent(@PathVariable("id") Long id) {
        // 删除事件
    }
}

这样，我们就完成了一个基于Spring Boot、FullCalendar、Layui的点击日历进行增删改查的完整案例。