SO: FC: events < a day

Avoids events on multiple days

by Sylvain

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.css">
<div id='calendar'></div>

CSS

body {
    margin-top: 40px;
    text-align: center;
    font-size: 13px;
    font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}
#calendar {
    width: 900px;
    margin: 0 auto;
}

JavaScript

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$('#calendar').fullCalendar({

    selectable: true,
    selectHelper: true,
    editable: true,
    defaultView: 'agendaWeek',

    select: function (start, end) {
        var mEnd = $.fullCalendar.moment(end);
        var mStart = $.fullCalendar.moment(start);

        if (mEnd.isAfter(mStart, 'day')) {
            $('#calendar').fullCalendar('unselect');
        } else {
            $('#calendar').fullCalendar('renderEvent', {
                start: mStart,
                end: mEnd,
                allDay: false
            },
            true // stick the event
            );
            $('#calendar').fullCalendar('unselect');
        }
    }
});