Question

完整日历可以选择allow dragging of external jQuery UI draggables onto the calendar。正如您在demo上看到的那样（在“周”视图中最明显），当您在时间段上拖动事件时，相关的时间段会根据将要创建的事件的持续时间突出显示。可放置事件也将符合为其指定的任何constraints。这意味着当拖动无效时隙时，它们不会突出显示，并且不会接受放置。

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

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

Answer 1

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

先决条件

FullCalendar，
jQuery UI draggable，
这个＆＃34;模拟＆＃34;来自jQuery的testing utils plugin

方法

每次拖动都可能被中断：

使用关联事件创建元素
让它可以拖动，
模拟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的滚动。放置位置与鼠标偏移滚动量。

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

1 个答案:

先决条件

方法

限制