FullCalendar结合步骤条：如何传递选中的日期时间及资源至后续步骤？

一、步骤间传递选中的日期/时间与资源数据 #

从你的流程来看，要把第一步日历选中的数据传递到第二步，有几种实用的方案，根据项目场景选择即可：

1. 前端临时存储（简单场景首选） #

最简单的方式是把选中的数据存在全局变量或者页面的隐藏表单元素里，第二步展示时直接读取：

// 定义全局变量存储选中数据
let selectedBookingData = {};

// 在dayClick回调里赋值
dayClick: function (date, jsEvent, view, resources) {
  selectedBookingData = {
    date: date.format('DD-MM-YYYY HH:MM'),
    coachTitle: resources.title,
    coachId: resources.id // 如果需要ID的话
  };
  
  // 也可以存入隐藏表单
  $('#hidden-date').val(selectedBookingData.date);
  $('#hidden-coach').val(selectedBookingData.coachTitle);
}

当切换到第二步时，直接从selectedBookingData或者隐藏表单里读取数据，渲染到页面上即可。

2. 利用步骤组件的状态（如果用了UI框架的步骤条） #

如果你用的是像Bootstrap Steps、Element UI Steps这类组件，通常它们支持在步骤切换时传递状态参数。比如切换到第二步时，把选中的数据作为参数传入步骤的回调函数，在第二步的渲染逻辑里接收并展示。

3. 后端会话存储（需要持久化场景） #

如果需要跨页面或者刷新后仍保留数据，可以通过AJAX把选中的数据传给后端，存在用户的Session里：

// dayClick里的AJAX请求
dayClick: function (date, jsEvent, view, resources) {
  $.ajax({
    type: "POST",
    url: "/booking/save-selection",
    data: {
      date: date.format('DD-MM-YYYY HH:MM'),
      coachTitle: resources.title,
      coachId: resources.id
    },
    success: function() {
      // 跳转到第二步页面
      window.location.href = "/booking/step2";
    }
  });
}

后端（以你的Express代码为例）把数据存入Session：

app.post('/booking/save-selection', function(req, res) {
  req.session.selectedBooking = {
    date: req.body.date,
    coachTitle: req.body.coachTitle
  };
  res.sendStatus(200);
});

第二步页面渲染时，从Session里取出数据：

app.get('/booking/step2', function(req, res) {
  res.render('booking/step2', {
    selectedDate: req.session.selectedBooking.date,
    selectedCoach: req.session.selectedBooking.coachTitle
  });
});

二、解决"Maximum call stack size exceeded"错误 #

看你提供的代码，问题出在直接把FullCalendar的resources对象传给AJAX。FullCalendar的资源对象内部包含循环引用的属性（比如关联的日历实例、DOM元素引用等），当jQuery尝试把这个对象序列化成JSON时，会陷入无限循环，导致栈溢出。

解决方法是只提取你需要的字段，而不是传递整个对象：

// 修改AJAX的data部分，只传需要的属性
$.ajax({
  type: "POST",
  url: "/booking/test",
  data: {
    dateClicked: date.format('DD-MM-YYYY HH:MM'),
    // 只提取需要的字段，比如title、id
    resourcesClicked: {
      title: resources.title,
      id: resources.id // 如果需要ID的话
    }
  },
  success: function () {
    console.log('Data send to the back-end !')
    $('#modalDateAndTime').html(date.format('DD-MM-YYYY HH:MM:SS'));
    $('#modalCoach').html(resources.title);
    $('#fullCalModal').modal();
    return false;
  }
})

后端接收时，就可以正常读取这些字段了：

app.post('/booking/test', function (req, res) {
  const dateClick = req.body.dateClicked;
  const resourceClick = req.body.resourcesClicked;
  console.log("Date: " + dateClick);
  console.log("Coach: " + resourceClick.title); // 现在可以正常访问title了
  res.render('booking/calendar', { dateClick })
});

这样就避免了序列化整个复杂对象带来的循环引用问题。

内容的提问来源于stack exchange，提问作者Miguelit0