Rails视图通过content_tag向FullCalendar相关JS传数据失败求解

你遇到的是两个非常常见的前端入门级错误，按优先级排查即可：

1. jQuery data() 方法的键名规则错误 #

Rails content_tag 中 data 哈希的下划线键 start_date / end_date，渲染到HTML后会自动转为短横线分隔的格式 data-start-date / data-end-date。
而jQuery的data()方法读取属性时，会自动将短横线分隔的属性名转为驼峰格式存储，你当前用下划线格式的键start_date/end_date是读取不到对应值的。

修改方案，二选一即可：

• 用驼峰格式写键名：

visibleRange: {
  start: $('.calendar_data').data('startDate'),
  end: $('.calendar_data').data('endDate')
}

• 直接和HTML属性格式保持一致，用短横线分隔的小写键名：

visibleRange: {
  start: $('.calendar_data').data('start-date'),
  end: $('.calendar_data').data('end-date')
}

2. DOM加载顺序错误 #

如果改完键名还是读不到值，大概率是你的loadCalendar()函数执行时，.calendar_data的div还没渲染到DOM树中，jQuery选不到对应元素自然读取不到数据。
Rails项目默认引入了Turbo，你需要把日历初始化逻辑绑定到Turbo的页面加载完成事件上，确保DOM完全渲染后再执行：

// 在application.js中加入这段逻辑，替代你原来直接调用loadCalendar()的代码
$(document).on('turbo:load', function() {
  // 先判断页面上是否存在日历容器，避免不存在该元素的页面报错
  if ($('#calendar').length > 0) {
    loadCalendar();
  }
});

如果你没有用Turbo，就把事件换成普通的DOM ready事件：

$(document).ready(function() {
  if ($('#calendar').length > 0) {
    loadCalendar();
  }
});

调试技巧 #

你可以在visibleRange配置前加一行日志输出，快速验证读取到的是否是预期值：

console.log('读取到的时间范围：', $('.calendar_data').data('startDate'), $('.calendar_data').data('endDate'));

打开浏览器的开发者控制台就能看到输出结果，快速定位是读取失败还是其他逻辑问题。

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