Rails 4, Full Calendar, Display Events Array

Question

Hoping someone can help - I'm trying to display an array of events in my Full Calendar Gem implementation.

In my controller, I have:

@events_array = 
        [
            {
                title: 'event1',
                start: '2016-03-01'
            },
            {
                title: 'event2',
                start: '2016-03-05',
                end: '2016-03-07'
            },
            {
                title: 'event3',
                start: '2016-03-09T12:30:00',
                allDay: false
            }
        ]

In my view, I have the following script:

<script>
    $(document).ready(function() {
        // page is now ready, initialize the calendar...
        $('#calendar').fullCalendar({
            // put your options and callbacks here
            height: "auto",
            events: "<%= @events_array %>"
        })
    });
</script>

The code above doesn't seem to be pulling the events into the calendar. However, when I replace "<%= @events_array %>" with:

[
                {
                    title: 'event1',
                    start: '2016-03-01'
                },
                {
                    title: 'event2',
                    start: '2016-03-05',
                    end: '2016-03-07'
                },
                {
                    title: 'event3',
                    start: '2016-03-09T12:30:00',
                    allDay: false
                }
            ]

directly in the View script, it works. =/ Any suggestions?? Thanks!

EDIT: The HTML render:

<script>
    $(document).ready(function() {
        // page is now ready, initialize the calendar...
        $('#calendar').fullCalendar({
            // put your options and callbacks here
            height: "auto",
            events: "[{:title=&gt;&quot;event1&quot;, :start=&gt;&quot;2016-03-01&quot;}, {:title=&gt;&quot;event2&quot;, :start=&gt;&quot;2016-03-05&quot;, :end=&gt;&quot;2016-03-07&quot;}, {:title=&gt;&quot;event3&quot;, :start=&gt;&quot;2016-03-09T12:30:00&quot;, :allDay=&gt;false}]"
        })
    });
</script>

Is it the extra quotes that is messing it up? How would I get rid of it?

Answer 1

You probably need to mark it as HTML-safe if it doesn't contain user generated data.

Given the following ERB:

<% @foo = [{title: 'event1',start: '2016-03-01'}] %>
<script>
  $(document).ready(function() {
    var bad = "<%= @foo %>";
    var better = <%= @foo.to_json.html_safe %>;
  });
</script>

You'll get the following HTML:

<script>
  $(document).ready(function() {
    var bad = "[{:title=&gt;&quot;event1&quot;, :start=&gt;&quot;2016-03-01&quot;}]";
    var better = [{"title":"event1","start":"2016-03-01"}];
  });
</script>

Note that bad is a String of escaped JSON, and better is real JSON.

Using html_safe introduces security risks though, so use with caution!! If user content gets in there, you'll be vulnerable to XSS:

• http://guides.rubyonrails.org/security.html#cross-site-scripting-xss
• https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)

Ideally your calendar would get the JSON from a seperate endpoint, instead of including it right there in an inline script.