JSFiddle - React, Tailwind, and code Playground

by 100thGear

HTML

<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css">
<script src="http://www.arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<script>
    $("#bbit-cal-quickAddBTN").live('click',function(){
                                                        alert($("#box-cl").attr('value'));
                                    });
    $("#bubbleClose1").live('click',function() {
                                        $(this).parents('qtip').hide();

                                   });
</script>
<div style="border:solid 2px red;">
        <div id='calendar'></div>
</div>

CSS

cl_root {
    width: 100%;
    font-size: 13px;
    overflow: hidden;
}
.cl_root .cl_table {
    background-color: #FFF;
    width: 100%;
    margin-bottom: 8px;
    max-width: 100%;
}
.cl_table .cl-key {
    vertical-align: top;
    text-align: left;
    white-space: nowrap;
    font-weight: normal;
    padding: .4em 1em .4em 0;
    font-weight:bold;
}
.cl_table .cl-value{
    width: 95%;
    padding: .4em 0;
    text-align:left;
}
.textbox-fill-input {
    width:95%;
    padding:2px;
    border-width:1px;
    border-color:#666 #ccc #ccc #666

}
.cl-example {
    FONT-SIZE: 12px; PADDING-TOP: 2px;
    font-style:italic
}
.lk {
    WHITE-SPACE: nowrap; COLOR: #112abb; CURSOR: pointer; TEXT-DECORATION: underline;
    float: left;padding-top: 6px;padding-left: 10px;
}

.bubble-table {
    width: 100%; table-layout: fixed;margin-top: 17px;margin-bottom: 4px;
}
.bubble-cell-side {
    WIDTH: 25px;
}
.bubble-mid {
     PADDING-BOTTOM: 0px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; BACKGROUND: #fff;  PADDING-TOP: 0px
}
.cl-button-quickAddBTN{
    float:left;
}
.bubble-closebutton {
    POSITION: absolute; WIDTH: 15px; BACKGROUND: url(css/images/calendar/combined.gif) 0px -50px; HEIGHT: 15px; TOP: 10px; CURSOR: pointer; RIGHT: 10px
}

$.fn.qtip.styles.tipstyle = {
              width:600,
              background: '#FFFFFF',
              color: 'black',
              textAlign: 'center',
              border: {
                  width: 2,
                  radius: 3
              },
              tip: {
                  corner:'bottomMiddle',
                  size:{x:12,y:12}
              },
              name: 'light'
        }

JavaScript

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        dayClick: function(date, allDay, jsEvent, view) {

            var d = $.fullCalendar.formatDate(date, "ddd, MMM d");
            $('.qtip').remove();
            if (typeof $(this).data("qtip") !== "object" && allDay) {
                $(this).qtip({
                    content: {
                        text: '<div id="cl_box"><table class="bubble-table" cellspacing="0" cellpadding="0">' + '<tbody><tr><td class="bubble-cell-side"><div id="tl1" class="bubble-corner">' + '<div class="bubble-sprite bubble-tl"></div></div></td><td class="bubble-cell-main">' + '<div class="bubble-top"></div></td><td class="bubble-cell-side">' + '<div id="tr1" class="bubble-corner"><div class="bubble-sprite bubble-tr"></div></div> </td></tr>' + '<tr><td class="bubble-mid" colspan="3"><div style="overflow: hidden" id="bubbleContent1">' + '<div><div></div><div class="cl_root">' + '<table cellspacing="0" cellpadding="0" class="cl_table">' + '<tbody><tr><th class="cl-key">Time:</th><td class="cl-value"><div id="bbit-cal-buddle-timeshow">' + d + '</div></td></tr>' + '<tr><th class="cl-key">What:</th><td class="cl-value"><div class="textbox-fill-wrapper"><div class="textbox-fill-mid">' + '<input id="bbit-cal-what" class="textbox-fill-input"></div></div><div class="cl-example">e.g., meeting at room 107</div></td>' + '</tr></tbody></table>' + '<input id="bbit-cal-quickAddBTN" value="Create event" type="button" class="cl-button-quickAddBTN">' + '<span id="bbit-cal-editLink" class="lk">Edit details <strong>&gt;&gt;</strong></span>' + '<input type="hidden" id="box-cl" value="' + date + '">' + '</div></div></div></td></tr></tbody></table>' +...