How to set an JSON value to an event in fullcalendar?

Question

I have an JSON string containing arraylist of objects in JSP.

values=gson.toJson(list);%>
<input type="hidden" id="var1" value='<%=values%>'>

The JSON string in 'values' is formatted with proper names according to fullcalendar like this

[{"title":"Aaron at 101","start":"2016-11-30","end":"2016-12-05"},{"title":"Dave at 103","start":"2016-11-25","end":"2016-12-03"}]

When I try to use this variable in fullcalendar, I see only an empty calendar.

$(document).ready(function() {
        var lists= $('#var1').val();
        $('#calendar').fullCalendar({
            defaultDate: '2016-12-01',
            editable: true,
            eventLimit: true,
            events: lists
        });

    });

Is there any proper way to assign the events? Please help me out since I'm new to jQuery.

Answer 1

Do you have added the moment.js dependency?

Bellow I wrote a working snippet based on your example.

var events = [
  {
    "title":"Aaron at 101",
    "start":"2016-11-30",
    "end":"2016-12-05"
  },
  {
    "title":"Dave at 103",
    "start":"2016-11-25",
    "end":"2016-12-03"
  }
];

$('#calendar').fullCalendar({
    defaultDate: '2016-12-01',
    editable: true,
    eventLimit: true,
    events: events
});

<!-- fullcalendar dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.min.js"></script>

<!-- fullcalendar script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>

<!-- fullcalendar style -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css">

<div id="calendar"></div>