javascript – FullCalendar可防止事件在营业时间之外丢失

前端之家收集整理的这篇文章主要介绍了javascript – FullCalendar可防止事件在营业时间之外丢失前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用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/的小提琴

最佳答案
你遇到的一个问题是因为初始化的事件没有持续时间 – 所以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",

看到这个小提琴http://jsfiddle.net/htexjtg6/11/为您的代码分叉(与工作businessHours)

猜你在找的JavaScript相关文章