How to get right format for fullcalendar.io

Question

I have been trying to display my database entries in the calendar. Step 1 is to get data from server in json format. step 2: iterate through data to build array. step 3 build array of arrays in accordance to the fullcalendar specs.

I seem to do great with steps 1 & 2 and if I cut and paste the result as shown it works. The diary entries show up where they are supposed to. Woohoo. However the data will change from day to day as time passes and would like this to work automatically without the cut and pasting.

Most of the time I get an indexed array 0:... 1:... 2:... and I think that may be why that does not work. When I paste in either a text variable as the data (text) I get nothing and when I push the data into an array, it seems to format ok but still does not show. Most frustrating.

It turns out the approach I was taking was the correct one. I had however used a variable and called it calendar which threw a spanner in the works. It was a coding problem, but one in the page elsewhere.

Here's the code I have broken down and where I have got to, which is not elegant as I have taken it to a level of text so that I can cut and paste the text to test - and when I do it works:

 // get appointments
  let events=new Array(); let apptDeat=new Array(); let start; let end; let id; let title=' '; let description=' ';
  $.get('appointmentsList', function(apptList) {
    console.log('apptList1:', apptList, ' Count: ',apptList.Count);
    for (let x=0; x < apptList.Count; ++x) { 
      if (apptList.Items[x].oDdate) {
        start = moment(apptList.Items[x].oDdate).format("YYYY-MM-DD");  start += 'T'+apptList.Items[x].oDtime;
      } else { start =0; }
      if (apptList.Items[x].oDEdate) {
        end   = moment(apptList.Items[x].oDEdate).format("YYYY-MM-DD");    end   += 'T'+apptList.Items[x].oDEtime;
      } else { end =0; }          
      if (apptList.Items[x].oDNumber) { title       = apptList.Items[x].oDNumber; } else { title=' '; }
      if (apptList.Items[x].oDTopic)  { description = apptList.Items[x].oDTopic;  } else { description=' '; }
      id=apptList.Items[x].Id;

      apptDeat +=  '{"title":"'+title+'","description":"'+description+'","id":"'+id+'","start":"'+start+'","end":"'+end+'","color":"blue" },';
    }
    apptDeat = apptDeat.substring(0, apptDeat.length-1);
    events.push(apptDeat);
    console.log('event: ', event, ' events: ', events, ' apptDeat: ', apptDeat);
    let today = new Date();
    let dateInput;
    $('#calendar').fullCalendar({
      eventClick: function(eventObj) { appDetail(eventObj.id); },
      events: events
      //[ {"title":"EVE0106820","description":" ","id":"apptDetails:8171433761442206","start":"2019-02-12T08:30","end":"2019-02-13T05:31" },{"title":"EVE0107006","description":" ","id":"apptDetails:8171581388491175","start":"2019-02-07T08:31","end":"2019-02-08T17:31" },{"title":"EVE0106551","description":"AWS DevOps","id":"apptDetails:8171864774477945","start":"2019-01-28T09:00","end":"2019-01-31T16:00" } ]
    });

By the way, I am using Chrome & the developer tools to see the variables console to the log.

Answer 1

This question is unclear on what the specific problem is, but it does seem like some things are off.

According to the FullCalendar docs , the events property can be multiple things, including an array of objects, which is what it seems like you're trying to pass it. This line of code:

apptDeat +=  '{"title":"'+title+'","description":"'+description+'","id":"'+id+'","start":"'+start+'","end":"'+end+'","color":"blue" },';

seems horrifying. If you're trying to build an array of objects to be passed in (which is what their docs say), this is not the way. You're building a string of "objects", not an array of objects. You keep appending to this string, then you simply push this string into an empty array. What you're left with, I'm assuming, is a single array of one messed up string.

apptDeat should not be an array, it should be an object, and inside your for loop, you should be assigning values to apptDeat as an object and then pushing that to your events array, like so:

apptDeat = {
  title,
  description,
  id,
  start,
  end,
  color: "blue"
};

events.push(apptDeat);

Sidenote, yikes @ that code formatting. Hopefully that was just StackOverflow messing it up.