JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://eo14.com/static/fullcalendar/fullcalendar.css">
<script src="http://eo14.com/static/fullcalendar/fullcalendar.js"></script>
<link rel="stylesheet" href="http://eo14.com/static/fullcalendar/fullcalendar.print.css">
<script src="http://eo14.com/static/fullcalendar/moment.js"></script>
<script src="http://eo14.com/static/fullcalendar/jquery.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 () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
selectable: true,
selectConstraint: 'businessHours',
eventConstraint: 'businessHours',
selectHelper: true,
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
businessHours: [{
start: '09:00',
end: '13:00',
dow: [1, 2]
}, {
start: '14:00',
end: '16:00',
dow: [1, 2]
}, {
start: '10:00',
end: '19:00',
dow: [4]
}, {
start: '06:00',
end: '10:30',
dow: [6]
}, {
start: '13:00',
end: '17:00',
dow: [6]
}, {
start: '20:00',
end: '23:00',
dow: [6]
}],
allDaySlot: false,
defaultView: 'agendaWeek',
editable: true,
eventLimit: true
});
});