JSFiddle - React, Tailwind, and code Playground

by Vishnuprasad ps

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="datepicker"></div>

CSS

.Highlighted a {
  background-color: Green !important;
  background-image: none !important;
  color: White !important;
  font-weight: bold !important;
  font-size: 12pt;
}

JavaScript

var dates = {}
 dates[new Date('08/20/2017').getTime()] = 'Holiday1';
 dates[new Date('08/21/2017').getTime()] = 'Holiday2';
 dates[new Date('08/22/2017').getTime()] = 'Holiday3';

 $('#datepicker').datepicker({
   beforeShowDay: function(date) {
     var hlText = dates[date.getTime()];
     return (hlText) ? [true, "Highlighted", hlText] : [true, '', ''];
   }
 });
 
 $( function() {
    $( document ).tooltip();
  } );