EasyUI Forum

I am trying to format date to show event and status from remote json file but could not get it working:

var remotejson = {
   "id":[{
      "d":5,
      "m":4,
      "y":2019,
      "status":"P",
      "color":"teal"
   },{
      "d":12,
      "m":4,
      "y":2019,
      "status":"H",
      "color":"blue"
   }]
};
$.each(remotejson.id, function(i, item) {
       var jd = json.id.d;
       var jm = json.id.m;
       var jy = json.id.y;
       var jc = json.id.color;
       var js = json.id.status;
  });
   $('#atcalendar').calendar({
   formatter: function(date){
      var m = date.getMonth();
      var d = date.getDate();
      var y = date.getFullYear();
                var opts = $(this).calendar('options');
      if(opts.d==jd && opts.m==jm && opts.y==jy){
         return '<div style="color:'+jc+'">' + d + '<br>'+jdate.status+'</div>';
          } else {
                   return d;
              }      
   },
   onSelect: function(date){
            //show another dialog
   },
       onNavigate:function(year,month,date){
          //load fresh data from php which generates the json
       }
});

If I put the each loop inside the formatter, the calendar date also gets looping. With the above code, no date is shown on the calendar. I am trying to put the above code on easyui dialog onLoad:function(). I want to style and show custom text along with the date, and when I click and the calendar navigation, I want fresh data from remote json generated by php. Is this possible in easyui calendar? If it is possible to achieve, please help.

Thanks and regards,
Alfred

Please look at this example http://code.reloado.com/otukur/edit#preview