javascript - FullCalendar 防止事件在工作时间以外丢失

Question

我正在使用 FullCalendar 插件并尝试制作它，以便在将新事件拖到工作时间以外的地方时您不能删除它。我有它，所以你不能拖到当前日期之前的任何日期，但无法弄清楚如何防止周末被拖到。

我不想要一个硬编码的解决方案，我必须专门为周末做一个 if than 语句，因为如果我想添加工作时间，比如在特定一周的星期三，并且只允许在下午 1 点到下午 4 点之间，该怎么办？所以我需要一个动态解决方案，我可以传递一些 JSON，例如事件:句柄和 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/

Answer 1

您遇到的一个问题是因为初始化的事件没有持续时间 - 所以 fullcalendar 不知道事件在删除时是否与约束和 businessHours 重叠。只需设置开始/结束就可以解决这个问题。

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

bonus:在 fullcalendar 初始化程序中设置 defaultTimedEventDuration:'01:00:00',(事件的默认持续时间为 2 小时)- 根据应用程序适用的域。

关于不同的日子有不同的时间； BusinessHours 可以是一个数组 -(它可以来自返回 jsonarray 的函数(因为 jsonArrays 是完全限定的 js)。参见 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/对于您的代码的分支(工作时间)