FullCalendar防止事件落在工作时间之外

Question

我正在使用FullCalendar插件，并尝试制作它，以便当将新事件拖入工作时间以外的东西时，您不能放弃新事件。我有它，所以您不能在当前日期之前拖入任何日期，但无法弄清楚如何阻止说周末被拖到。

我不希望要执行的硬编码解决方案，而不是专门为周末的声明而做的，因为如果我想在特定一周内添加营业时间，只允许在下午1点至下午4点之间说什么？因此，我需要一个动态的解决方案，我可以像事件一样传递一些JSON：手柄和商业节目也可以处理。

$(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
        }
    });
});

这是我当前示例的小提琴http://jsfiddle.net/htexjtg6/

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是完全合格的JS）。请参阅https://fullcalendar.io/docs/display/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",

请参阅此小提琴http://jsfiddle.net/htexjtg6/11/有关您的代码的叉子（带有工作的businessHours）

Answer 2

只需通过此约束：'businessHours'在事件对象中。