JSFiddle - React, Tailwind, and code Playground
by yamidvo
HTML
<script src="http://arshaw.com/js/fullcalendar-1.6.0/jquery/jquery-ui-1.10.2.custom.min.js"></script>
<script src="http://arshaw.com/js/fullcalendar-1.6.0/fullcalendar/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.6.0/fullcalendar/fullcalendar.css">
<div id='calendar' style='margin:3em 0;font-size:13px'></div>
CSS
/* support
---------------------------------------------------------*/
.support-section {
margin: 2.2em 0 3.2em;
}
.support-section h2 {
margin-bottom: .7em;
}
.support-section form {
display: inline;
}
.support-section input {
vertical-align: middle;
margin: 0;
padding: 5px 5px 0;
height: 20px;
border: 1px solid #D8DCDF;
border-right: 0;
}
.support-section input.hint {
color: #666;
}
.support-section button {
vertical-align: middle;
margin: 0;
padding: 0 5px;
height: 27px;
cursor: pointer;
}
.support-section form button { /* search buttons */
padding: 0 3px;
}
.support-section .or {
margin: 0 5px;
}
.support-section .requires-account {
color: #666;
font-size: 10px;
margin-left: 5px;
}
.support-section ul {
margin: 1em 0;
padding: 0 0 0 2em;
}
.support-section li {
margin: .4em 0;
}
/* source
-----------------------------------------------------*/
#github-reasons li {
margin: 1em 0;
}
/**************************************** DOCS **********************************************/
/* global styles
-----------------------------------------------------*/
#fc-docs {
font-size: 14px;
}
#fc-docs a {
color: #000;
}
#fc-docs table {
border-collapse: collapse;
border-spacing: 0;
}
#fc-docs td {
padding: 0;
vertical-align: top;
}
#fc-docs h1 {
font-size: 22px;
}
#fc-docs h2 {
font-size: 18px;
}
/* global toc & list icons
------------------------------------------------------*/
#fc-docs ul.toc ul a,
#fc-docs-index ul.toc a,
#fc-docs dl.toc a {
padding: 0 0 0 26px;
background: url(../images/gear-small.png) no-repeat 0 50%;
font-weight: normal;
}
#fc-docs .toc .article a {
background-image: url(../images/information-small-white.png);
}
#fc-docs .toc .callback a {
background-image: url(../images/exclamation-small.png);
}
#fc-docs .toc .method a,
#fc-docs .toc .function a {
background-image: url(../images/wand-small.png);
}
#fc-docs .toc em {
color:...
JavaScript
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,
events: [
{
"title":"Hello EST",
"start":"Wed, 28 Jun 2013 09:00:00 EST",
"end":"Wed, 28 Jun 2013 10:00:00 EST",
"allDay":false
},
{
"title":"Hello IST",
"start":"Wed, 03 Jun 2013 13:00:00 IST",
"end":"Wed, 03 Jun 2013 17:00:00 IST"
},
]
});