dropAccept
Provides a way to filter which external elements can be dropped onto the calendar.
String/Function, default: "*"
By default, after setting a calendar’s droppable option to true, the calendar will accept any draggables that are dropped onto the calendar. The dropAccept option makes the calendar more selective about which elements can/can’t be dropped.
The value of dropAccept can be a string CSS selector. It can also be a function that accepts the draggable item as a single argument, and returns true if the element can be dropped onto the calendar.
In the following example, the first draggable (with id "draggable1") can be dropped on the calendar, while the second draggable (with id "draggable2") cannot:
<div id='calendar'></div>
<div id='draggable1' class='cool-event'></div>
<div id='draggable2'></div>
and here is the JavaScript:
import { Calendar } from '@fullcalendar/core';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var draggableEl1 = document.getElementById('draggable1');
var draggableEl2 = document.getElementById('draggable2');
var calendar = new Calendar(calendarEl, {
plugins: [ interactionPlugin, dayGridPlugin ],
droppable: true,
dropAccept: '.cool-event',
drop: function() {
alert('dropped!');
}
});
calendar.render();
new Draggable(draggableEl1);
new Draggable(draggableEl2);
});