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.

Answer 1

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();
        }

Answer 2

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".

Answer 3

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.

Answer 4

This worked perfect for me :

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

Answer 5

i would say:

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

Answer 6

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.