Skip to content

Instantly share code, notes, and snippets.

@zvictor
Created April 28, 2015 09:47
Show Gist options
  • Save zvictor/6c1f89751f765b82a86b to your computer and use it in GitHub Desktop.
Save zvictor/6c1f89751f765b82a86b to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.css' rel='stylesheet' />
<link href='http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.js'></script>
<!-- the code from the JavaScript tab will go here -->
<!-- the code from the CSS tab will go here -->
<style id="jsbin-css">
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
<script id="jsbin-javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-04-22',
defaultView: 'agendaDay',
editable: true,
events: [{
"title": "A",
"allDay": false,
"start": "2015-04-22 10:00:00",
"end": "2015-04-22 13:00:00"
}, {
"title": "B",
"allDay": false,
"start": "2015-04-22 13:00:00",
"end": "2015-04-22 13:30:00"
}, {
"title": "C",
"allDay": false,
"start": "2015-04-22 10:00:00",
"end": "2015-04-22 12:00:00"
}, {
"title": "D",
"allDay": false,
"start": "2015-04-22 17:00:00",
"end": "2015-04-22 19:00:00"
}, {
"title": "E",
"allDay": false,
"start": "2015-04-22 10:00:00",
"end": "2015-04-22 14:00:00"
}, {
"title": "F",
"allDay": false,
"start": "2015-04-22 14:00:00",
"end": "2015-04-22 16:00:00"
}, {
"title": "G",
"allDay": false,
"start": "2015-04-22 17:00:00",
"end": "2015-04-22 18:00:00"
}, {
"title": "H",
"allDay": false,
"start": "2015-04-22 17:00:00",
"end": "2015-04-22 18:00:00"
}, {
"title": "I",
"allDay": false,
"start": "2015-04-22 15:00:00",
"end": "2015-04-22 18:00:00"
}, {
"title": "J",
"allDay": false,
"start": "2015-04-22 10:00:00",
"end": "2015-04-22 16:00:00"
}, {
"title": "K",
"allDay": false,
"start": "2015-04-22 17:00:00",
"end": "2015-04-22 20:00:00"
}, {
"title": "L",
"allDay": false,
"start": "2015-04-22 12:00:00",
"end": "2015-04-22 15:00:00"
}]
});
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.css' rel='stylesheet' />
<link href='http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'><\/script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'><\/script>
<script src='http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.js'><\/script>
<\!-- the code from the JavaScript tab will go here -->
<\!-- the code from the CSS tab will go here -->
</head>
<body>
<div id='calendar'></div>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-04-22',
defaultView: 'agendaDay',
editable: true,
events: [{
"title": "A",
"allDay": false,
"start": "2015-04-22 10:00:00",
"end": "2015-04-22 13:00:00"
}, {
"title": "B",
"allDay": false,
"start": "2015-04-22 13:00:00",
"end": "2015-04-22 13:30:00"
}, {
"title": "C",
"allDay": false,
"start": "2015-04-22 10:00:00",
"end": "2015-04-22 12:00:00"
}, {
"title": "D",
"allDay": false,
"start": "2015-04-22 17:00:00",
"end": "2015-04-22 19:00:00"
}, {
"title": "E",
"allDay": false,
"start": "2015-04-22 10:00:00",
"end": "2015-04-22 14:00:00"
}, {
"title": "F",
"allDay": false,
"start": "2015-04-22 14:00:00",
"end": "2015-04-22 16:00:00"
}, {
"title": "G",
"allDay": false,
"start": "2015-04-22 17:00:00",
"end": "2015-04-22 18:00:00"
}, {
"title": "H",
"allDay": false,
"start": "2015-04-22 17:00:00",
"end": "2015-04-22 18:00:00"
}, {
"title": "I",
"allDay": false,
"start": "2015-04-22 15:00:00",
"end": "2015-04-22 18:00:00"
}, {
"title": "J",
"allDay": false,
"start": "2015-04-22 10:00:00",
"end": "2015-04-22 16:00:00"
}, {
"title": "K",
"allDay": false,
"start": "2015-04-22 17:00:00",
"end": "2015-04-22 20:00:00"
}, {
"title": "L",
"allDay": false,
"start": "2015-04-22 12:00:00",
"end": "2015-04-22 15:00:00"
}]
});
});</script></body>
</html>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-04-22',
defaultView: 'agendaDay',
editable: true,
events: [{
"title": "A",
"allDay": false,
"start": "2015-04-22 10:00:00",
"end": "2015-04-22 13:00:00"
}, {
"title": "B",
"allDay": false,
"start": "2015-04-22 13:00:00",
"end": "2015-04-22 13:30:00"
}, {
"title": "C",
"allDay": false,
"start": "2015-04-22 10:00:00",
"end": "2015-04-22 12:00:00"
}, {
"title": "D",
"allDay": false,
"start": "2015-04-22 17:00:00",
"end": "2015-04-22 19:00:00"
}, {
"title": "E",
"allDay": false,
"start": "2015-04-22 10:00:00",
"end": "2015-04-22 14:00:00"
}, {
"title": "F",
"allDay": false,
"start": "2015-04-22 14:00:00",
"end": "2015-04-22 16:00:00"
}, {
"title": "G",
"allDay": false,
"start": "2015-04-22 17:00:00",
"end": "2015-04-22 18:00:00"
}, {
"title": "H",
"allDay": false,
"start": "2015-04-22 17:00:00",
"end": "2015-04-22 18:00:00"
}, {
"title": "I",
"allDay": false,
"start": "2015-04-22 15:00:00",
"end": "2015-04-22 18:00:00"
}, {
"title": "J",
"allDay": false,
"start": "2015-04-22 10:00:00",
"end": "2015-04-22 16:00:00"
}, {
"title": "K",
"allDay": false,
"start": "2015-04-22 17:00:00",
"end": "2015-04-22 20:00:00"
}, {
"title": "L",
"allDay": false,
"start": "2015-04-22 12:00:00",
"end": "2015-04-22 15:00:00"
}]
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment