JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
    <div id="calendar"></div>
    <div id="popup">
        <table>
            <tbody>
                <tr>
                    <td>
                        <div class="popup_content">
                            <p id="date">DD/MM/YYYY</p>
                            <p>
                                <input type="text" id="event" name="event" placeholder="Event" />
                            </p>
                            <p>
                                <input type="text" id="participants" name="participants" placeholder="Participants" />
                            </p>
                            <p>
                                <textarea id="description" name="description" placeholder="Description here"></textarea>
                            </p>
                            <p>
                                <input type="button" id="save" value="Save" /> <input type="button" id="cancel" value="Cancel" />
                            </p>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

#app {
    position: relative;
    font-family: sans-serif;
    font-size: 12px;
}
#popup {
    position: absolute;
    display: none;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: none rgba(0,0,0,.5);
}
#popup table {
    width: 100%;
    text-align: center;
    height: 100%;
}
.popup_content {
    padding: 10px;
    background: none #fff;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid #000;
    text-align: left;
}
#calendar table {
    width: 100%;
    border-collapse: collapse;
}
#calendar table td {
    border: 1px solid #ccc;
}
.box {
    height: 100px;
}
.day {
    display: block;
}
.current {
    font-weight: bold;
}
.month_year {
    text-align: center;
    background: none #ccc;
}
.text {
    display: block;
    height: 80px;
    width: 100px;
    overflow: auto;
}
.text span {
    display: block;
}
.eve {
    color: green;
}
.par {
    color: blue;
}

JavaScript

// Sample data. We shall assign it to table cells later
var events = [
    {
        'date': '7-1-2015',
        'event': 'Event Title',
        'participants': 'John, Robert',
        'description': 'Football'        
    },
    {
        'date': '23-1-2015',
        'event': 'Event Title 2',
        'participants': 'Peter, Rob',
        'description': 'Basketball'        
    },
];
// Print calendar function
function calendar(date) {
    // If no parameter is passed use the current date.
    if (date == null) date = new Date();

    day = date.getDate();
    month = date.getMonth();
    year = date.getFullYear();

    months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

    this_month = new Date(year, month, 1);
    next_month = new Date(year, month + 1, 1);

    // Find out when this month starts and ends.
    first_week_day = this_month.getDay();
    days_in_this_month = Math.round((next_month.getTime() - this_month.getTime()) / (1000 * 60 * 60 * 24));

    calendar_html = '<table style="background-color:666699; color:ffffff;">';
    calendar_html += '<tr><td colspan="7" class="month_year">' + months[month] + ' ' + year + '</td></tr>';
    calendar_html += '<tr>';

    // Fill the first week of the month with the appropriate number of blanks.
    for (week_day = 0; week_day < first_week_day; week_day++) {
        calendar_html += '<td style="background-color:9999cc; color:000000;"> </td>';
    }

    week_day = first_week_day;
    for (day_counter = 1; day_counter <= days_in_this_month; day_counter++) {
        week_day %= 7;
        if (week_day == 0) calendar_html += '</tr><tr>';

        // Do something different for the current day.
        if (day == day_counter) calendar_html += '<td><div class="box" data-date="' + day_counter + '-' + (month+1) + '-' + year + '"><span class="day current">' + day_counter + '</span><span class="text"></span></div></td>';
        else...