Full calendar v3 Specific event disable dragging

user_12651989 0
Viewed 135

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

                }
fullcalendar-3 fullcalendar jquery javascript
1 Answers

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:

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

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

user_59470430
Related