FullCalendar如何防止事件在非工作时间之外被拖动。

Question

我正在使用FullCalendar插件，尝试使其在被拖入营业时间之外的区域时无法放置新事件。我已经做到了不能拖动到当前日期之前的任何日期，但不知道如何防止周末被拖动。

我不想采用硬编码的解决方案，并且必须针对特定的周末采用if than语句，因为如果我想在某个特定周的周三添加营业时间，只允许在下午1点至4点之间怎么办？ 因此，我需要一种动态解决方案，可以传递一些JSON，例如事件：handles和businessHours也可以处理。

$(document).ready(function() {
    /* initialize the external events
    -----------------------------------------------------------------*/
    $('#external-events .fc-event').each(function() {
        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
        });
        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });
    });
    /* initialize the calendar
    -----------------------------------------------------------------*/
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar
        drop: function() {
            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }
        },
        /* This constrains it to today or later */
        eventConstraint: {
            start: moment().format('YYYY-MM-DD'),
            end: '2100-01-01' // hard coded must have
        },
        businessHours: {
            start: moment().format('HH:mm'), /* Current Hour/Minute 24H format */
            end: '17:00' // 5pm
        }
    });
});

这是我目前示例的fiddle链接：http://jsfiddle.net/htexjtg6/。

- eqiz

Answer 1

你遇到的一个问题是因为初始化的事件没有持续时间 - 因此fullcalendar不知道当拖放时事件是否与限制和营业时间重叠。只需设置开始/结束即可解决这个问题。

$(this).data('event', {
    title: $.trim($(this).text()), // use the element's text as the event title
    stick: true, // maintain when user navigates (see docs on the renderEvent method)
    start: moment(),
    end: moment(),
});

奖励: 在fullcalendar初始化器中设置defaultTimedEventDuration:'01:00:00'（事件默认持续时间为2小时）-根据应用程序所适用的领域设置此值。

关于在不同的日期有不同的时间; BusinessHours可以是一个数组-(可以来自返回jsonarray的函数(因为jsonArrays是完全合格的JavaScript)。请参见https://fullcalendar.io/docs/display/businessHours/

businessHours: [ 
    {
        dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
        start: '08:00', // 8am
        end: '18:00' // 6pm
    },
    {
        dow: [ 4, 5 ], // Thursday, Friday
        start: '10:00', // 10am
        end: '16:00' // 4pm
    }
],
eventConstraint:"businessHours",

请查看这个 fiddle http://jsfiddle.net/htexjtg6/11/，它是你的代码的分支版本（具有工作日营业时间）。

- VisualBean

---

我在赏金中提到，希望能够在具有特定时间限制的情况下仍然能够将新事件拖动到日期上... 可能将时间默认为营业时间内列出的最早可用时间。你是说FullCalendar无法做到这一点，只能将事件添加到每日视图中吗？ - eqiz

@eqiz 如果我理解正确的话，那在这个fiddle里是可以工作的。 - VisualBean

我本意是在赏金中提到能够以月视图的方式完成它的参考。我的意思是你所说的那部分是不可能的，只能使用每周或每日视图通过拖动事件来完成，而不能使用月视图。 - eqiz

如果您查看我发布的fiddle，就会发现它已经按要求工作了。在月视图中，您无法将事件拖放到非营业时间（周末）之外。 - VisualBean

@eqiz，你在赏金中寻找的所有内容都应该在我的代码片段和回答中得到了解答 - 我已经稍作更新。 你只能在营业时间内（包括月视图中的特定日期）放置事件，并且businessHours参数需要一个数组，可以从函数中获取。 - VisualBean

Answer 2

只需在事件对象中传递此约束条件：'businessHours'。

- Kailashpati Singh Deora