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

Question

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

颜色改好了，但是可以拖动，

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

                }

Answer 1

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

文档：

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

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

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

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

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

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

Full calendar v3 Specific event disable dragging

javascript

jquery

fullcalendar

fullcalendar-3