事件在完整的日历中相互分享 [英] events sharing each other in full calendar

问题描述

我已经在全日历中创建了一个应用程序，该应用程序工作正常，但问题是，在周视图下，我今天有两个事件（2014年11月9日至15日） - 会议1和会议2，都是在您可以看到浅绿色事件的边界层面内。我面临的问题是事件正在通过拖放方式分配给他们的时间，如下所示。因为我的要求是任何事件都不应该与任何其他事件共享时间

.pngalt =

任何人都可以告诉我一些解决方案。

Working JSfiddle

我的代码如下：

  $（document）.ready（function（）{
 $（' #calendar'）。fullCalendar（{
 slotEventOverlap：false，
 header：{
 left：'prev，next today'，
 center：'title'，
 right：'month，agendaweek，agendaDay'
}，
 defaultDate：'2014-11-12'，
 businessHours：true，//显示营业时间
 editable：true， 
事件：[
 {
 title ：'商务午餐'，
开始：'2014-11-03T13：00：00'，
约束：'businessHours'
}，
 {
 title： '会议1'，
开始：'2014-11-13T11：00：00'，
结束：'2014-11-13T12：00：00'，
 
约束：'availableForMeeting'，//定义在
下面color：'＃257e4a'
}，
 {
 title：'会议2'，
 start：'2014- 11-13T12：00：00'，
结束：'2014-11-13T14：00：00'，
约束：'availableForMeeting'，//定义在
下面颜色：'＃257e4a '
}，
 {
 title：'Conference'，
 start：'2014-11-18'，
 end： '2014-11-20'
}，
 {
标题：'Party'，
 start：'2014-11-29T20：00：00'
} ，
 
 //必须删除会议的区域
 {
 id：'availableForMeeting'，
 start：'2014-11-11T10：00：00 '，
结束：'2014-11-11T16：00：00'，
渲染：'background'
}，
 {
 id：'availableForMeeting'，， 
 start：'2014-11-13T10：00：00'，
结束：'2014-11-13T16：00：00'，
渲染：'background'
} ，
 
 //红色区域没有事件可以被删除
 {
 start：'2014-11-24'，
 end：'2014-11-28 '，
重叠：假，
渲染：'背景'，
颜色：'＃ff9f89'
}，
 {
 start：'2014-11-06'，
结束：'2014-11-08'，
重叠：假，
渲染：'背景'，
颜色：'＃ff9f89'
} 
 ]，
 eventDrop：function（event，delta，revertFunc）{
 return false; 
} 
}）; 
}）; 
  

解决方案

b
$ b

  disableDragging：true，
  

<对你来说很容易。但是这是一个fullCalendar方法，它禁用整型caledar的事件拖拽能力。

因此（而不是尝试使用不存在的函数）在 eventRender（event，element） callback：

$ b

  if（event.id = ='someid'）
 element.draggable = false; 
} 
  

我在这里找到了另一个解决方案：

为什么不在选择回调中检查它？

 <$ c （$ * b $ if（/ * start是被禁用的时间* /）
返回false; $ c $ select：function（start，end，allDay，jsEvent，view） 
 else {
 //继续执行应用程序的正常流程
 //您可以显示一个弹出窗口来获取用户的信息以创建
 //这里有一个新事件
 
 
  

参考：禁用jQuery fullcalendar插件中的时间段范围

谢谢。

I have created an application in full-calendar, the application is working fine but the problem is that under the week view i have two events for today (Nov 9 - 15, 2014)- Meeting 1 and Meeting 2, both are within the boundary levels which you can see a light green event. The problem which i am facing is the events is sharing the time which is been allocated to them through dragging and dropping like as shown below. Since my requirement is that the any events should not share their time with any other events

Can anyone please tell me some solution for this

Working JSfiddle

My code is as given below

$(document).ready(function() {
        $('#calendar').fullCalendar({
           slotEventOverlap : false,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: '2014-11-12',
            businessHours: true, // display business hours
            editable: true,
            events: [
                {
                    title: 'Business Lunch',
                    start: '2014-11-03T13:00:00',
                    constraint: 'businessHours'
                },
                {
                    title: 'Meeting 1',
                    start: '2014-11-13T11:00:00',
                    end: '2014-11-13T12:00:00',

                    constraint: 'availableForMeeting', // defined below
                    color: '#257e4a'
                },
                {
                    title: 'Meeting 2',
                    start: '2014-11-13T12:00:00',
                    end: '2014-11-13T14:00:00',
                    constraint: 'availableForMeeting', // defined below
                    color: '#257e4a'
                },
                {
                    title: 'Conference',
                    start: '2014-11-18',
                    end: '2014-11-20'
                },
                {
                    title: 'Party',
                    start: '2014-11-29T20:00:00'
                },

                // areas where "Meeting" must be dropped
                {
                    id: 'availableForMeeting',
                    start: '2014-11-11T10:00:00',
                    end: '2014-11-11T16:00:00',
                    rendering: 'background'
                },
                {
                    id: 'availableForMeeting',
                    start: '2014-11-13T10:00:00',
                    end: '2014-11-13T16:00:00',
                    rendering: 'background'
                },

                // red areas where no events can be dropped
                {
                    start: '2014-11-24',
                    end: '2014-11-28',
                    overlap: false,
                    rendering: 'background',
                    color: '#ff9f89'
                },
                {
                    start: '2014-11-06',
                    end: '2014-11-08',
                    overlap: false,
                    rendering: 'background',
                    color: '#ff9f89'
                }
            ],
             eventDrop: function (event, delta, revertFunc) {
                return false;
            }
        });
});

解决方案

If you need something like:

disableDragging: true,

-things are that easy for you. But this is a fullCalendar method which disables the event-dragging ability of the wholle caledar.

So (rather than trying to use non-existent functions) try this in your eventRender(event, element) callback:

if (event.id == 'someid')
    element.draggable = false;
}

I found another solution here:

Why don't you check it in Select callback?

select: function( start, end, allDay, jsEvent, view ) {
    if( /*start is the disabled time*/ )
        return false;
    else{
        // Proceed with the normal flow of your application
        // You might show a popup to get info from user to create
        // a new event here
    }
}

Reference: Disable timeslot ranges in jQuery fullcalendar plugin

Thank you.

这篇关于事件在完整的日历中相互分享的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！