JSFiddle - React, Tailwind, and code Playground

by skobaljic

HTML

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

CSS

#datepicker-container {
  text-align: center;
}

#datepicker-center {
  display: inline-block;
  margin: 0 auto;
}

.tooltip {
  color: #900;
  text-decoration: none;
}

.tooltip:hover {
  color: red;
  position: relative;
}

/* Tooltip on Top */
.tooltip-top[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 20px;
  min-width: 280px;
  background-color: #000;
  color: #fff;
  white-space: pre-line; /* This will allow \n to serve as break */
  text-align: left; /* Cosmetics... */
}

JavaScript

$(document).ready(function() {

  $("#datepicker-cal").datepicker({
    numberOfMonths: 2
  });

  $('#datepicker-cal * table *').click(false);
  //$.get( "include-cal.php", { rok: "rok-sve"} )
  //.done(function( data ) {
  //console.log( data );


  var data = "11,2020-07-10 00:00:00,P-1/1;12,2020-08-16 12:00:00,P-1/1;13,2020-10-16 09:00:00,P-1/1;14,2020-08-16 02:00:00,P-2/1;";
  var array = data.split(";");

  var arr = array.filter(function(el) {
    return el != "";
  });
  //console.log( arr ); 

  jQuery.each(arr, function(i, val) {
    arr2 = val.split(",");

    var dat = arr2[1].split(" ");
    //console.log( dat[0] );
    var datum = dat[0].split("-");

    //console.log( datum );
    //console.log( datum[1] );
    if (datum[1].startsWith("0")) {
      datum[1] = datum[1].replace("0", "");
    }
    if (datum[2].startsWith("0")) {
      datum[2] = datum[2].replace("0", "");
    }
    //console.log( datum[1] );
    //console.log( datum[2] );

    datum[1] = datum[1] - 1;
    var dani = $('.ui-datepicker-calendar * [data-month="' + datum[1] + '"][data-year="' + datum[0] + '"] a');
    jQuery.each(dani, function(k, bla) {
      $(this).attr('data-dani', $(this).html());
      $(this).addClass("tooltip-top tooltip");
      //$(this).attr('data-tooltip',"");
    });


	var thisCell = $('.ui-datepicker-calendar * td[data-month="' + datum[1] + '"][data-year="' + datum[0] + '"] a[data-dani="' + datum[2] + '"]');
	thisTooltip = thisCell.data('tooltip') || ''; /* Keep existing data */
    thisCell.css("background-color", "orange").attr('data-tooltip', thisTooltip + 'ID: ' + arr2[0] + ' / Naš br: ' + arr2[2] + ' / Vrijeme: ' + dat[1] + '\n');

    // var datatultip=$( '.ui-datepicker-calendar * td[data-month="'+datum[1]+'"][data-year="'+datum[0]+'"] a[data-dani="'+datum[2]+'"]' ).css("background-color", "orange").data('tooltip');

    // console.log(datatultip);
  });

  // })
});