JSFiddle - React, Tailwind, and code Playground

by Tobbe

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<input type="text" id="dateInput">

CSS

.ui-datepicker {
    width: 11em;
}

.ui-datepicker table {
    font-size: .7em;
}

.ui-datepicker-header {
    font-size: .7em;
}

.eventPlanned a.ui-state-default {
    background: green !important;
}

.eventPlanned a.ui-state-hover {
    background: red !important;
}

td.eventPlanned span.ui-state-default {
    background: blue !important;
}

#eventPopup {
    position: absolute;
    border: 1px solid #777;
    background: #ccc;
    padding: 3px;
}

#eventPopup p {
    margin: 0;
    padding: 0;
}

JavaScript

getEvents();

$(function() {
    $('<div id="dateDiv"></div>').insertAfter('#dateInput');
    $('#dateInput').hide();

    $('#dateDiv').datepicker({
        altField: '#dateInput',
        altFormat: 'yy-mm-dd',
        dateFormat: 'yy-mm-dd',
        firstDay: '1',
        showOtherMonths: 'true',
        beforeShowDay: beforeShowDay,
        onChangeMonthYear: getEvents
    });
});

var enqueuedDates = [];
var tryCounter = 0;
var events = [];

function getEvents() {
    events = [];
    enqueuedDates = [];
    
    $.ajax({
        data: {
            json: JSON.stringify([{text: 'Buy Milk', date: '2010-09-27'}, {text: 'Mike\'s Birthday', date: '2010-10-03'}, {text: 'Fly to Copenhagen', date: '2010-10-21'}]),
            delay: 1
        },
        type: 'POST',
        dataType: 'json',
        url: '/echo/json/',
        success: function(json) {
            events = json;
        }
    });
}

function beforeShowDay(date) {
    enqueuedDates.push(new Date(date));

    if (enqueuedDates.length == 35) {
        processEnqueuedDates();
    }

    return [true, '', ''];
}

function processEnqueuedDates() {
    if (!events || events.length === 0) {
        tryCounter++;
        if (tryCounter < 200) {
            setTimeout(processEnqueuedDates, 10);
        } else {
            tryCounter = 0;
        }

        return;
    }

    tryCounter = 0;

    for (var i = 0; i < enqueuedDates.length; ++i) {
        var event = getEvent(events, enqueuedDates[i]);

        if (event) {
            var theDateCells = $('#dateDiv .ui-datepicker-calendar td');
            var hideTimeoutID;
            theDateCells.eq(i).addClass('eventPlanned').
                bind('mouseenter', function(eventText) {
                    return function() {
                        if (hideTimeoutID) {
                            clearTimeout(hideTimeoutID);
                            hideTimeoutID = null;
                        }

                        var popup = $('#eventPopup');
    ...