JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<div id="middle">
    <div id="calendar_container" style="position: relative; top:0px; left: 0px;">
        <div id="attendance" class="attendance" style="width: 80px; height: 24px; background-color:Blue; color: Yellow; position: absolute; left: 50px; font-size: 8px; z-index:120">
            <span class="calendar-item-title">New attendance</span><br />
            <span class="calendar-item-time">Drag it to the calendar</span>
        </div>
        <table cellpadding="0" cellspacing="0" style="position:absolute; top:30px;">
            <thead>
                <tr>
                    <td style="width:50px; height:20px;">Time</td>
                    <td style="width:80px;">Monday</td>
                    <td style="width:80px;">Tuesday</td>
                    <td style="width:80px;">Wednesday</td>
                    <td style="width:80px;">Thursday</td>
                    <td style="width:80px;">Friday</td>
                    <td style="width:80px;">Saturday</td>
                    <td style="width:80px;">Sunday</td>
                </tr>
            </thead>
            <tbody id="calendar_body">
                <tr  style="background-color: #FFFFCC;">
                    <td style="height:24px;">06:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr  style="background-color: #CCFFCC;">
                    <td style="height:24px;">07:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr  style="background-color: #FFFFCC;">
                    <td style="height:24px;">08:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr  style="background-color: #CCFFCC;">
...

JavaScript

counter = 0;

function boxproperties(o, pos) {
    var top = pos.top - 50;
    var startMin = top * 2.5;
    var startTime = new Date(1,1,1,6,startMin,0,0);

    var days = new Array('Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun');
    var day = parseInt((pos.left - 50) / 80)
    
    var length = o.height();
    var lengthMin = length * 2.5;
    
    o.find('.calendar-item-time').html(days[day] + ',' + startTime.getHours() + ':' + startTime.getMinutes() + ' | ' + lengthMin + ' min');
}

$(document).ready(function () {
    $('#attendance').draggable({
        cursor: 'crosshair',
        grid: [80, 2],
        opacity: .5,
        containment: '#calendar_body',
        helper: 'clone',
        drag: function (ev, ui) {
            boxproperties(ui.helper, ui.position);
        },
        stop: function (ev, ui) {
            counter++;
            var o = $(this).clone();
            o.attr('id', 'attendance_' + counter);
            o.css({ top: ui.position.top, left: ui.position.left });
            o.find('.calendar-item-title').html(o.find('.calendar-item-title').html() + '_' + counter);
            boxproperties(o, ui.position);

            $('#calendar_container').prepend(o);


            o.resizable({
                handles: 'all',
                grid: [80, 2],
                maxWidth: 80,
                minWidth: 80,
                minHeight: 2,
                containment: '#calendar_body',
                resize: function (ev, ui) {
                    boxproperties(ui.helper, ui.position);
                },
                stop: function (ev, ui) {
                    boxproperties(ui.helper, ui.position);
                }
            }).draggable({
                cursor: 'crosshair',
                grid: [80, 2],
                opacity: .5,
                containment: '#calendar_body',
                drag: function (ev, ui) {
                    boxproperties(ui.helper, ui.position);
                },
                stop: function...