How do I disable drag and drop in fullcalendar

Question

I am using FullCalendar throughout my project and i need to display it in one area of my site where events are not draggable but to remain highlighted in the month view. Any ideas please.

As of 2017 the correct answer is using: 'eventStartEditable: false' — Miquel Canal, Apr 10 '17 at 09:31

score 41 · Answer 1 · answered Oct 26 '11 at 19:03

41

I know this is an old question, but nobody has answered this correctly, so here you go...

$('#example').fullCalendar({
    disableDragging: true
});

answered Oct 26 '11 at 19:03

Scott Greenfield

2,788
2
22
21

5

If you want to disable resizing as well as dragging, then you can set `editable : false` – jasop Aug 27 '13 at 04:57

score 23 · Answer 2 · edited Apr 06 '23 at 03:40

23

DisableDragging is replaced by: eventStartEditable (since version 1.6.3)

edited Apr 06 '23 at 03:40

sideshowbarker

81,827
26
193
197

answered Apr 14 '14 at 15:22

JochemQuery

1,495
2
26
38

I wanted to ask if there is a way to prevent selection dragging in month view-in other words the user must able to select only one monthday – Dimitris Papageorgiou Sep 24 '14 at 09:08
@DimitrisPapageorgiou sorry, I don't know that. I've done 99% of my work with day and week view. – JochemQuery Sep 24 '14 at 12:48
I am just building an appointments web app and I want just to give my users the option of booking an appointments also from monthview...by selecting only one day(as an appointment by definition cannot span more than 1 day)...anyway,thanks for your answer. – Dimitris Papageorgiou Sep 24 '14 at 17:54
3

This is the correct answer as for 2017. More info: https://fullcalendar.io/docs1/event_ui/eventStartEditable/ – Miquel Canal Apr 10 '17 at 09:30

score 18 · Answer 3 · edited Apr 13 '16 at 06:56

18

Check the code below:

set editable false will disable dragging.

$('#calendar').fullCalendar({

editable: false,

});

edited Apr 13 '16 at 06:56

Ronak Chaniyara

5,335
3
24
51

answered Apr 13 '16 at 06:26

Dilpreet singh

181
1
3

theycallmemorty · Answer 4 · 2014-05-05T20:10:53.097

12

You just need to set the disableDragging option to true when initializing your calendar.

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

edited May 05 '14 at 20:10

answered Aug 18 '10 at 19:52

theycallmemorty

12,515
14
51
71

score 7 · Answer 5 · answered Mar 03 '21 at 09:38

Not worked for me: disableDragging: true

The bellow code worked for me so please try:

$('#example').fullCalendar({
    eventStartEditable: false
});

The above code stops dragging of any event date to another date

score 4 · Answer 6 · answered Dec 29 '21 at 11:44

place eventStartEditable: false as shown here:

initialView: 'resourceTimeline',
slotMinWidth:1,
eventDurationEditable: false, // Disable Resize
// disableResizing:false  Currently Not Working

eventStartEditable: false, // disable dreage drop
// disableDragging:false  Currently Not Working
eventTimeFormat: {
  hour: '2-digit',
  minute: '2-digit',
  hour12: true
},

Its Working

for More https://fullcalendar.io/docs/v1/disableResizing https://fullcalendar.io/docs/v1/disableDragging

score 3 · Answer 7 · answered Dec 22 '20 at 05:55

It's late but as per the new update in FULL CALENDAR

The disableDragging is depricated from fullcalendar now.

Here is the list of all Deprecated functions in full calander

So to disable the drag you need to add editable: false in the place where you create the event object.

Something like below.

this.events.push({
    id: meeting.id,
    title: "meeting 1",
    start: meetingStartDate,
    editable: false
});

user5073874 · Answer 8 · 2015-07-02T19:09:11.560

2

$('#calendar').fullCalendar({
    editable: false
});

edited Jul 02 '15 at 19:09

answered Jul 02 '15 at 12:55

user5073874

29
2

score 2 · Answer 9 · answered Mar 14 '17 at 14:17

2

In v2 & v3 there is a new expression for this: eventStartEditable what should be set to false, for disabling drag.

Furthermore if you want to disable the "drop" (e.g.: from other div) you should set droppable to false as well.

answered Mar 14 '17 at 14:17

LakiGeri

2,046
6
30
56

score 2 · Answer 10 · answered Apr 03 '18 at 13:41

To disable event drag/drop conditionally (on a per-event basis) you can use the eventAllow option when initializing the fullcalendar object.

eventAllow: function(dropLocation, draggedEvent) {
  if (draggedEvent.id === '999') {
    return dropLocation.start.isAfter('2016-01-01'); // a boolean
  }
  else {
    return true; // or return false to disallow
  }
}

Reference: https://fullcalendar.io/docs/eventAllow

score 2 · Answer 11 · answered Mar 06 '21 at 06:25

2

For version 5.5.1 you want to use editable property and set it to false. That will make sure events can not be resized or dragged.

answered Mar 06 '21 at 06:25

A Paul

8,113
3
31
61

score 0 · Answer 12 · answered Dec 17 '21 at 18:46

0

it depends on version :

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

answered Dec 17 '21 at 18:46

Pierre Alexandre

219
1
5

score 0 · Answer 13 · answered Apr 06 '23 at 00:52

FullCalendar - Version 6, 2023 (editable: true/false) "Determines whether the events on the calendar can be modified." https://fullcalendar.io/docs/editable

let calendar = new Calendar(calendarEl, {
  plugins: [ interactionPlugin ],
  editable: true
})

------- Global Bundle: -------

var calendar = new FullCalendar.Calendar(calendarEl, {
  // no plugin configuration required!
  editable: true,
})

How do I disable drag and drop in fullcalendar

13 Answers13

Linked