Fullcalendar using variable to add events

Question

I am having trouble using eventString to add events to fullcalendar. I don't know what I am doing wrong.

<script>
$(document).ready(function() {

    var value=<?php echo $_SESSION['calAvail']; ?>;
    console.log(value);
    var eventString = "[{";
    console.log(value.endDate[0].substring(11,16));
    for(var i = 0, max = value.endDate.length; i < max; i++) {
        if( i != value.endDate.length-1) {
            eventString += "title:" + "\"" + value.title[i] + "\", ";
            eventString += "start:" + "\"" + value.startDate[i].substring(11,16) + "\", ";
            eventString += "end: " + "\"" + value.endDate[i].substring(11,16) + "\", ";
            eventString += "dow: [" + value.day[i] + "] },{ ";
        } else {
            eventString += "title: " + "\"" + value.title[i] + "\", ";
            eventString += "start:" + "\"" + value.startDate[i].substring(11,16) + "\", ";
            eventString += "end: " + "\"" + value.endDate[i].substring(11,16) + "\", ";
            eventString += "dow: [" + value.day[i] + "] ";
        }

    }
    eventString += "}]"; 

    console.log(eventString);
    var eventShow = eventString;

    $('#calendar').fullCalendar({
        defaultDate: moment(),
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: 'month',
        events: eventString
    })
});
</script>


<script type="text/javascript">
    function userInfoChange() {
        window.location = "http://localhost/TisTheSeason/profile_user_edit.php";
    }
</script>

So first I am creating a string based off a json that contains the title, start, end fields. My plan was to dynamically pull out the information in the json and then format it so it follows this:

[{ "title": "", "start": "", "end": "" }]

I did that but I can't seem to put the variable in events:

Answer 1

In the events property, fullCalendar expects to be given either

a) a JavaScript variable - which must be an array containing a series of event objects ( documentation ), or

b) a URL from where it can download a JSON string which it will then automatically parse into a JavaScript array containing event objects ( documentation ), or

c) a function which does the same process as b) but using a custom data source ( documentation ).

Your code appears to be attempting to implement option a), but instead of creating a JavaScript array from your data you are creating a variable containing a string instead (ie some plain text). The string happens to look like JSON, but it's still a string . It is not an array. FullCalendar is not expecting this. It's not a usable data structure. To be usable, first it would have to be parsed and turned into an array, before you give it to fullCalendar.

That's normally what you'd do if you implemented option c) (and in option b), fullCalendar will do that part on your behalf), but it doesn't work for option a).

Now...you're using JavaScript to create this variable, so it would make far more sense to simply create the desired JavaScript array directly by declaring it in the code. Using JavaScript to make a string and then parse it back to a JavaScript array again is just a pointless extra step. (Also, building JSON strings by hand like this is very vulnerable to the injection of accidental syntax errors and should never be attempted in any situation. If you actually need to create JSON then use a suitable code library to do so.)

$(document).ready(function() {
  var value= <?php echo $_SESSION['calAvail']; ?>;
  var eventList = []; //declare an array, not a string!

  for(var i = 0; i < value.endDate.length; i++) {
    var event = { 
      "title": value.title[i], 
      "start": value.startDate[i].substring(11,16),
      "end": value.endDate[i].substring(11,16),
      "dow": [ value.day[i] ]
    };
    eventList.push(event);
  }

  console.log(JSON.stringify(eventList));

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'month',
    events: eventList
  });
});

So all you're doing here essentially is translating the data structure from one format to another. Notice how much cleaner, easier to read (and to test, maintain and debug) it is. Also, the if/else within your for loop appeared to produce an identical object in either case so it's unclear what the purpose of that was. I removed that test in my version.

defaultDate: moment() is also redundant in your fullCalendar declaration - fullCalendar will already show today's date by default ( documentation ).