JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<body>
<div id="calendar"></div>
</body>
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;
}
JavaScript
$(document).ready(function () {
$("<link rel='stylesheet' type='text/css' href='http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.css' />").appendTo("head");
var Events = Backbone.Collection.extend({});
var EventsView = Backbone.View.extend({
el: document.getElementById("content"),
render: function () {
var self = this;
var events = JSON.parse(localStorage.getItem('events'));
var events = new Events(events);
var jsevents = events.toJSON();
self.$el.fullCalendar({
agenda: 'h:mm{ - h:mm}',
'': 'h(:mm)t',
aspectRatio: 1.5,
droppable: true,
weekend: true,
editable: true,
eventStartEditable: true,
eventDurationEditable: true,
dragScroll: true,
eventDrop: function (event) {
console.log(event);
},
defaultView: 'month',
firstDay: 1,
handleWindowResize: true,
allDayDefault: false,
firstHour: 7,
columnFormat: {
month: 'dddd',
week: 'ddd, dS',
day: 'dddd, MMM dS'
},
header: {
right: 'prev,next',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
...