My goal is to incorporate CTRL + Drag & Drop functionality in FullCalendar v5 using nothing but pure JavaScript.
I delved into the topic and discovered that this feature has been discussed as a new UI feature request on the FC GitHub repository. There have been a few suggestions on how to achieve this, some of them even effective.
arshaw mentioned on Aug 19, 2015
To implement this feature, you can utilize eventDrop. The jsEvent contains a ctrlKey property that you can use for testing purposes. Copy the event parameter to a new variable, use revertFunc to revert back and then apply renderEvent with the newly created variable.
chris-verclytte commented on Apr 11, 2016 did not provide a solution that worked for me
If it can help, here is a workaround I've been using while waiting for the integration of this new feature.
In the eventDrop callback:
// If alt key is not pressed, move the event; Otherwise duplicate it
if (!jsEvent.altKey) {
// Handle drag'n'drop copy
} else {
// Handle drag'n'drop duplication
// Add the event to the event source
_addEventToSelectedSource(event.start, event.end);
// Prevent default behavior by using revertFunc to avoid moving the event
revertFunc();
}
The only issue with this is that the copied event disappears during drag'n'drop due to a certain function in the underlying FullCalendar codebase
The solution I personally prefer is by AllyMurray shared on Jul 13, 2018
For those facing this problem, I have developed a solution that should serve as a good starting point. It follows a similar approach to external events and does not disturb the original event.
Links for reference:
https://stackoverflow.com/a/51327702/3891834
https://codepen.io/ally-murray/full/JBdaBV/
However, I am unsure on how to implement this solution using solely pure JavaScript.
Can anyone assist? I am looking for the copy functionality to work such that pressing CTRL duplicates the event while keeping the original event in its original position.