JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<div id="datepicker"></div>

CSS

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

JavaScript

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

function addCustomInformation() {
  $("#datepicker td").filter(function() {
    var date = $(this).text();
    return /\d/.test(date);
  }).find("a, span").html(function(i, html) {
    return html + "<br><small>$100</small>";
  });
}