edit kendo datepicker month template of calendar popup in angularjs-CodePudding

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 >#= 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 >#= 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?

CodePudding user response：

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);