JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <body>
        <div class="checkbox-dump"></div>
        <table class="timeplannerwidget">
            <thead>
                <tr>
                    <th>Seg</th>
                    <th>Ter</th>
                    <th>Qua</th>
                    <th>Qui</th>
                    <th>Sex</th>
                    <th>Sab</th>
                    <th>Dom</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="0-0" checked="checked" /></td>
                    <td><input type="checkbox" name="1-0" /></td>
                    <td><input type="checkbox" name="2-0" /></td>
                    <td><input type="checkbox" name="3-0" checked="checked" /></td>
                    <td><input type="checkbox" name="4-0" checked="checked" /></td>
                    <td><input type="checkbox" name="5-0" checked="checked" /></td>
                    <td><input type="checkbox" name="6-0" /></td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="0-1" checked="checked" /></td>
                    <td><input type="checkbox" name="1-1" /></td>
                    <td><input type="checkbox" name="2-1" checked="checked" /></td>
                    <td><input type="checkbox" name="3-1" checked="checked" /></td>
                    <td><input type="checkbox" name="4-1" /></td>
                    <td><input type="checkbox" name="5-1" checked="checked" /></td>
                    <td><input type="checkbox" name="6-1" /></td>
                </tr>
            </tbody>
        </table>
        <p></p>
    </body>
</html>

CSS

body{
    font-family:sans-serif;
}

th{
    height:2em;
}

td{
    text-align:center; /*center checkboxes fallback*/
    background:#ddd;
    height:2em; width:2em;
    border: 1px solid gray;
}

.timeplanner-can-change td:hover{
    background: #eee;
}

.timeplanner-free{
    background: #fea;
}

.timeplanner-can-change .timeplanner-free:hover{
    background: #FED;
}

JavaScript

(function($, undefined) {
    jQuery.fn.timeplanner = function(options) {
        options = $.extend({}, {
            can_change: true
        }, options);

        $(this).each(function(i, table) {
            if (options.can_change)
                $(this).addClass('timeplanner-can-change');

            var checkbox_dump = $('<div/>')
                .css('display','none')
                .addClass('timeplanner-checkbox-dump');

            $(this).after(checkbox_dump);

            $(this).find('td').each(function(i, table_cell) {
                var checkbox_here = $(this).find('input')[0];

                $(checkbox_dump)
                    .append(checkbox_here);

                var update_class = function(elm) {
                    $(elm)
                        .toggleClass('timeplanner-free', checkbox_here.checked);
                };

                update_class(table_cell);

                if (options.can_change) {
                    $(this).click(function() {
                        $(checkbox_here)
                            .click();
                        update_class(table_cell);
                    });
                }
            });
        });
    };
})(jQuery);

jQuery(function($) {
    $('.timeplannerwidget').timeplanner();
});