JSFiddle - React, Tailwind, and code Playground
HTML
<div class="moduletable">
<div class="dp-container" data-id="198">
<div id="dpcalendar_module_198_loading" style="text-align: center; display: none;">
<img src="http://drnky.cz/media/com_dpcalendar/images/site/ajax-loader.gif" alt="loader">
</div>
<div id="dpcalendar_module_198" class="fc fc-ltr">
<table class="fc-header" style="width:100%">
<tbody>
<tr>
<td class="fc-header-left"><span class="fc-button fc-button-prev fc-state-default fc-corner-left" unselectable="on"><span class="fc-text-arrow">‹</span></span><span class="fc-button fc-button-next fc-state-default fc-corner-right" unselectable="on"><span class="fc-text-arrow">›</span></span><span class="fc-header-space"></span>
</td>
<td class="fc-header-center"><span class="fc-header-title"><h2>leden 2015</h2></span>
</td>
<td class="fc-header-right"></td>
</tr>
</tbody>
</table>
<div class="fc-content" style="position: relative;">
<div class="fc-view fc-view-month fc-grid" style="position:relative" unselectable="on">
<div class="fc-event-container" style="position:absolute;z-index:8;top:0;left:0;"><a href="/component/dpcalendar/event/1" class="fc-event fc-event-hori fc-event-start fc-event-end dpcal-module_event_dpcal_198" style="float: left;position: absolute; left: 93px; border-color: rgb(18, 163, 18); width: 23px; top: 146px; background-color: rgb(18, 163, 18);" data-original-title="" title=""><div class="fc-event-inner"><span class="fc-event-title"> </span></div></a><a href="/component/dpcalendar/event/2" class="fc-event fc-event-hori fc-event-start fc-event-end dpcal-module_event_dpcal_198" style="position: absolute; left: 110px; border-color: rgb(204, 0, 0); width: 23px; top: 146px; background-color:...
CSS
/*!
* FullCalendar v1.6.1 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 {
clear: both;
zoom: 1;
/* for IE7, gives accurate coordinates for [un]freezeContentHeight */
display: inline;
}
.fc-view {
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> */
background: white;
}
.fc-state-highlight div...