JSFiddle - React, Tailwind, and code Playground

by Elak

HTML

<div id="my-calendar"></div>

CSS

/*today */

.ui-datepicker a {
    text-decoration: none;
}

#my-calendar a.ui-state-highlight {
    background-color: yellow !important;
    background-image:none !important;
}

#my-calendar td.highlight {

    background-color:lightskyblue; !important;
}

JavaScript

(function($) {
    $("#my-calendar").tooltip({content:'yay'});
    var events = [
        { Title: "Five K for charity", Date: new Date("09/16/2013") },
        { Title: "Dinner", Date: new Date("09/17/2013") },
        { Title: "Meeting with manager", Date: new Date("09/18/2013") }
    ];

    //console.log(events[1]);
    $("#my-calendar" ).datepicker({


    beforeShowDay: function(date) {

        var result = [true, '', null];
        var matching = $.grep(events, function(event) {
            //console.log(event.Date.valueOf() );
            return event.Date.valueOf() === date.valueOf();
        });

        if (matching.length) {
            result = [true, 'highlight', null];
        }
        return result;
    },

    onSelect: function(dateText) {

            var date,
                selectedDate = new Date(dateText),
                i = 0,
                event = null;

            /* Determine if the user clicked an event: */
            while (i < events.length && !event) {
                date = events[i].Date;

                if (selectedDate.valueOf() === date.valueOf()) {
                    event = events[i];
                }
                i++;
            }
            if (event) {
                /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
                var day = new Date(event.Date).getDate().toString();
                $("a.ui-state-default:contains("+day+")").attr({title:"hello world!"}); //selector definitely returns the relevant day
                $("a.ui-state-default:contains("+day+")").tooltip();



            }
        }

    });

})(jQuery);