JSFiddle - React, Tailwind, and code Playground

by Luke

HTML

<body>
	<!--This initial markup will be sent from server generated for current time.-->
	<div id="supunitcontainer" data-selected-year="2014" data-selected-monthname="May" data-selected-day="18" data-selected-hour="24"></div>
	<div id="subunitscontainer">
		
		<div id="dayscontainer">
			<p class="days" data-year="2014" data-monthname="May">31</p>
			<p class="days" data-year="2014" data-monthname="May">30</p>
			<p class="days" data-year="2014" data-monthname="May">29</p>
			<p class="days" data-year="2014" data-monthname="May">28</p>
			<p class="days" data-year="2014" data-monthname="May">27</p>
			<p class="days" data-year="2014" data-monthname="May">26</p>
			<p class="days" data-year="2014" data-monthname="May">25</p>
			<p class="days" data-year="2014" data-monthname="May">24</p>
			<p class="days" data-year="2014" data-monthname="May">23</p>
			<p class="days" data-year="2014" data-monthname="May">22</p>
			<p class="days" data-year="2014" data-monthname="May">21</p>
			<p class="days" data-year="2014" data-monthname="May">20</p>
			<p class="days" data-year="2014" data-monthname="May">19</p>
			<p class="days" data-year="2014" data-monthname="May">18</p>
			<p class="days" data-year="2014" data-monthname="May">17</p>
			<p class="days" data-year="2014" data-monthname="May">16</p>
			<p class="days" data-year="2014" data-monthname="May">15</p>
			<p class="days" data-year="2014" data-monthname="May">14</p>
			<p class="days" data-year="2014" data-monthname="May">13</p>
			<p class="days" data-year="2014" data-monthname="May">12</p>
			<p class="days" data-year="2014" data-monthname="May">11</p>
			<p class="days" data-year="2014" data-monthname="May">10</p>
			<p class="days" data-year="2014" data-monthname="May">9</p>
			<p class="days" data-year="2014" data-monthname="May">8</p>
			<p class="days" data-year="2014" data-monthname="May">7</p>
			<p class="days" data-year="2014" data-monthname="May">6</p>
			<p class="days" data-year="2014"...

JavaScript

$(function(){
	var DELAY = 300, clicks = 0, timer = null;
    $("#subunitscontainer").on("click", "p", function(e){
        clicks++;  //count clicks

        if(clicks === 1)
		{
            timer = setTimeout(function()
			{
                //alert("Single Click");  //perform single-click action. query server with ajax request.				    
                h(e);
				clicks = 0;             //after action performed, reset counter
            }, DELAY);
        }
		else
		{
            clearTimeout(timer);    //prevent single-click action
            clicks = 0;             //after action performed, reset counter
        }
    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
        f(e);
    });
});
//end single and double clicks detector.

//double right click detector
function makeDoubleRightClickHandler( handler )
{
	var timeout = 0, clicked = false;
	return function(e) {
	    e.preventDefault(); 
    
	    if( clicked ) {
	        clearTimeout(timeout);
	        clicked = false;
	        return handler.apply( this, arguments );
	    }
	    else {
	        clicked = true;
	        timeout = setTimeout( function() {
	            clicked = false;
	        }, 300 );
	    }
	};
}
//end double right click detector.
	
//apply double right click detector
$(document).contextmenu( makeDoubleRightClickHandler( function(e) {
	//alert("dbl right clicked");
	k(event);
}));
//end apply double click detector.

//////////end EVENT DETECTORS.



/////////VARIABLES
var months_lengths = 
{
	Dec: 31,
	Nov: 30,
	Oct: 31,
	Sep: 30,
	Aug: 31,
	Jul: 31,
	Jun: 30,
	May: 31,
	Apr: 30,
	Mar: 31,
	Feb: 28,
	Jan: 31,
};

var order_months =
{
	 1: "Jan",
	 2: "Feb",
	 3: "Mar",
	 4: "Apr",
	 5: "May",
	 6: "Jun",
	 7: "Jul",
	 8: "Aug",
	 9: "Sep",
	10: "Oct",
	11: "Nov",
	12: "Dec",
};

var months_order =
{        
	 Jan:  1,
	 Feb:  2,
	 Mar:  3,
	 Apr:  4,
	 May:  5,
	 Jun:  6,
	 Jul:  7,
	 Aug:  8,
	 Sep:  9,
	 Oct: 10,
	 Nov: 11,
	 Dec:...