Noctane Noctane - 2 years ago 306
Javascript Question

FullCalendar: Block overlap when event.Title is same

I have a calendar that accepts external events, when you click the calendar an event is created, using

I block (
) the addition of an event if the date is in the past, now I would also like to
when the event being added or dropped matches an event that is already on that specific date. At first I was trying to compare
but I can't find in the
parameters, any functions, or properties that house what is already there. I also looked at setting
to false but that won't work because I want to allow overlap in all cases except when duplicate.

Please see Fiddle for example. In this fiddle you can Add Product A to the same date over and over, if you un-comment the
eventOverlap: false
code then you can't drag product A or product B onto a date that already contains a product. Instead I need it to not allow a Drop/Add only if the date already contains the product you are trying to drop/add. I hope I am making sense.

<select id="productDd">
<option selected="selected">Select Product...</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<div id="calendar">

var todaysDate = moment();

theme: true,
header: {
left: '',
center: 'title',
right: ''
selectable: true,
eventDurationEditable: false,
select: function(start, end, jsEvent) {
if (end < todaysDate) {
//block addition of dates to old calendars
Alert("Sorry product order dates can not be added to days in the past.")
return false;
var title, code, eventData;

if ($('#productDd option:selected').text() == "Select Product...") {
Alert("Please select a product from the drop down in order to add products to the calendar.");

} else {
title = $('#productDd option:selected').text();
code = $('#productDd option:selected').val();

if (title) {
eventData = {
title: title,
start: start,
end: end,
className: title,
productCode: code

$('#calendar').fullCalendar('renderEvent', eventData, true);
//eventOverlap: false,
eventDrop: function(eventData, delta, revertFunc) {
if (moment(eventData._start).format('YYYY-MM-DD') < todaysDate.format('YYYY-MM-DD')) {
//block modification of old dates
eventClick: function (calEvent, jsEvent, view) {
$('#calendar').fullCalendar('removeEvents', calEvent._id);
editable: true,
businessHours: {
start: '7:00',
end: '18:00',
dow: [1, 2, 3, 4, 5]
eventLimit: true

Thanks for looking at this with me.

Answer Source

I was able to figure it out using fullCalendars builtin functions: selectOverlap and eventOverLap

selectOverlap: function (event) {
    if (event.title === $('#productDd option:selected').text()) {
        alert("You may not add a duplicate event.");
        return false;
    return true;
eventOverlap: function(stillEvent, movingEvent) {
    return stillEvent.title !== movingEvent.title;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download