FullCalendar: How to stop dragging custom events?

Question

Can anybody tell me how to stop dragging / resizing the events where event.id > 100? Only those events should be non draggable.

Updated with Code Sample:

eventRender: function(event, element) {
    if (event.id > 100) {
        event.disableDragging();
        event.disableResizing();
    }

    element.qtip({
        content: GetEventToolTip(event),
        position: { corner: { tooltip: 'bottomLeft', target: 'topMiddle'} },
        style: {
            border: {
                width: 1,
                radius: 5
            },
            padding: 5,
            textAlign: 'left',
            tip: false,
            name: event.iscustom == 'True' ? 'cream' : 'dark'
        }
    });
}

Thanks.

score 13 · Answer 1 · edited May 26 '11 at 11:06

13

eventRender: function(event, element) {
    if (event.id.indexOf("IDENTIFYING_STRING") == -1) 
    {
        event.editable = false;
    }                       
}

edited May 26 '11 at 11:06

forsvarir

10,749
6
46
77

answered May 26 '11 at 10:41

igar

131
1
2

Very good! I like this. Thanks. I still ended up removing the classes so that you don't get the mouse becoming a pointer and confusing the user. Other than that, the perfect solution. `$(element).find('.fc-resizer').remove(); $(element).removeClass('fc-draggable').removeClass('fc-resizable');` – Andrei Bazanov May 30 '17 at 07:54

score 4 · Accepted Answer · edited Oct 13 '17 at 09:28

Neither disableDragging nor disableResizing are functions defined in fullcalendar as of 1.4.8. I am certain that 2 people in the world haven't tried the first suggestion :) Nevertheless, you'll need to tap into the jQuery UI object itself to disable dragging or resizing at the event level. So (rather than trying to use non-existent functions) try this in your eventRender(event, element) callback:

if (event.id > 100) {

    element.draggable = false;

}

Note that I am simply setting the property on the jQuery element itself as it pertains to UI's draggable behavior.

The same goes for resizable EXCEPT that you will need to remove the div (class = ui-resizable-handle ui-resizable-s) that is appended by fullcalendar by identifying it with a jquery selector and removing it (just be sure to set a unique className per event in yoru events array so you can easily identify it in the DOM). Please kindly petition the fullcalendar developer(s) to add disableDragging and disableResizing properties to the Event object. It takes less than a minute to add support for this to the source.

@Saiful How do I go about disabling only resizable? I've trying adding eventRender: function(event, element) { if (event.title == "typeA") { $('.typeA').resizable = false; } }, with no luck — BaconJuice, Aug 18 '14 at 20:34
In fullcalendar v2, property `editable` should be used instead of `draggable` — akn, Mar 18 '15 at 10:12

score 3 · Answer 3 · answered Nov 24 '14 at 08:59

3

This is the best solution:

$('#calendar').fullCalendar({
    disableDragging = true
});

answered Nov 24 '14 at 08:59

Ataboy Josef

2,087
3
22
27

score 3 · Answer 4 · answered Jan 15 '11 at 01:17

3

This worked perfect for me :

if ( event.id > 100 ) {
  element.draggable = false;
  element.resizable = false;
}

answered Jan 15 '11 at 01:17

Asclepios

31
1

score 2 · Answer 5 · answered Oct 17 '15 at 19:46

FullCalendar v1.6.4

eventRender: function(jsEvent, element) {

 if(jsEvent.id > 100) {

    jsEvent.startEditable    = false;
    jsEvent.durationEditable = false;
  }

  return element;             
}

This solution has been working for me like a charm.

I've implemented this JS library with Ruby Gem "Fullcalendar_engine".

score 2 · Answer 6 · answered Oct 22 '10 at 22:36

2

i would say:

if(event.id > 100)
{
   event.disableDragging();
   event.disableResizing();
}

answered Oct 22 '10 at 22:36

Dalen

8,856
4
47
52

1

+1: And, probably the best place to put this would be in the eventRender callback: http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/ – Sam Dolan Oct 22 '10 at 22:42
It's not working, both method says: Error: Object doesn't support this property or method – Saiful Oct 25 '10 at 13:23

Arpad · Answer 7 · 2013-06-06T19:38:03.290

You have to hack fullcalendar.js

uncomment lines

t.isEventDraggable = isEventDraggable;
t.isEventResizable = isEventResizable;

replace functions:

function isEventDraggable(event) {
         return isEventEditable(event) && !opt('disableDragging') &&
            !event.disableDragging;
}


function isEventResizable(event) { // but also need to make sure the seg.isEnd == true
         return isEventEditable(event) && !opt('disableResizing') &&
            !event.disableResizing; 
}

Now you can enable/disable resize and dragging for every event as you like.

score 0 · Answer 8 · edited Oct 13 '17 at 10:35

I did not have success with the methods shown here. I ended up hacking fullcalendar.js to add a noDragging option for events, which was actually extremely easy:

original:

function isEventDraggable(event) {
    return isEventEditable(event) && !opt('disableDragging');
}

changed it to:

function isEventDraggable(event) {
    return isEventEditable(event) && !opt('disableDragging') && !event.noDragging;
}

Just added the check for event.noDragging.

Kasper Skov · Answer 9 · 2014-10-29T09:56:02.840

0

Neither element.draggable = false and event.ediable = false worked for me. It must be because of the newer version of FullCalendar. If that's your case as well, try:

if ( event.id > 100 ) {
    event.startEditable = false;
}

Worked for me.

Alternatively you could cancel the move event after dropping:

eventDrop: function (event, delta, revertFunc) {

            if (event.id < 100) 
                revertFunc();
        }

edited Oct 29 '14 at 09:56

answered Oct 29 '14 at 09:47

Kasper Skov

1,954
10
32
53

revertFunc is not a function – Chaibi Alaa Dec 23 '15 at 21:58

score 0 · Answer 10 · answered Dec 05 '16 at 13:43

0

in editable just write false and it wont be able to drag and drop editable: false

answered Dec 05 '16 at 13:43

Tarang Rathod

86
9

1

Please consider editing your answer to include more explanation that might help OP and anyone who might have the same problem in future – CallumDA Dec 05 '16 at 13:58

score -2 · Answer 11 · answered Jan 30 '14 at 07:29

-2

Use these tags when creating your fullcalendar to disable dragging or resizing.

**>  $('#calendar').fullCalendar({
> 
>    editable: false,
> 
> //the rest of your code... }**

answered Jan 30 '14 at 07:29

Ram Kosal

1
3

This is for global disable, not for id > 100 – BaconJuice Aug 18 '14 at 20:17

score -4 · Answer 12 · answered Sep 06 '11 at 13:47

Use these tags when creating your fullcalendar to disable dragging or resizing. The arshaw docs aren't very explanatory but this is how to interpret them.

 $('#calendar').fullCalendar({
    disableResizing:true,
    disableDragging:true,

    //the rest of your code...

disableDragging: Boolean, Default: false Disables all event dragging, even when events are editable.

disableResizing: Boolean, Default: false Disables all event resizing, even when events are editable.

FullCalendar: How to stop dragging custom events?

12 Answers12

Linked