在FullCalendar中，我可以在不使用拖动的情况下获得类似于dropable的行为

Question

Full Calendar有一个允许将外部jQuery UI拖拽到日历上的选项。正如您在这个演示中所看到的(在"week"视图中最为明显)，当您在时间段上拖动一个事件时，相关的时间段会根据将要创建的事件的持续时间高亮显示。可拖放事件还将遵守为其指定的任何约束。这意味着当拖过无效时隙时，它们不会突出显示，并且拖放将不被接受。

是否有可能在不实际使用拖拽的情况下获得这些功能?我想在日历上放置一个预先指定的事件(标题、持续时间)，使用上面描述的自动约束计算和视觉反馈，但只需简单的鼠标悬停和单击。

---

to澄清我想点击一个时隙来创建一个预定持续时间的事件，从所选的时隙开始。我只希望事件被创建，如果它是在一组约束。我还想在鼠标上直观地传达，如果我单击，事件将覆盖哪个时间范围

Answer 1

我有一个解决方案，我认为非常粗糙。

先决条件

• FullCalendar,
jQuery UI with draggable，
• 这个"模拟"测试插件来自jQuery

方法

每次拖动都可能被打断:

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的滚动。