在FullCalendar中,我可以在不使用拖动的情况下获得类似于droppable的行为吗？

Question

完整日历有一个选项,允许将外部jQuery UI可拖动拖动到日历上.正如您在此演示中看到的那样(在"周"视图中最明显),当您在时间段上拖动事件时,相关的时间点会突出显示,具体取决于将要创建的事件的持续时间.droppable事件也将符合为其指定的任何约束.这意味着当拖动无效时隙时,它们不会突出显示,并且不会接受放置.

是否有可能在没有实际使用可拖动的情况下获得这些功能？我想将预先指定的事件(标题,持续时间)放在日历上,使用上面描述的自动约束计算和视觉反馈,但只需简单的移动和点击.

---

Tobclarify我想点击一个时隙来创建一个从所选时隙开始的预定持续时间的事件.我只希望在一组约束内创建事件.我还希望在鼠标悬停时进行可视化通信,如果我点击,该事件将涵盖哪个时间范围.

Answer 1

我有一个我认为非常hacky的解决方案。请改进这个答案。

先决条件

• 全日历，
• jQuery UI 与draggable,
• 这个“模拟”测试jQuery 的utils 插件

方法

每次拖动都可能被中断：

1. 创建一个具有关联事件的元素，
2. 使其可拖动，
3. 模拟一个mousedown事件。

http://jsfiddle.net/u863kysr/2/有一个工作版本

// My Predetermined Event
var potentialEvent = {
    duration: '1:30:00',
    title: 'Your Bookiing',
    constraint: 'businessHours',
};

// Create the FullCalendar
$cal = $('#cal').fullCalendar({
    defaultView: 'agendaWeek',
    businessHours: true,
    droppable: true,
    allDaySlot: false,
})

var $draggable = null;
// Mouseup definitely stops dragging.
$(document.body).on('mouseup', function () {
    if ($draggable) {
        $draggable.remove()
    }

    // Create a new element so that it's positioned at {clientX: 0, clientY: 0}.
    $draggable = $('<div></div>')
        .css('position', 'fixed')
        .css('top', 0)
        .css('left', 0)
        .insertBefore($cal);

    // Associate the event with the element in the way theat FullCalendar expects.
    $draggable
        .data('event', potentialEvent)
        .draggable();

    // After this event has finished, simulate a mousedown so that it acts like
    // it is being dragged.
    setTimeout(function () {
        $draggable.simulate('mousedown', {
            clientX: 0,
            clientY: 0
        });
    }, 0)
}).trigger('mouseup');

局限性

它不处理 FullCalendar 的滚动。放置位置会偏离鼠标滚动的量。