javascript - allow eventOverlap for background events only in fullcalendar - Stack Overflow

admin管理员组

文章数量:1333695

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

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

• javascript
• fullcalendar

Share Improve this question Follow edited Sep 18, 2017 at 6:40 Jorgen asked Sep 15, 2017 at 11:14 JorgenJorgen 45066 silver badges1010 bronze badges 4

• what does without success mean, exactly? What the was incorrect senario, and what would be the correct scenario? It stopped you overlapping the background event? Or it allowed you to overlap other events still? Or both? Or something else. Sorry if I missed the point but for me it's not 100% clear what the issue is. Perhaps a specific example would help. – ADyson Commented Sep 17, 2017 at 4:56
• The issue is, that it also ignores overlapping for background events; but I need background events just as visual blocks (with event overlapping enabled) – Jorgen Commented Sep 18, 2017 at 6:16
• "ignores event overlapping". You mean it allows event overlapping for these background events, or doesn't allow it? And in that case, what is the behaviour of the rest of the calendar? This is what I mean about your description being unclear. – ADyson Commented Sep 18, 2017 at 6:18
• I just updated my main question and add a picture and more info - hope it is a little bit clearer now. Thx for your time and help – Jorgen Commented Sep 18, 2017 at 6:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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/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.

Extending ADyson answer, on FullCalendar 5 you need to change "rendering" by "display":

eventOverlap: function(stillEvent, movingEvent) {
    return stillEvent.display == "background";
}

I had the same problem and my solution have been to rewrite the renderFillSegs function in timegrid package to reproduce the display of foreground events.

  renderFillSegs(segs: TimeColsSeg[], fillType: string) {
let { props, context } = this
let segVCoords = puteSegVCoords(segs, props.date, props.slatCoords, context.options.eventMinHeight) // don't assume all populated

let { eventMaxStack, eventOrderStrict } = this.context.options
let { segPlacements } = puteFgSegPlacements(segs, segVCoords, eventOrderStrict, eventMaxStack)

let children = segPlacements.map((segPlacement) => {
  let { seg, rect } = segPlacement
  let vStyle = puteSegVStyle(rect && rect.span)
  let hStyle = rect ? this.puteSegHStyle(rect) : { left: 0, right: 0 }

  return (
    <div
      key={buildEventRangeKey(seg.eventRange)}
      className="fc-timegrid-bg-harness"
      style={{...vStyle, ...hStyle}}
    >
      {fillType === 'bg-event' ?
        <BgEvent seg={seg} {...getSegMeta(seg, props.todayRange, props.nowDate)} /> :
        renderFill(fillType)}
    </div>
  )
})

return <Fragment>{children}</Fragment>

}

本文标签： javascriptallow eventOverlap for background events only in fullcalendarStack Overflow