fullCalendar无法渲染变量数组中事件的原因及解决方法

云上老周

2026-5-15

问题分析与解决

兄弟，你遇到的核心问题是：你拼出来的events变量是个字符串，而日历组件需要的是真正的JavaScript对象数组！

为什么会出现这种差异？

你看代码里，你是通过字符串拼接的方式生成events的：

events1.push("{"+table_row_data+"}");
var events = "["+events1+"]"

这么搞出来的events是一串长得像对象数组的文本，但它本质是string类型。而日历组件期望接收的是由真实JS对象组成的数组——也就是你alert出来之后手动粘贴的那种格式，那是真正的对象结构，不是字符串。

alert的时候会把对象自动转成字符串显示，所以你看着内容一模一样，但底层类型完全不同，组件自然识别不了字符串版的“假数组”。

怎么让变量数据正常渲染？

别用字符串拼接来造对象！直接创建JavaScript对象，然后推到数组里就行。修改你的代码如下：

$(document).ready(function() {
  var events = [];
  $('#caltable tbody>tr').each(function () {
    var table_row_data = [];
    $('td', this).each(function () {
      table_row_data.push($(this).text());
    });
    if (table_row_data.length > 0) { 
      // 直接创建对象，而非拼接字符串
      events.push({
        title: table_row_data[0], // 注意：要确保table_row_data的顺序对应title、start、end
        start: table_row_data[1],
        end: table_row_data[2]
      });
    }
  });
  // 现在events是真正的对象数组，可直接传给日历组件
  console.log(events); // 用console.log查看更准确，能看到真实的变量类型与结构
});