my fullcalendar only lists 1 event out of 3 that I have with for loop?

Question

I put in context I have my full calendar that only lists 1 event and does not list the others I have reviewed the code and maybe I need a bit of logic but I can't find what is happening, then I attach code with explanation

 /*  Initialize the calendar  */
        var ide = document.getElementsByName("id");
        var fecha = document.getElementsByName("fecha");
        var nombre = document.getElementsByName("nombre");
        var horaInicio = document.getElementsByName("horaInicio");
        var horaFin = document.getElementsByName("horaFin");
        var id="";
        var dia = "";
        var titulo = "";
        var inicio = "";
        var fin = "";

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var form = '';
        var today = new Date($.now());
        var citas=[];
       for (var x = 0; x < nombre.length; x++) {
            var defaultEvents =[{
                    id: id + ide[x].value,
                    title: titulo + nombre[x].value,
                    start: dia + fecha[x].value + 'T' + inicio + horaInicio[x].value,
                    end: dia + fecha[x].value + 'T' + fin + horaFin[x].value
                }];
                citas.push(defaultEvents);
            } 

            var $this = this; 
            for (var i=0;i<citas.length;i++){
            $this.$calendarObj = $this.$calendar.fullCalendar({
                events: citas[i]
            });
            }

At the beginning I am collecting values that come from my jsp file, I create a for loop where I create an object and in this object each one of the events goes and then I add them in an Array of name (citas) and this would be my result in my console

this is what it shows on my console. After this I make another for loop which is the one that has to list each of the events by calling the array and listing each of the positions and as a result it lists 1 event out of 3

Answer 1

There are two logical errors I can see:

1)

var defaultEvents =[{ ... }]

This creates an array with an object in it. You then push this array into the citas array. Therefore your events structure is an array of arrays (where each array contains one object). But fullCalendar expects an array of objects.

So change this to

var defaultEvents = { ... }

instead.

2)

for (var i=0;i<citas.length;i++){
    $this.$calendarObj = $this.$calendar.fullCalendar({
        events: citas[i]
    });
}

This just makes no sense. What your code says here is "loop through the citas array. For each item in the array, re-declare $calendarObj as a new calendar and give it the next array from citas as the events".

As you can see, this overwrites your calendar every time, and so you'll just end up with a calendar containing the last array entry you added to citas - which as we've seen, only contains one event.

If you make the change I mentioned in point 1, then setting up your calendar to contain all the events becomes trivial - just alter the above code to:

$this.$calendarObj = $this.$calendar.fullCalendar({
    events: citas
});