[fullCalender vue]使用fullCalender进行事件存储出现的时间不同步问题

问题描述：

如图所示，系统中，我要在5:00-5:30这个时间段添加一个事件。

但是添加完事件后，事件没有在5:00-5:30的时间段。反而跑到了前一天的21:00-21:30时间段了。

原因分析：

两个时间差了8个小时。

fullCalender默认使用ISO8601字符串。

在我把字符串传入后端的时候。

后端springboot使用LocalDateTime，默认格式为yyyy-MM-dd HH:mm:ss，不带时区。

数据库使用DATETIME存储，不支持时区。

所以前端的时间传入后端的时候。会偏移8个小时。

后端的数据回显给前端时候，fullCalender没正确识别。导致时间显示错误问题。

解决方案：

正常来讲。应该是更改后端的存储方式，存储ISO字符串。

但是这样太过麻烦。

我直接修改前端的传入方式。

也就是说，前端显示为0:00，那我就传给后端0:00，后端存储0:00。

这样可以省略掉前后端不断转化格式，传来传去的麻烦。

但同时也有一个后果，后端无法存储时区信息。

具体解决代码：

dayjs(currentEvent.value.startTime).format('YYYY-MM-DD HH:mm:ss')

通过dayjs将时间转化为YYYY-MM-DD HH:mm:ss格式

后端统一返回格式

@Bean
public ObjectMapper objectMapper() {
    ObjectMapper objectMapper = new ObjectMapper();
    objectMapper.registerModule(new JavaTimeModule());
    objectMapper.disable(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS);
    objectMapper.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));
    return objectMapper;
}

fullCalender渲染配置

const transfromEvents = (apiEvents) => {
  return apiEvents.map((event) => ({
    id: event.id,
    title: event.title,
    start: new Date(event.startTime),
    end: new Date(event.endTime),
    backgroundColor: getEventColor(event.type),
    borderColor: getEventColor(event.type),
    extendedProps: {
      type: event.type,
    },
  }))
}

问题解决