JSFiddle - React, Tailwind, and code Playground
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>
<div id='calendar'>
</div>
CSS
.fc-day-grid-event .fc-content {
white-space: normal !important;
}
JavaScript
/* Fiddle specs: fullcalendar v2.4.0, moment v2.10.6, jQuery v2.1.4 */
/* If chop is true, it cuts out Saturday, Sunday */
var events = [{
start: '2016-02-01',
end: '2016-03-01',
title: 'This is the whole month long, no weekends!',
id: 'month-long-no-weekends',
chop: true
}, {
start: '2016-02-01',
end: '2016-03-01',
title: 'This is the whole month long, including weekends!',
id: 'month-long-weekends',
chop: false
}, {
start: '2016-02-07',
end: '2016-02-16',
title: 'Starts Sunday ends Tuesday the week after (no weekends)',
id: 'start-sun-no-weekends',
chop: true
}, {
start: '2016-02-07',
end: '2016-02-16',
title: 'Starts Sunday ends Tuesday the week after (has weekends)',
id: 'start-sun-weekends',
chop: false
}];
$('#calendar').fullCalendar({
defaultDate: '2016-02-01',
events: chopEvents(events),
eventClick: function(event, jsEvent, view) {
alert(event.id);
},
eventRender: function(event, element, view) {
console.log(event);
if (event.chop)
element.css('background-color', 'green');
}
});
function chopEvents(events) {
var chopped = [];
$(events).each(function() {
var event = this;
if (this.chop) {
var segments = makeChunks(this);
$(segments).each(function(index, dates) {
var start = dates.shift();
var end = dates.pop();
event.start = start;
event.end = end;
chopped.push($.extend({}, event));
});
} else {
chopped.push(event);
}
});
return chopped;
}
function makeChunks(event) {
var seg = 0;
var segments = [];
var start = moment(event.start);
var end = moment(event.end); //.add(1, 'day'); /* May want to add 1 day? */
for (var day = moment(start); day <= end; day = day.add(1, 'day')) {
var dayOfWeek = day.format('E');
if (dayOfWeek == 7) {
segments[++seg] = [];
continue;
}
if (segments[seg] === undefined) {
segments[seg] = [];
}
...