创建活动时选择时间禁用拖动

时间:2016-08-24 14:06:03

标签: javascript jquery fullcalendar

我使用FullCalender显示日历,并允许用户在日历中创建活动,动态持续时间可从下拉列表中选择。

当用户仅在日历上点击时,我得到的结果只是选择了所需的持续时间。这是正确的。

但问题是当用户点击并继续DRAG选择时间范围时。我不希望用户能够选择超过指定的持续时间,即说5分钟。只有CLICKing选择5分钟,这完全正常。唯一的问题是DRAGing with CLICKing。

我已尝试过FullCalendar文档中提供的各种选项,但没有任何帮助。

感谢任何帮助。在此先感谢。

当前整合位于以下链接到小提琴

https://jsfiddle.net/4h28Lt81/

Jquery如下:

$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  defaultView: 'agendaDay',
  slotDuration: '00:05:00',
  slotEventOverlap: false,
  defaultDate: '2016-06-12',
  selectable: true,
  selectHelper: true,
  select: function(start, end) {
    var title = prompt('Event Title:');
    var eventData;
    if (title) {
      eventData = {
        title: title,
        start: start,
        end: end
      };
      $('#calendar').fullCalendar('renderEvent', eventData, true);
    }
    $('#calendar').fullCalendar('unselect');
  },
  editable: true,
  eventLimit: true, // allow "more" link when too many events            
  loading: function(bool) {
    $('#loading').toggle(bool);
  },
  eventRender: function(event, el) {
    // render the timezone offset below the event title
    if (event.start.hasZone()) {
      el.find('.fc-title').after(
        $('<div class="tzo"/>').text(event.start.format('Z'))
      );
    }
  },
  eventClick: function(calEvent, jsEvent, view) {}
});

1 个答案:

答案 0 :(得分:1)

我觉得能够点击并拖动您想要参加活动的时间不是问题。除非我在你的问题中遗漏了一些内容。假设用户只需要阻止5分钟段吗?

如果你真的想阻止它拖动,可以通过jQueryUI

禁用它
myObject.draggable( 'disable' )

希望这有帮助!