You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何将Ruby集合传递给JavaScript函数供FullCalendar日历插件使用?

实现方案

最简洁可靠的实现方式是直接用Rails内置的JSON序列化能力,不需要手动拼接JavaScript对象:

calendar =  $('#calendar').fullCalendar({
            header: {
                left: 'title',
                center: 'agendaDay,agendaWeek,month',
                right: 'prev,next today'
            },
            events: <%= @rubyevents.map { |r| {title: r.name, start: r.date} }.to_json.html_safe %>
})

代码说明:

  • 先用map遍历@rubyevents集合,把每条记录转换为仅包含title、start字段的哈希,字段值对应你需要提取的r.name和r.date属性
  • to_json方法会自动把Ruby哈希数组转换为合法的JavaScript数组字符串,不需要手动处理引号、逗号分隔等语法细节
  • 加html_safe是为了避免Rails自动转义JSON中的特殊字符,保证输出内容可以直接被JavaScript识别

优化建议

如果r.date是Ruby的日期/时间类型,建议提前转换为ISO8601格式,fullCalendar可以直接识别该格式,时区兼容性更好:

<%= @rubyevents.map { |r| {title: r.name, start: r.date.iso8601} }.to_json.html_safe %>

如果你确实要使用手动循环的写法,需要修正你原有代码的几个问题:

  • e[title]中的title需要加引号,否则会被识别为JavaScript变量而非对象属性名
  • 不需要给属性值包裹匿名函数,直接赋值即可
  • 字符串类型的属性值需要主动加引号,否则会触发JS语法错误
    手动拼接的写法很容易出现语法问题,更推荐使用JSON序列化的方案。

内容的提问来源于stack exchange,提问作者MisterCal

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.07 04:30:00