layui+springboot+jpa+fullcalendar日程增删改查

这是一个比较复杂的问题，需要涉及到前端框架 layui 和 fullcalendar 以及后端框架 Spring Boot 和 JPA 的使用。我可以给你提供一些思路和代码片段供参考。

前端部分：

1. 在 HTML 页面中引入 layui 和 fullcalendar 的相关资源文件。

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.all.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.10.2/fullcalendar.min.js"></script>

2. 在 HTML 页面中添加一个用于显示日历的 div 元素。

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

3. 在 JavaScript 中初始化 fullcalendar，并获取后端返回的日程列表数据。

layui.use(['layer'], function() {
  var layer = layui.layer;

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'month',
    editable: true,
    events: function(start, end, timezone, callback) {
      $.ajax({
        url: '/events',
        type: 'GET',
        dataType: 'json',
        success: function(response) {
          var events = [];
          response.forEach(function(event) {
            events.push({
              id: event.id,
              title: event.title,
              start: event.startTime,
              end: event.endTime
            });
          });
          callback(events);
        },
        error: function() {
          layer.alert('获取日程列表失败');
        }
      });
    }
  });
});

4. 在 JavaScript 中添加一个用于弹出添加日程的表单的函数。

function addEvent() {
  layer.open({
    type: 1,
    title: '添加日程',
    content: $('#add-event-form'),
    area: ['500px', 'auto'],
    btn: ['保存', '取消'],
    yes: function(index, layero) {
      // 提交表单数据并保存日程
      $.ajax({
        url: '/events',
        type: 'POST',
        data: $('#add-event-form').serialize(),
        success: function() {
          $('#calendar').fullCalendar('refetchEvents');
          layer.close(index);
        },
        error: function() {
          layer.alert('添加日程失败');
        }
      });
    }
  });
}

后端部分：

1. 创建一个实体类 Event，用于表示日程信息。

@Entity
public class Event {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;

  private String title;

  @Temporal(TemporalType.TIMESTAMP)
  private Date startTime;

  @Temporal(TemporalType.TIMESTAMP)
  private Date endTime;

  // 省略 getter 和 setter 方法
}

2. 创建一个 EventRepository 接口，继承 JpaRepository，用于对 Event 实体进行增删改查操作。

public interface EventRepository extends JpaRepository<Event, Long> {
}

3. 创建一个 EventController 类，用于处理前端请求。

@RestController
public class EventController {

  @Autowired
  private EventRepository eventRepository;

  @GetMapping("/events")
  public List<Event> list() {
    return eventRepository.findAll();
  }

  @PostMapping("/events")
  public void add(@Valid Event event) {
    eventRepository.save(event);
  }

  @PutMapping("/events/{id}")
  public void update(@PathVariable Long id, @Valid Event event) {
    event.setId(id);
    eventRepository.save(event);
  }

  @DeleteMapping("/events/{id}")
  public void delete(@PathVariable Long id) {
    eventRepository.deleteById(id);
  }
}