JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<body>
  <div class="week-picker"></div>
  <div id="day-details">
    <span id="day-details-text"> </span>
  </div>

</body>

CSS

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

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

#day-details {
  display: hidden;
}

JavaScript

$(function() {

  var days1 = []
  var days2 = []

  days1.push(new Date('01/04/2016').getTime());
  days1.push(new Date('01/05/2016').getTime());
  days1.push(new Date('01/06/2016').getTime());
    days1.push(new Date('01/07/2016').getTime());
  days2.push(new Date('01/08/2016').getTime());


  $('.week-picker').datepicker({
  	
    // Allow other month to be displayed
    showOtherMonths: true,
    selectOtherMonths: true,

		// Color code calendar days
    beforeShowDay: function(date) {

      if ($.inArray(date.getTime(), days1) > -1) {
        return [true, "green"];
        
      } else if ($.inArray(date.getTime(), days2) > -1) {
        return [true, "red"];
        
      } else {
        return [true, ""];
      }

    },
		
    // Display a full year
    numberOfMonths: [4, 3],


		onSelect: function(date) {
      $("#day-details-text").text(date + "... details....")
      $("#day-details").dialog()
    }
    
  });


});