javascript - 完整日历 v3 特定事件禁用拖动

问题描述

如果预订事件改变颜色并且您无法拖动它，我正在尝试这样做，我在 Google 中一无所获，我决定写信给 Stack 支持。坚持这项任务感谢您的帮助和支持。我使用（v3 完整日历）

颜色改变它的okey，但可以拖动，

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

                }

标签： javascriptjqueryfullcalendarfullcalendar-3

正如您似乎已经意识到的那样，如果您将事件的editable属性设置为false，它将阻止它被拖动。

文档：

但是问题是您在eventRender回调期间设置了该字段。那时为时已晚，因为 fullCalendar 已经从事件的属性中创建了事件的 HTML。在此之后，它不再从他们那里读取。eventRender只是您对 HTML 进行进一步更改的机会。您对事件属性所做的任何更改都将被忽略。

因此，您需要在此过程的早期进行此更改。我想你可能有几个选择：

如果您在服务器端代码中生成这些事件（例如，可能来自数据库中的列表），那么您可以editable在将数据转换为 JSON 并将其返回给 fullCalendar 之前设置属性。
如果由于任何原因无法做到这一点，那么 fullCalendar 会提供回调，允许您在将事件呈现为 HTML之前eventDataTransform修改事件的属性。例如：

eventDataTransform: function(event) {
  if (event.status == 'reserved') {
    event.editable = false;
  }
  return event;
}

文档：https ://fullcalendar.io/docs/v3/eventDataTransform

javascript - 完整日历 v3 特定事件禁用拖动

问题描述

解决方案

推荐阅读