Question

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

我不想要一个硬编码的解决方案，我必须专门为周末做一个if if声明，因为如果我想在特定的一周增加营业时间，并且只允许在下午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
        }
    });
});

这是我当前示例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(),
});

奖励：在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",

请查看此小提琴http://jsfiddle.net/htexjtg6/11/以获取代码的分支（使用正在运行的businessHours）

FullCalendar可防止事件在工作时间之外丢失

1 个答案: