eventClick on bg events

src/component/DateComponent.ts

@@ -56,7 +56,8 @@ export default abstract class DateComponent extends Component {
   useEventCenter: boolean = true // for dragging geometry
   doesDragHelper: boolean = false // for events that ORIGINATE from this component
   doesDragHighlight: boolean = false // for events that ORIGINATE from this component
-  segSelector: string = '.fc-event-container > *' // what constitutes an event element?
+  fgSegSelector: string = '.fc-event-container > *' // lets eventRender produce elements without fc-event class
+  bgSegSelector: string = '.fc-bgevent'
 
   // if defined, holds the unit identified (ex: "year" or "month") that determines the level of granularity
   // of the date areas. if not defined, assumes to be day and time granularity.
@@ -1104,7 +1105,7 @@ export default abstract class DateComponent extends Component {
 
 
   isValidDateDownEl(el: HTMLElement) {
-    let segEl = elementClosest(el, this.segSelector)
+    let segEl = elementClosest(el, this.fgSegSelector)
 
     return (!segEl || segEl.classList.contains('fc-helper')) &&
       !elementClosest(el, '.fc-more') && // a "more.." link

src/component/renderers/EventRenderer.ts

@@ -126,7 +126,14 @@ export default class EventRenderer {
           }
         },
         filterEl: (seg, el) => {
-          return this.filterEventRenderEl(seg, el)
+          el = this.filterEventRenderEl(seg, el)
+
+          if (el) {
+            setElSeg(el, seg)
+            seg.el = el
+          }
+
+          return el
         }
       })
     }

src/interactions/EventClicking.ts

@@ -18,7 +18,7 @@ export default class EventClicking {
     this.destroy = listenBySelector(
       component.el,
       'click',
-      component.segSelector,
+      component.fgSegSelector + ',' + component.bgSegSelector,
       this.handleSegClick
     )
   }

src/interactions/EventHovering.ts

@@ -18,7 +18,7 @@ export default class EventHovering {
 
     this.removeHoverListeners = listenToHoverBySelector(
       component.el,
-      component.segSelector,
+      component.fgSegSelector + ',' + component.bgSegSelector,
       this.handleSegEnter,
       this.handleSegLeave
     )

src/interactions/EventResizing.ts

@@ -196,7 +196,7 @@ export default class EventDragging {
   }
 
   querySeg(ev: PointerDragEvent): Seg | null {
-    return getElSeg(elementClosest(ev.subjectEl as HTMLElement, this.component.segSelector))
+    return getElSeg(elementClosest(ev.subjectEl as HTMLElement, this.component.fgSegSelector))
   }
 
 }

src/list/ListView.ts

@@ -19,7 +19,7 @@ export default class ListView extends View {
 
   isInteractable = true
   slicingType: 'all-day' = 'all-day' // stupid TypeScript
-  segSelector: any = '.fc-list-item' // which elements accept event actions
+  fgSegSelector: any = '.fc-list-item' // which elements accept event actions
 
   scroller: ScrollComponent
   contentEl: HTMLElement

tests/automated/event-click-hover/eventClick.js

@@ -1,4 +1,4 @@
-import { getSingleEl } from '../event-render/EventRenderUtils'
+import { getSingleEl, getSingleBackgroundEventEl } from '../event-render/EventRenderUtils'
 
 describe('eventClick', function() {
   pushOptions({
@@ -24,4 +24,19 @@ describe('eventClick', function() {
     // single EVENT element
     getSingleEl().simulate('click')
   })
+
+  it('fires on a background event', function(done) {
+    initCalendar({
+      events: [
+        { start: '2018-08-31', rendering: 'background' }
+      ],
+      eventClick(arg) {
+        done()
+      }
+    })
+
+    // single EVENT element
+    getSingleBackgroundEventEl().simulate('click')
+  })
+
 })