fill data Calendar AdminLte on Javascript

Question

I am trying to fill event on Calendar from template bootstrap AdminLte3. I always get error while i run it with message Failed to load resource: the server responded with a status of 400 ().

here is my source .js (it's edited from template).

$(document).ready(function () {

/* initialize the calendar
-----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date()
var d    = date.getDate(),
m    = date.getMonth(),
y    = date.getFullYear()

var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendar');

var fillcalendar = '[';
for (let i = 1; i < 6; i++)
{
  fillcalendar += '{';
  fillcalendar +=  'title : "All Day Event '+i+'",';
  fillcalendar +=  'start : new'+' '+'Date(y,m,'+i+'),';
  fillcalendar +=  'backgroundColor : "#f56954",' ; //red '#f56954'
  fillcalendar +=  'borderColor : "#f56954",';
  fillcalendar +=  'allDay : "true"';

  if(i != 5){fillcalendar += '},';}
        else{fillcalendar += '}' ;}
}
fillcalendar += ']';

var calendar = new Calendar(calendarEl, {
      headerToolbar: {
        left  : 'prev,next today',
        center: 'title',
        right : 'dayGridMonth'
      },
      themeSystem: 'bootstrap',
      //custom fill
      events: fillcalendar,
      editable  : true,
      droppable : true, // this allows things to be dropped onto the calendar !!!
      drop      : function(info) {
        // is the "remove after drop" checkbox checked?
        if (checkbox.checked) {
          // if so, remove the element from the "Draggable Events" list
          info.draggedEl.parentNode.removeChild(info.draggedEl);
        }
      }
    });

    calendar.render();
});

i check variable fillcalendar on browser console and it fill with

http://localhost:8083/[%7Btitle%20:%20%22All%20Day%20Event%201%22,start%20:%20new%20Date(y,m,1),backgroundColor%20:%20%22#f56954%22,borderColor%20:%20%22#f56954%22,allDay%20:%20%22true%22},{title%20:%20%22All%20Day%20Event%202%22,start%20:%20new%20Date(y,m,2),backgroundColor%20:%20%22#f56954%22,borderColor%20:%20%22#f56954%22,allDay%20:%20%22true%22},{title%20:%20%22All%20Day%20Event%203%22,start%20:%20new%20Date(y,m,3),backgroundColor%20:%20%22#f56954%22,borderColor%20:%20%22#f56954%22,allDay%20:%20%22true%22},{title%20:%20%22All%20Day%20Event%204%22,start%20:%20new%20Date(y,m,4),backgroundColor%20:%20%22#f56954%22,borderColor%20:%20%22#f56954%22,allDay%20:%20%22true%22},{title%20:%20%22All%20Day%20Event%205%22,start%20:%20new%20Date(y,m,5),backgroundColor%20:%20%22#f56954%22,borderColor%20:%20%22#f56954%22,allDay%20:%20%22true%22}]?start=2021-06-27T00%3A00%3A00%2B07%3A00&end=2021-08-08T00%3A00%3A00%2B07%3A00

after that, i try JSON.parse(fillcalendar) and the error message is unexpected token e in json at position 41

Answer 1

If you're creating a list of events for fullalendar like this using JavaScript, then what you pass to fullCalendar needs to be an array, not a string. It makes no sense to try and build a string and then parse it as JSON either - making your own JSON by hand is error-prone, as you've discovered.

(N.B. What you're seeing in the console is because you passed fullCalendar a string, it assumes it's a URL where it should fetch the events from, and tries to make an AJAX request to it. But of course the URL is nonsense so it fails.)

Just building the array naturally would make a lot more sense (as well as being easier to code and easier to read and debug and maintain afterwards):

var fillcalendar = [];

for (let i = 1; i < 6; i++)
{
  fillcalendar.push({
    title: "All Day Event " + i,
    start: new Date(y, m, i),
    backgroundColor: "#f56954",
    borderColor: "#f56954",
    allDay: true
  });
}

Working demo: https://codepen.io/ADyson82/pen/QWvEovw