This topic is locked

How to prevent dragging events?

6/7/2024 7:58:43 AM
Calendar Template general questions
L
Luc Mombaerts author

Dear all,

In my calendar, users are set to be able to see all other users events but alter their own events only. When clicking events this goes fine. A user clicking own events gets the buttons 'Edit' and 'Delete' in the view event popup window. And does not get those two buttons when clicking other users events. So that's fine.

But all users can grab and drag all events of all users! Hence it is possible for a user to change an event of another user! Date change by dragging the event in month view, time change by dragging the event in day view.
Does anyone know how to prevent this dragging please? How to make it impossible?
A user should be able to drag own events only. Except the admin.
Thank you so much!

Best regards,
Luc

C
Chris Whitehead 6/8/2024

I'm guessing the calendar template might be using full calendar, if it is then you could try one of the following, I don't know the specific command for the version in the calendar template as they appear to vary.

If you find where the calendar is initialised and try one of the following.

$('#calendar').fullCalendar({
disableDragging: true,
editable: false,
eventStartEditable: false,
});

That will stop all events from dragging, if you want to stop certain events from been dragged then you could try "eventDragStart" .

eventDragStart: function( event, jsEvent, ui, view ) {
// check if the event is the same user as the one logged in
if (bFlag) {
return false; // this would disable the event to be dragged
}
}

L
Luc Mombaerts author 6/14/2024

Dear Chris,

Thank you for your suggestion.

The calendar template is indeed using full calendar.
Since I'm not really trusted with coding, I'm not sure where the calendar is initialised.

There is a file fullcalendar.js where I see many options are set.
I think that's the file I should add the lines to.
I've added the 3 lines you suggested:
disableDragging: true,
editable: false,
eventStartEditable: false,

This however has no effect. It is still possible to drag events.

Best regards,
Luc

C
Chris Whitehead 6/14/2024

@luc_mombaerts The command does seem to change depending on the version, hopefullly admin may be able to point to the version used in the template.

@admin Which version of fullcalendar is used in the calendar template?

L
Luc Mombaerts author 6/17/2024

Dear Chris,

I found "FullCalendar v2.2.7" in the header of the fullcalender.js file.

Best regards,
Luc

C
Chris Whitehead 6/23/2024

@Luc Mombaerts

From what I can see for that version, you can set editable in the event or global. The docs are here, V3 and V2 are the same commands.
https://fullcalendar.io/docs/v3/editable

// You''ll need to find out where the calendar is initialised and put the "editable: false," in there as a parameter. setting to false at this point will disable all events from been dragged.
$('#calendar').fullCalendar({
editable: false,
});

// to disable spcific events from getting dragged, don't use the global "editable", you'll need the "editable: false" or "editable: true" in the event. you'll have to do this when the events are first loaded into the calendar.
this.events.push({
id: meeting.id,
title: "meeting 1",
start: meetingStartDate,
editable: false
});

Here's an example in codepen.
https://codepen.io/crest-altmedia/pen/QWRrdpv

I hope this helps, I can't tell you where to put this code as I don't have the calendar template so I'm not sure how it populates the calendar.

L
Luc Mombaerts author 7/1/2024

Dear Chris,

I've been looking and searching in the template files.
But I could not find where the calendar is initialised.

There is one file where I found the text "$('#calendar').fullCalendar({".
So I thought that would be the correct file and location to add the lines.
But adding them has no effect however. Still possible to drag events.

Thank you for the suggestions you did.
I will contact support. Let's hope they can resolve.

Best regards,
Luc