JSFiddle - React, Tailwind, and code Playground
by GustavoR
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="calendar"></div>
JavaScript
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
editable: true,
selectable: true,
selectHelper: true,
allDaySlot: false,//opcional
header: {
left: 'today',
center: 'title',
right: 'prev, next'
},
select: function(start, end) {
},
events:[
{
id: 1,
title: 'Evento 1',
start: '2017-04-18T16:00:00',
end: '2017-04-18T17:30:00'
},
{
id: 2,
title: 'Evento 2',
start: '2017-04-20T10:00:00',
end: '2017-04-20T12:30:00'
},
{
id: 3,
title: 'Evento 3',
start: '2017-04-21T20:00:00',
end: '2017-04-21T21:00:00'
},
]
});