JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.2/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://arshaw.com/css/fullcalendar.css">
<div id="calendar" class="fc fc-ltr">
    
</div>

CSS

/*!
 * FullCalendar v2.0.2 Stylesheet
 * Docs & License: http://arshaw.com/fullcalendar/
 * (c) 2013 Adam Shaw
 */


.fc {
	direction: ltr;
	text-align: left;
	}
	
.fc table {
	border-collapse: collapse;
	border-spacing: 0;
	}
	
html .fc,
.fc table {
	font-size: 1em;
	}
	
.fc td,
.fc th {
	padding: 0;
	vertical-align: top;
	}



/* Header
------------------------------------------------------------------------*/

.fc-header td {
	white-space: nowrap;
	}

.fc-header-left {
	width: 25%;
	text-align: left;
	}
	
.fc-header-center {
	text-align: center;
	}
	
.fc-header-right {
	width: 25%;
	text-align: right;
	}
	
.fc-header-title {
	display: inline-block;
	vertical-align: top;
	}
	
.fc-header-title h2 {
	margin-top: 0;
	white-space: nowrap;
	}
	
.fc .fc-header-space {
	padding-left: 10px;
	}
	
.fc-header .fc-button {
	margin-bottom: 1em;
	vertical-align: top;
	}
	
/* buttons edges butting together */

.fc-header .fc-button {
	margin-right: -1px;
	}
	
.fc-header .fc-corner-right,  /* non-theme */
.fc-header .ui-corner-right { /* theme */
	margin-right: 0; /* back to normal */
	}
	
/* button layering (for border precedence) */
	
.fc-header .fc-state-hover,
.fc-header .ui-state-hover {
	z-index: 2;
	}
	
.fc-header .fc-state-down {
	z-index: 3;
	}

.fc-header .fc-state-active,
.fc-header .ui-state-active {
	z-index: 4;
	}
	
	
	
/* Content
------------------------------------------------------------------------*/
	
.fc-content {
	position: relative;
	z-index: 1; /* scopes all other z-index's to be inside this container */
	clear: both;
	zoom: 1; /* for IE7, gives accurate coordinates for [un]freezeContentHeight */
	}
	
.fc-view {
	position: relative;
	width: 100%;
	overflow: hidden;
	}
	
	

/* Cell Styles
------------------------------------------------------------------------*/

.fc-widget-header,    /* <th>, usually */
.fc-widget-content {  /* <td>, usually */
	border: 1px solid #ddd;
	}
	
.fc-state-highlight { /* <td> today cell */ /* TODO: add .fc-today to <th>...

JavaScript

$(document).ready(function() {
    $(document).bind("date-selected", function(e, data) {
       alert(data.StartDate); 
        $(document).trigger("add-button", {EventData: data, SourceEvent: data.SourceEvent});
    });
    $(document).bind("add-button", function(e, data) {
        alert($(data.SourceEvent.currentTarget));
       var cell = $(data.EventData.SourceEvent.target);
        cell.find(".dynamic-button").remove();
        cell.append("<input type=\"button\" name=\"button\" value=\"Button\" class=\"dynamic-button\" />");
    });
    $(document).on("click", ".dynamic-button", function(e) {
       alert("Button on event clicked."); 
    });
     $("#calendar").fullCalendar({
       select: function(start, end, jsEvent, view){
           var target = $(jsEvent.target);
           if(target.attr("class").indexOf("dynamic-button") > -1) {
               //Do nothing because the button was clicked
           } else {
               $(document).trigger("date-selected", {StartDate: start, SourceEvent: jsEvent});
           }
       }, 
         selectable: true
     });
});