Can we use formatter of Easyui Calendar to display custom date

[Alfred]

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

[jarry]

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