 <p>Everytime a user selects a timerange, it creates a kind of <a href="http://fullcalendar.io/docs/selection/selectHelper/" rel="nofollow">placeholder</a> event for visual feedback to the user. This isn't actually an event yet, and it is removed when the user makes another selection.</p> <p>What you need to do, is add an actual event whenever a selection is made.</p> <p>Use the <a href="http://fullcalendar.io/docs/selection/select_callback/" rel="nofollow">select callback</a>.</p> <p>It's triggered every time the user selects (clicks and drags) a time slot. In it, call <a href="http://fullcalendar.io/docs/event_data/addEventSource/" rel="nofollow">addEventSource</a> to add it to the calendar as an actual event. And then call <a href="http://fullcalendar.io/docs/selection/unselect_callback/" rel="nofollow">unselect</a> to manually remove the placeholder.</p> <pre><code>select: function (start, end, jsEvent, view) { $("#calendar").fullCalendar('addEventSource', [{ start: start, end: end, }, ]); $("#calendar").fullCalendar("unselect"); } </code></pre> <p><a href="http://fiddle.jshell.net/slicedtoad/qp6Lxshp/3/" rel="nofollow">JSFiddle</a></p>