JSFiddle - React, Tailwind, and code Playground
by V1tOr
HTML
<div id='calendar'></div>
CSS
.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;
}
.fc-header td {
white-space: nowrap;
}
.fc-header-left {
text-align: left;
width: 25%;
}
.fc-header-center {
text-align: center;
}
.fc-header-right {
text-align: right;
width: 25%;
}
.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;
}
.fc-header .fc-button {
margin-right: -1px;
}
.fc-header .fc-corner-right {
margin-right: 1px;
}
.fc-header .ui-corner-right {
margin-right: 0;
}
.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;
}
.fc-content {
clear: both;
}
.fc-view {
overflow: hidden;
width: 100%;
}
.fc-widget-header, .fc-widget-content {
border: 1px solid #CCCCCC;
}
.fc-state-highlight {
background: none repeat scroll 0 0 #FFFFCC;
}
.fc-cell-overlay {
background: none repeat scroll 0 0 #99CCFF;
opacity: 0.2;
}
.fc-button {
cursor: pointer;
display: inline-block;
position: relative;
}
.fc-state-default {
border-style: solid;
border-width: 1px 0;
}
.fc-button-inner {
float: left;
overflow: hidden;
position: relative;
}
.fc-state-default .fc-button-inner {
border-style: solid;
border-width: 0 1px;
}
.fc-button-content {
float: left;
height: 1.9em;
line-height: 1.9em;
padding: 0 0.6em;
position: relative;
white-space: nowrap;
}
.fc-button-content .fc-icon-wrap {
float: left;
position: relative;
top: 50%;
}
.fc-button-content .ui-icon {
float: left;
...
JavaScript
/**
* @preserve
* FullCalendar v1.5.3
* http://arshaw.com/fullcalendar/
*
* Use fullcalendar.css for basic styling.
* For event drag & drop, requires jQuery UI draggable.
* For event resizing, requires jQuery UI resizable.
*
* Copyright (c) 2011 Adam Shaw
* Dual licensed under the MIT and GPL licenses, located in
* MIT-LICENSE.txt and GPL-LICENSE.txt respectively.
*
* Date: Mon Feb 6 22:40:40 2012 -0800
*
*/
(function($, undefined) {
var defaults = {
// display
defaultView: 'month',
aspectRatio: 1.35,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
weekends: true,
// editing
//editable: false,
//disableDragging: false,
//disableResizing: false,
allDayDefault: true,
ignoreTimezone: true,
// event ajax
lazyFetching: true,
startParam: 'start',
endParam: 'end',
// time formats
titleFormat: {
month: 'MMMM yyyy',
week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
day: 'dddd, MMM d, yyyy'
},
columnFormat: {
month: 'ddd',
week: 'ddd M/d',
day: 'dddd M/d'
},
timeFormat: { // for event elements
'': 'h(:mm)t' // default
},
// locale
isRTL: false,
firstDay: 0,
monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'],
monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
dayNames: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
dayNamesShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
buttonText: {
prev: ' ◄ ',
next: ' ► ',
prevYear: ' << ',
nextYear: ' >> ',
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
// jquery-ui theming
theme:...