JSFiddle - React, Tailwind, and code Playground

by Adil Heybətov

HTML

<div class="datepicker"></div>

CSS

div.datepicker {
  float: right;
}

.ui-datepicker .weekend .ui-state-default {
  background: #FEA;
}

.ui-datepicker-calendar td a[data-custom] {
  position: relative;
  padding-bottom: 10px;
}

.ui-datepicker-calendar td a[data-custom]::after {
  content: '$' attr(data-custom);
  display: block;
  font-size: small;
}

JavaScript

$(function() {
  $(".datepicker").datepicker({
    beforeShow: addCustomInformation,
    beforeShowDay: function(date) {
      return [true, date.getDay() === 5 || date.getDay() === 6 ? "weekend" : "weekday"];
    },
    onChangeMonthYear: addCustomInformation,
    onSelect: addCustomInformation
  });
  addCustomInformation();
});

function addCustomInformation() {
  setTimeout(function() {
    $(".ui-datepicker-calendar td").filter(function() {
      var date = $(this).text();
      return /\d/.test(date);
    }).find("a").attr('data-custom', 110);
  }, 0)
}