Noctane Noctane - 6 months ago 124
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

eventDrop
I block (
revertFunc()
) the addition of an event if the date is in the past, now I would also like to
revertFunc()
when the event being added or dropped matches an event that is already on that specific date. At first I was trying to compare
event.Title
but I can't find in the
eventDrop
parameters, any functions, or properties that house what is already there. I also looked at setting
overlap
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>
</select>
<div id="calendar">
</div>


var todaysDate = moment();

$('#calendar').fullCalendar({
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...") {
$('body').scrollTop(0);
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);
}
$('#calendar').fullCalendar('unselect');
},
//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
revertFunc();
}
},
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

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;
},

See FIDDLE

Comments