I'm using Fullcalendar (http://arshaw.com/fullcalendar) in my project. It gets events via json source.
I want to give the user option to copy one event on the calendar to other day - and I'd like to use dragging for that (well, that's the client's requirement).
But dragging seems like moving an event, not copying - is there any way to get the "copy" of an event being dragged (or copy stay in original place), so it looks like a copy operation?
I tried to copy event object in eventDragStart callback, but it didn't work.
although it is not specified on the fullcalender site, it is necessary to assign a value to the "allday" parameter to be able to add new events dynamically. If you set this value to "false", it will not add the event to the AllDay row. If you do "true" it will add to the AllDay row. Show activity on this post.
Detect when the user clicks on dates or times. Give the user the ability to select multiple dates or time slots with their mouse or touch device. Allows a user to highlight multiple days or timeslots by clicking and dragging.
The eventRender callback function can modify element . For example, it can change its appearance via Element's style object. The function can also return a brand new element that will be used for rendering instead. For all-day background events, you must be sure to return a <td> .
Below is my solution that allows the user to hold shift key to copy events. Note that this is actually moving the original event and leaving a copy in the original position.
I started with this reference and created the following:
//Before the fullCalendar object
var copyKey = false;
$(document).keydown(function (e) {
copyKey = e.shiftKey;
}).keyup(function () {
copyKey = false;
});
//then inside the fullCalendar object
eventDragStart: function (event, jsEvent, ui, view) {
if (!copyKey) return;
var eClone = {
title: event.title,
start: event.start,
end: event.end
};
$('#calendar').fullCalendar('renderEvent', eClone);
},
Try this:
eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
// Create an event object and copy at least the start date and the title from event
var eventClone = {
title:event.title,
start: event.start,
end: event.end
};
// Render new event with new event object
$('#calendar').fullCalendar('renderEvent', eventClone);
// Revert the changes in parent event. To move it back to original position
revertFunc();
}
This is just the idea. I haven't tested this code. Please let me know how it works. Thanks
I realise this is an old question however I found it through a search engine so the solution I ended up with could be useful to others.
I took a slightly different approach and used jQuery UI Draggable, the same way external events are set up.
An event is copied when the user drags an event with the ctrl key held down, this leaves the original event in place and creates a new event where the jQuery draggable is dropped.
// used to track whether the user is holding the control key
let ctrlIsPressed = false;
function setEventsCopyable(isCopyable) {
ctrlIsPressed = !ctrlIsPressed;
$("#calendar").fullCalendar("option", "eventStartEditable", !isCopyable);
$(".fc-event").draggable("option", "disabled", !isCopyable);
}
// set events copyable if the user is holding the control key
$(document).keydown(function(e) {
if (e.ctrlKey && !ctrlIsPressed) {
setEventsCopyable(true);
}
});
// if control has been released stop events being copyable
$(document).keyup(function(e) {
if (ctrlIsPressed) {
setEventsCopyable(false);
}
});
$("#calendar").fullCalendar({
defaultView: "basicWeek",
events: [
{
title: "Event 1",
start: moment(),
end: moment().add(1, "d")
},
{
title: "Event 2",
start: moment().add(1, "d"),
end: moment().add(2, "d")
}
],
editable: true,
droppable: true,
eventAfterAllRender(event, element, view) {
// make all events draggable but disable dragging
$(".fc-event").each(function() {
const $event = $(this);
// store data so the calendar knows to render an event upon drop
const event = $event.data("fcSeg").footprint.eventDef;
$event.data("event", event);
// make the event draggable using jQuery UI
$event.draggable({
disabled: true,
helper: "clone",
revert: true,
revertDuration: 0,
zIndex: 999,
stop(event, ui) {
// when dragging of a copied event stops we must set them
// copyable again if the control key is still held down
if (ctrlIsPressed) {
setEventsCopyable(true);
}
}
});
});
}
});
Working Codepen.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With