JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js"></script>
<script src="https://rawgit.com/mherrmann/fullcalendar-columns/6c15958e837f03e638e8c098e4c0638bf453203c/fullcalendar-columns.js"></script>
<div id="calendar"></div>
JavaScript
var NUM_COLUMNS = 2;
$("#calendar").fullCalendar({
defaultView: 'multiColAgendaWeek',
views: {
multiColAgendaDay: {
type: 'multiColAgenda',
duration: { days: 1 },
numColumns: NUM_COLUMNS,
},
multiColAgendaWeek: {
type: 'multiColAgenda',
duration: { weeks: 1 },
numColumns: NUM_COLUMNS,
}
},
events: [{
title: 'Drag me to the other side',
start: moment(),
end: moment().add(1, 'hour'),
column: 0,
editable: true
}],
eventDrop: function(event) {
alert('Event was dragged to column ' + event.column);
},
scrollTime: moment(),
allDaySlot: false,
header: {
left: 'multiColAgendaDay,multiColAgendaWeek',
center: 'title',
right: 'today prev,next'
}
});