I tried to write the below code in ngOnInit

```

$('#DatePicker').datepicker({
          changeMonth: true,
          changeYear: true,
          maxDate:0,
          //The calendar is recreated OnSelect for inline calendar
          onSelect: function(date, dp) {
            this.updateDatePickerCells(dp);

          },
          onChangeMonthYear: function(month, year, dp) {
            this.updateDatePickerCells(dp);
          },
          beforeShow: function(elem, dp) { //This is for non-inline datepicker
            this.updateDatePickerCells(dp);
          }
        });

updateDatePickerCells(dp) {
    /* Wait until current callstack is finished so the datepicker
       is fully rendered before attempting to modify contents */
    setTimeout(function() {
      //Fill this with the data you want to insert (I use and AJAX request).  Key is day of month
      //NOTE* watch out for CSS special characters in the value
      var cellContents = {
        '15-06-2020': '20',
        '15-08-2018': '60',
        '28-08-2018': '$99.99'
      };
      //Get the month and year for checking.
      var selected_month = parseInt($('.ui-datepicker-month').val()) + 1;
      var selected_year = $('.ui-datepicker-year').val();
      //Select disabled days (span) for proper indexing but // apply the rule only to enabled days(a)
      $('.ui-datepicker td > *').each(function(idx, elem) {
        //Specific the target key by adding back the month and year.
        var key = ('0' + (idx + 1)).slice(-2) + '-' + ('0' + selected_month).slice(-2) + '-' + selected_year
        var value = cellContents[key] || 0;

        // dynamically create a css rule to add the contents //with the :after                         
        //             selector so we don't break the datepicker //functionality 
        var className = 'datepicker-content-' + CryptoJS.MD5(value).toString();

        if (value == 0)
          this.addCSSRule('.ui-datepicker td a.' + className + ':after {content: "\\a0";}'); //&nbsp;
        else
          this.addCSSRule('.ui-datepicker td a.' + className + ':after {content: "' + value + '";}');

        $(this).addClass(className);

      });
    }, 0);
  }
   dynamicCSSRules = [];

   addCSSRule(rule) {
    if ($.inArray(rule,this.dynamicCSSRules) == -1) {
      $('head').append('<style>' + rule + '</style>');
      this.dynamicCSSRules.push(rule);

    }
  }

```

Update method is used to display some content on calendar cell based on date. 
Also imported the below script file and css file in index.html

```
 <script src="./assets/jquery-ui.js"></script>
  <link rel="stylesheet"  href="./assets/jquery-ui.css">

```

Getting the following error

```
ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_0__(...).datepicker is not a function
    at CalendarComponent.ngOnInit (calendar.component.ts:16)
    at checkAndUpdateDirectiveInline (core.js:33353)
    at checkAndUpdateNodeInline (core.js:46284)
    at checkAndUpdateNode (core.js:46223)
    at debugCheckAndUpdateNode (core.js:47246)
    at debugCheckDirectivesFn (core.js:47189)
    at Object.updateDirectives (calendar.component.html:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:47177)
    at checkAndUpdateView (core.js:46188)
    at callViewAction (core.js:46554)

```

Please anyone suggest me how to use Jquery datepicker in angular or any another way on how to add extra text to calendar cell based on date...

Thanks in Advance!!!