Question

I am trying to get an event calendar working from json data. I just want to highlight dates, and have a div update below the calendar with the event details when the user clicks on a date. My app serves the JSON in the form:

[
  {"Date":"02/06/2012","Title":"Eat, Bike, and Swim"},
  {"Date":"02/03/2012","Title":"Sleep"},
  {"Date":"02/02/2012","Title":"Laugh"}
]

I have a JS fiddle that works with a variable definition, but I can’t get it to respond to a JSON request.

Here is my best attempt: http://jsfiddle.net/PGmFv/2/

The javascript is:

$(document).ready(function() {
  var dp, events;
  events = [];
  return dp = $(".blog_calendar").datepicker({
    beforeShowDay: function(date) {
      var matching, result;
      $.getJSON("https://raw.github.com/gist/1676157/15ce81851e57dfcecb985039e970a749585959de/my.json", function(data) {
        return events = data;
      });
      result = [true, "", null];
      matching = $.grep(events, function(event) {
        return event.Date.valueOf() === date.valueOf();
      });
      if (matching.length) {
        result = [true, "highlight", null];
      }
      return result;
    },
    onSelect: function(dateText) {
      var date, event, i, selectedDate;
      date = void 0;
      selectedDate = new Date(dateText);
      i = 0;
      event = null;
      while (i < events.length && !event) {
        date = events[i].Date;
        if (selectedDate.valueOf() === date.valueOf()) {
          event = events[i];
        }
        i++;
      }
      if (event) {
        return alert(event.Title);
      }
    }
  });
});

I’m trying to load in the json inside the datepicker function because I want to be able to have multiple calendars on the same page and this.id contains a specific url variable so I can call $.getJSON('/events/' + this.id + '/data.json',function() {}

Any thoughts greatly appreciated. I’m leaning significantly on: Events in jQuery UI Datepicker with json data source and Datepicker with events? but just not able to get the json to load at the right time and in the right way.

The lack of an error in console is not helping.

Answer 1

In order to get JSON data from another domain, you have to use JSONP with a callback function. The Github API supports this (example), and jQuery handles making the callback automatically with dataType: 'jsonp'.

This is how I get JSON data from a Github gist with jQuery:

$.ajax({
  url: 'https://api.github.com/gists/'+gistid,
  type: 'GET',
  dataType: 'jsonp'
}).success( function(gistdata) {
  // This can be less complicated if you know the gist file name
  var objects = [];
  for (file in gistdata.data.files) {
    if (gistdata.data.files.hasOwnProperty(file)) {
      var o = JSON.parse(gistdata.data.files[file].content);
      if (o) {
        objects.push(o);
      }
    }
  }
  if (objects.length > 0) {
    // DoSomethingWith(objects[0])
  }
}).error( function(e) {
  // ajax error
});

(jsFiddle)