I'm trying to do if the event of reservations changes color and you can't drag it, I looked in Google for nothing, I decided to write to Stack support. Stuck on this task thanks for any help and support. Im use (v3 full calendar)
Color changes its okey, but can dragging,
// Event render
eventRender: function(event, element) {
if (event.status == 'reserved') {
// Here im try disable dragging
event.editable = false;
element.css({
'background': 'lemonchiffon',
});
}else if(event.status == 'available'){
element.css({
'background': 'lightgreen',
});
}
if(event.gap_beetween_slot === '0'){
$(element).find('.fc-resizer').remove();
}
$(element).find('.fc-title').html(event.title);
}
As you seem to have realised already, if you set an event's editable property to false, it will prevent it from being dragged.
Documentation:
However the problem is that you're setting the field during the eventRender callback. At that moment it's too late, because fullCalendar has already created the HTML of the event from the event's properties. It does not read from them any more after this point. eventRender is simply your chance to make further changes to the HTML. Any changes you make to the event's properties are ignored.
Therefore you need to make this change earlier in the process. I think you probably have a couple of options:
If you're generating these events in your server-side code (e.g. from a list in a database, perhaps) then you could set the editable property before you transform the data to JSON and return it to fullCalendar.
If that isn't possible for any reason, then fullCalendar offers the eventDataTransform callback which allows you to modify an event's properties before it is rendered to HTML. For example:
eventDataTransform: function(event) {
if (event.status == 'reserved') {
event.editable = false;
}
return event;
}
Documentation: https://fullcalendar.io/docs/v3/eventDataTransform