edit kendo datepicker month template of calendar popup in angularjs

Question

I am trying to change the month template of an existing calendar popup.

First I used the following code

$("#" + attributeId).kendoDatePicker({
   dates: jsonResult,
   weekNumber: true,
   month: {
      // template for dates in month view
      content: '#console.log(data);#' +
      '<div ' +
      '#if(data.dates.find(x => +new Date(x.calenderDate) === +new Date(data.date)))' +
      '{#' +
      'style="background-color:#=data.dates.find(x => +new Date(x.calenderDate) === +new Date(data.date)).colorHex#;border-radius:50%"' +
      '#}#'+
      '>#=data.value#<\div>',

      weekNumber: '<a class="italic">#= data.weekNumber #</a>'
   }
});

Soon I noticed that this creates a new one.

So I tried to edit the existing one with the following.

$("#" + attributeId).kendoDatePicker.dates = jsonResult;
$("#" + attributeId).kendoDatePicker.weekNumber = true;
$("#" + attributeId).kendoDatePicker.month = {
   // template for dates in month view
   content: '#console.log(data);#' +
   '<div ' +
   '#if(data.dates.find(x => +new Date(x.calenderDate) === +new Date(data.date)))' +
   '{#' +
   'style="background-color:#=data.dates.find(x => +new Date(x.calenderDate) === +new Date(data.date)).colorHex#;border-radius:50%"' +
   '#}#' +
   '>#=data.value#<\div>',

   weekNumber: '<a class="italic">#= data.weekNumber #</a>'                  
};

I tried using $scope.$apply() and $scope.digest() but both did nothing. No error message is coming up.

My problem is that the popup does not change the appearance. Does anyone know what I'm doing wrong?

Answer 1

Solved it:

var newOptions = $("#attributeId").data("kendoDatePicker").options;
newOptions.month = {
   // template for dates in month view
   content: '<span style="background-color:pink;border-radius:50%" >#=data.value# <\span>'

};
$("#attributeId").data("kendoDatePicker").setOptions(newOptions);