【问题标题】:Fullcalendar drag and drop allday全天拖放
【发布时间】:2012-07-07 06:19:23
【问题描述】:

我有一个包含正常事件和全天事件的完整日历。

我想禁止 allDay-events 被拖入议程视图中的正常事件中。

全天事件从一开始就设置了开始时间和结束时间,所以我无法检查结束时间是否为空。

也许 eventDrop 函数中有一种方法可以阻止它?

【问题讨论】:

  • 你能把它放在一个 jsfiddle 中或发布一些代码吗?我想看看你的事件数据是如何格式化的。
  • jsfiddle.net/wkKfB/24 移至周视图,您可以将每日事件从顶部拖到议程视图中。这应该是不可能的。忽略 onExternalEventDrop 我使用另一个 jsfiddle 来创建我的示例。此外,这两个事件似乎都移到了这里,但在我的真实日历中并非如此。

标签: jquery events jquery-plugins fullcalendar


【解决方案1】:

检查这个小提琴:http://jsfiddle.net/100thGear/GPx28/

需要注意的几点:

  • eventDrop 回调中的allDay 参数代表事件的allDay。它代表 slot 的 allDay 能力。因此,在周视图中,顶部栏的 allDaytrue,下面的时间段将 allDayfalse
  • eventDrop 回调中的event 参数具有更新的日期/时间。因此,如果您将事件从 allDay 槽移动到 6:30 AM 槽,则此回调中的事件开始实际上会显示 6:30:00。因此,我将拖动事件的 allDay 参数存储在拖动开始时的变量中(通过eventDragStart 回调)
  • 事件的id 属性确定它是否为可重复事件。在您的小提琴中,allDay 事件和正常事件都具有相同的 id - 这会使您的拖动操作复杂化。如果可以,请避免这种情况。
  • 最后,我想你知道这一点,但事件被删除后的正确回调称为 eventDrop - 而不仅仅是 drop。

希望这会有所帮助!

【讨论】:

    【解决方案2】:

    有点晚了,但我遇到了类似的问题。我的一些 allDay 事件需要修复,而另一些则不需要。我的解决方案是为每个名为“forceAllDay”的事件添加一个用户定义的值,并将其设置为 true 或 false。

    然后在事件丢弃部分添加了这个:

    eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
        if (event.forceAllDay && !allDay) {
            revertFunc();
        } else {
            if (!confirm('Move event?')) {
                revertFunc();
            } else {
                // UPDATE DATABASE
            }
        }
    }
    

    【讨论】:

      【解决方案3】:

      根据他们最新的 API 2.xx,您可以这样做:

      var draggedEventIsAllDay
      var eventDragStart = function(ev) {
          draggedEventIsAllDay = ev.allDay;
      };
      
      var eventDrop = function(ev, delta, revertFunc, jsEvent, ui, view) {
          var data = delta._data,
              dayDelta = data.days,
              minuteDelta = data.minutes,
              allDay;
      
          var start = jQuery.fullCalendar.moment(ev.start.format('MM-DD-YYYY'));
      
          if (start.hasTime()) {
              allDay = false;
          } else {
              allDay = true;
          }
      
      
          if (!allDay && draggedEventIsAllDay || allDay && !draggedEventIsAllDay) {
              revertFunc();
          }
      };
      

      【讨论】:

        【解决方案4】:

        您可以使用 moment 来检查 endtime 是否为空。希望对你有帮助

        eventDrop: function(event, delta, revertFunc) {
            var m = $.fullCalendar.moment(event.end);
        
            if (!m.hasTime() && !event.allDay)
                revertFunc(); 
            else {
        
            }
        },
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2022-06-12
          • 1970-01-01
          • 2019-03-18
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2023-04-08
          • 2011-03-31
          相关资源
          最近更新 更多