仅在fullcalendar中允许eventOverlap用于后台事件 [英] allow eventOverlap for background events only in fullcalendar

问题描述

有没有办法避免事件重叠;
喜欢在fullcalendar配置中使用eventOverlap：false，
，但另一方面允许为后台事件重叠？

我想将某些事件呈现为后台事件放到我的日历中，就像信息一样（其他日历中已经有一些事件），但允许我创建，移动或调整我的新事件。

但是所有其他事件都不允许在此日历中重叠。

我只是尝试一下，没有成功：

 日历：{
可编辑：true，
 contentHeight：'auto'，
主题：true，
 firstDay：1，
 eventOverlap：false，
 nowIndicator：true，
 allDaySlot：false，
 slotDuration：'01：00：00'，
 snapDuration：'00：00：01'，
 axisFormat：'HH：mm'，
 timeFormat：'HH：mm'，
 timezone：'local'，
 views：{
 listThreeDay：{
类型：'list'，
持续时间：{天数：3}，
 buttonText：'list 3 day'
}，
 listOneWeek：{
类型：'list'，
持续时间： {week：1}，
 buttonText：'list week'
} 
}，
 businessHours：{
 start：'06：00'，// a start时间（本例中为上午6点）
结束：'18：00'，//结束时间（本例中为下午6点）
 dow：[1，2，3，4，5] //天
}，
事件：[
 {
开始：'00：00：00 + 02：00'，
结束：星期（此处星期一至星期五） '08：00：00 + 02：00'，
 color：'red'，
渲染：'background'，
 dow：[1]，
重叠：true， 
 
 
 
 $ / code $ / pre 
 $ b $ p 
以下图片显示我需要：
 
 
 
 
后台事件（红色）
 
 
正常事件（蓝色）重叠后台事件       b $ b  p>  
解决方案
 code> eventOverlap 回调来实现这一点。简单地测试重叠的事件是否是后台事件： 
 
 
  eventOverlap：function（stillEvent，movingEvent）{ 
 return stillEvent.rendering ==background; 
} 
  
您也不需要指定重叠：真正的在任何您的个人后台事件。
 
 
 
一个工作示例可以在这里看到： http://jsfiddle.net/sbxpv25p/18/   
 
  https://fullcalendar.io/docs/event_ui/eventOverlap/ 解释了如何使用自定义函数回拨。
 
 
 
注意您可能已经意识到这一点，但值得指出的是：如果您打算将新拖动/调整大小的事件保存回数据库，则还需要再次检查服务器上的重叠规则，因为任何写入的规则具有浏览器开发人员工具知识的任何人都可以轻松地禁用或绕过JavaScript。这些前端规则仅对用户友好性有用 - 它们不能100％依赖于验证您的数据。
 
Is there a way to avoid event overlapping;
like the eventOverlap: false inside the fullcalendar config,
but on other hand allow overlap for background events?

I want to render some events as background events into my calendar, just as info (that there are already some events in other calendars) but allow me to create, move or resize my new event on top.

But all other events are not allowed to overlap inside this calendar.

I just try this, without success:
   calendar:{
      editable: true,
      contentHeight: 'auto',
      theme: true,
      firstDay: 1,
      eventOverlap: false,
      nowIndicator: true,
      allDaySlot: false,
      slotDuration: '01:00:00',
      snapDuration: '00:00:01',
      axisFormat: 'HH:mm',
      timeFormat: 'HH:mm',
      timezone: 'local',
      views: {
        listThreeDay: {
          type: 'list',
          duration: { days: 3 },
          buttonText: 'list 3 day'
        },
        listOneWeek: {
          type: 'list',
          duration: { weeks: 1 },
          buttonText: 'list week'
        }
      },
      businessHours: {
        start: '06:00',         // a start time (6am in this example)
        end: '18:00',           // an end time (6pm in this example)
        dow: [ 1, 2, 3, 4, 5 ]  // days of week (here monday till friday)
      },
      events: [
        {
          start: '00:00:00+02:00',
          end: '08:00:00+02:00',
          color: 'red',
          rendering: 'background',
          dow: [1],
          overlap: true,
        }
      ],
     ...
Following picture shows what I need:


background events (the red) 
normal events (blue) overlapping background events 
normal events (blue) do not overlap on other normal events


解决方案
You can use quite a simple custom function on the eventOverlap callback to achieve this. Simply test whether the event that is being overlapped onto is a background event or not:
eventOverlap: function(stillEvent, movingEvent) {
    return stillEvent.rendering == "background";
}
You also don't need to specify overlap: true on any of your individual background events.

A working example can be seen here: http://jsfiddle.net/sbxpv25p/18/

https://fullcalendar.io/docs/event_ui/eventOverlap/ explains about the use of a custom function for this callback.

N.B. You may already realise this, but it's worth pointing out: if you plan to save the newly dragged/resized events back to your database, you'll need to double-check the overlap rules on the server as well, since any rules written in JavaScript can be easily disabled or bypassed by anyone with a knowledge of the browser's developer tools. These kind of front-end rules are useful for user-friendliness only - they can't be 100% relied upon to validate your data.

                        
这篇关于仅在fullcalendar中允许eventOverlap用于后台事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！