将事件从数据库上传到FullCalendar

Question

I want to render events that are saved in the database to the Calendar Template. All the events are passed as objects and can be retrieved like so:

{% for object in objects %}
    var start = "{{ object.start }}"; 
    var end = "{{ object.end }}";
    var name = "{{ object.name }}";
{% endfor %}

I can confirm this is working because I see it in Sources tab when I inspect the page. So I have a few events stored in the database and I want to render these events.

So looking at the documentation , I thought about doing something like this:

        $('#calendar').fullCalendar({
            eventSources: [
                // your event source
                {
                    events: [ // put the array in the `events` property
                        {% for object in objects %}
                            var start = "{{ object.start }}"; // Can't seem to identify this statement
                            var end = "{{ object.end }}";
                            var name = "{{ object.name }}";
                            var event={id:1 , title: name, start: start, end:end};
                            //$('#calendar').fullCalendar( 'renderEvent', event, true);
                            {
                                title : name,
                                start : start,
                                end   : end,
                            }
                        {% endfor %}

                    ]
                }
                // any other event sources...
            ]

        });

But the events array returns empty shown in the Sources inspect tab. I have been stuck on this for quite a while. Any ideas?

EDIT:

If I do something like this:

select: function(start,end){
    {% for object in objects %}
        var name = "{{ object.name }}";
        var start = "{{ object.start }}";
        var end = "{{ object.end }}";
        var event={id:1 , title: name, start: start, end:end};
        $('#calendar').fullCalendar( 'renderEvent', event, true);
    {% endfor %}

The events will show if I click on a date. So I think if I wrap in a function it'll work. With that being said, is there like a initialize() function in fullcalendar?

Answer 1

Found a solution:

loading: function(bool){
    {% for object in objects %}
        if (bool){

        var name = "{{ object.name }}";
        var start = "{{ object.start }}";
        var end = "{{ object.end }}";
        var event={id:1 , title: name, start: start, end:end};
        $('#calendar').fullCalendar( 'renderEvent', event, true);
        }
    {% endfor %}
},