0

I'm using knockout and I'm pulling events from an observable array. My events appear in console.log but the calendar doesn't render. If I copy the array from console.log and hard code it, the calendar renders fine. What's the difference. How can I troubleshoot this?

    viewModel.calendarViewModel = new ko.fullCalendar.cModel({
    events: cModel.events,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: false,
    viewDate: viewModel.viewDate
}, viewModel);

snippet from console.log:

"calendarViewModel": {
"events": [
  {
    "id": 1304,
    "title": "jjf2017_7_9-10",
    "start": "2017-07-08",
    "end": "2017-07-10",
    "Location": "Guest House",
    "backgroundColor": "Color",
    "RoomNumber": "203"
  },
  {
    "id": 1298,
    "title": "JulyTest",
    "start": "2016-07-09",
    "end": "2016-07-18",
    "Location": "Guest House",
    "backgroundColor": "Color",
    "RoomNumber": "205"
  },
  {
    "id": 1299,
    "title": "Julytest2",
    "start": "2016-07-09",
    "end": "2016-07-14",
    "Location": "Guest House",
    "backgroundColor": "Color",
    "RoomNumber": "209"
  },...
2
  • Please try to create a minimal reproducible example.
    – Jeroen
    Jun 15, 2016 at 13:39
  • Here's a fiddle: [link]jsfiddle.net/jjfrick/y58wjkkj This example works in jsFiddle and my app (if the array is coded) but if I load my data and push it to the array, nothing is displayed, with no errors using Chrome's developer tool. My app is used on our intranet. Jul 8, 2016 at 13:27

1 Answer 1

0

If you have a data source that is changing, you might try using the events property as a function instead of an array, and then using fullCalendar('refetchEvents') when a change to the data is observed. Here’s a working snippet I have from a Meteor app. Whenever the Mongo cursor I am observing changes, I call .fullCalendar(‘refetchEvents’) so that it refreshes the calendar display. In the example below, I'm grabbing an array of appointments from a Mongo collection, doing a little processing and then using 'callback' which is fullCalendar's way of putting the events on the calendar. When the data source changes (say, from adding an event via a form), I use fullCalendar('refetchEvents') from my form's success callback to make sure that the changes are rendered. ** you may be able to just use 'refetchEvents' and not mess with using the function structure, but I have not tested that in my case.

    events(start, end, timezone, callback) {
  const data = Appointments
    .find()
    .fetch() // <-- here's the array
    // doing some array processing)
    .map(appointment => {
      appointment.editable = ! isPast(appointment.start);
      return appointment;
    });

  if (data) {
    // fullCalendar parses the data and renders it on the cal.
    callback(data);
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.