move daygrid away from jq

src/basic/BasicView.ts

@@ -26,7 +26,8 @@ export default class BasicView extends View {
   dayGridClass: any // class the dayGrid will be instantiated from (overridable by subclasses)
 
   scroller: Scroller
-  dayGrid: any // the main subcomponent that does most of the heavy lifting
+  dayGrid: DayGrid // the main subcomponent that does most of the heavy lifting
+  colWeekNumbersVisible: boolean = false
 
   weekNumberWidth: any // width of all the week-number cells running down the side
 
@@ -40,10 +41,10 @@ export default class BasicView extends View {
     if (this.opt('weekNumbers')) {
       if (this.opt('weekNumbersWithinDays')) {
         this.dayGrid.cellWeekNumbersVisible = true
-        this.dayGrid.colWeekNumbersVisible = false
+        this.colWeekNumbersVisible = false
       } else {
         this.dayGrid.cellWeekNumbersVisible = false
-        this.dayGrid.colWeekNumbersVisible = true
+        this.colWeekNumbersVisible = true
       }
     }
 
@@ -87,7 +88,7 @@ export default class BasicView extends View {
 
     this.el.find('.fc-body > tr > td').append(dayGridContainerEl)
 
-    this.dayGrid.headContainerEl = this.el.find('.fc-head-container')
+    this.dayGrid.headContainerEl = this.el.find('.fc-head-container')[0]
     this.dayGrid.setElement(dayGridEl)
   }
 
@@ -146,7 +147,7 @@ export default class BasicView extends View {
   // Refreshes the horizontal dimensions of the view
   updateSize(totalHeight, isAuto, isResize) {
     let eventLimit = this.opt('eventLimit')
-    let headRowEl = this.dayGrid.headContainerEl.find('.fc-row')
+    let headRowEl = this.dayGrid.headContainerEl.querySelector('.fc-row')
     let scrollerHeight
     let scrollbarWidths
 
@@ -162,7 +163,7 @@ export default class BasicView extends View {
 
     super.updateSize(totalHeight, isAuto, isResize)
 
-    if (this.dayGrid.colWeekNumbersVisible) {
+    if (this.colWeekNumbersVisible) {
       // Make sure all week number cells running down the side have the same width.
       // Record the width for cells created later.
       this.weekNumberWidth = matchCellWidths(
@@ -172,7 +173,7 @@ export default class BasicView extends View {
 
     // reset all heights to be natural
     this.scroller.clear()
-    uncompensateScroll(headRowEl)
+    uncompensateScroll($(headRowEl))
 
     this.dayGrid.removeSegPopover() // kill the "more" popover if displayed
 
@@ -198,7 +199,7 @@ export default class BasicView extends View {
 
       if (scrollbarWidths.left || scrollbarWidths.right) { // using scrollbars?
 
-        compensateScroll(headRowEl, scrollbarWidths)
+        compensateScroll($(headRowEl), scrollbarWidths)
 
         // doing the scrollbar compensation might have created text overflow which created more height. redo
         scrollerHeight = this.computeScrollerHeight(totalHeight)
@@ -221,9 +222,9 @@ export default class BasicView extends View {
   // Sets the height of just the DayGrid component in this view
   setGridHeight(height, isAuto) {
     if (isAuto) {
-      undistributeHeight(this.dayGrid.rowEls) // let the rows be their natural height with no expanding
+      undistributeHeight($(this.dayGrid.rowEls)) // let the rows be their natural height with no expanding
     } else {
-      distributeHeight(this.dayGrid.rowEls, height, true) // true = compensate for height-hogging rows
+      distributeHeight($(this.dayGrid.rowEls), height, true) // true = compensate for height-hogging rows
     }
   }
 
@@ -260,14 +261,12 @@ function makeDayGridSubclass(SuperClass) {
 
   return class SubClass extends SuperClass {
 
-    colWeekNumbersVisible: boolean = false // display week numbers along the side?
-
 
     // Generates the HTML that will go before the day-of week header cells
     renderHeadIntroHtml() {
       let view = this.view
 
-      if (this.colWeekNumbersVisible) {
+      if (view.colWeekNumbersVisible) {
         return '' +
           '<th class="fc-week-number ' + view.calendar.theme.getClass('widgetHeader') + '" ' + view.weekNumberStyleAttr() + '>' +
             '<span>' + // needed for matchCellWidths
@@ -285,7 +284,7 @@ function makeDayGridSubclass(SuperClass) {
       let view = this.view
       let weekStart = this.getCellDate(row, 0)
 
-      if (this.colWeekNumbersVisible) {
+      if (view.colWeekNumbersVisible) {
         return '' +
           '<td class="fc-week-number" ' + view.weekNumberStyleAttr() + '>' +
             view.buildGotoAnchorHtml( // aside from link, important for matchCellWidths
@@ -303,7 +302,7 @@ function makeDayGridSubclass(SuperClass) {
     renderBgIntroHtml() {
       let view = this.view
 
-      if (this.colWeekNumbersVisible) {
+      if (view.colWeekNumbersVisible) {
         return '<td class="fc-week-number ' + view.calendar.theme.getClass('widgetContent') + '" ' +
           view.weekNumberStyleAttr() + '></td>'
       }
@@ -317,7 +316,7 @@ function makeDayGridSubclass(SuperClass) {
     renderIntroHtml() {
       let view = this.view
 
-      if (this.colWeekNumbersVisible) {
+      if (view.colWeekNumbersVisible) {
         return '<td class="fc-week-number" ' + view.weekNumberStyleAttr() + '></td>'
       }
 
@@ -326,7 +325,8 @@ function makeDayGridSubclass(SuperClass) {
 
 
     getIsNumbersVisible() {
-      return DayGrid.prototype.getIsNumbersVisible.apply(this, arguments) || this.colWeekNumbersVisible
+      let view = this.view
+      return DayGrid.prototype.getIsNumbersVisible.apply(this, arguments) || view.colWeekNumbersVisible
     }
 
   }

src/basic/DayGrid.ts

@@ -31,6 +31,8 @@ export default class DayGrid extends InteractiveDateComponent {
   renderIntroHtml: DayTableInterface['renderIntroHtml']
   getCellRange: DayTableInterface['getCellRange']
   sliceRangeByDay: DayTableInterface['sliceRangeByDay']
+  bookendCells: DayTableInterface['bookendCells']
+  breakOnWeeks: DayTableInterface['breakOnWeeks']
 
   view: any // TODO: make more general and/or remove
   helperRenderer: any
@@ -39,9 +41,9 @@ export default class DayGrid extends InteractiveDateComponent {
 
   bottomCoordPadding: number = 0 // hack for extending the hit area for the last row of the coordinate grid
 
-  headContainerEl: JQuery // div that hold's the date header
-  rowEls: JQuery // set of fake row elements
-  cellEls: JQuery // set of whole-day elements comprising the row's background
+  headContainerEl: HTMLElement // div that hold's the date header
+  rowEls: HTMLElement[] // set of fake row elements
+  cellEls: HTMLElement[] // set of whole-day elements comprising the row's background
 
   rowCoordCache: any
   colCoordCache: any
@@ -64,11 +66,9 @@ export default class DayGrid extends InteractiveDateComponent {
   // Slices up the given span (unzoned start/end with other misc data) into an array of segments
   componentFootprintToSegs(componentFootprint) {
     let segs = this.sliceRangeByRow(componentFootprint.unzonedRange)
-    let i
-    let seg
 
-    for (i = 0; i < segs.length; i++) {
-      seg = segs[i]
+    for (let i = 0; i < segs.length; i++) {
+      let seg = segs[i]
 
       if (this.isRTL) {
         seg.leftCol = this.daysPerRow - 1 - seg.lastRowDayIndex
@@ -109,7 +109,7 @@ export default class DayGrid extends InteractiveDateComponent {
     let col
 
     if (this.headContainerEl) {
-      this.headContainerEl.html(this.renderHeadHtml())
+      this.headContainerEl.innerHTML = this.renderHeadHtml()
     }
 
     for (row = 0; row < rowCnt; row++) {
@@ -117,15 +117,15 @@ export default class DayGrid extends InteractiveDateComponent {
     }
     this.el.html(html)
 
-    this.rowEls = this.el.find('.fc-row')
-    this.cellEls = this.el.find('.fc-day, .fc-disabled-day')
+    this.rowEls = this.el.find('.fc-row').toArray()
+    this.cellEls = this.el.find('.fc-day, .fc-disabled-day').toArray()
 
     this.rowCoordCache = new CoordCache({
-      els: this.rowEls.toArray(),
+      els: this.rowEls,
       isVertical: true
     })
     this.colCoordCache = new CoordCache({
-      els: this.cellEls.toArray().slice(0, this.colCnt), // only the first row
+      els: this.cellEls.slice(0, this.colCnt), // only the first row
       isHorizontal: true
     })
 
@@ -342,7 +342,7 @@ export default class DayGrid extends InteractiveDateComponent {
 
 
   getCellEl(row, col) {
-    return this.cellEls.eq(row * this.colCnt + col)
+    return $(this.cellEls[row * this.colCnt + col])
   }
 
 
@@ -456,8 +456,8 @@ export default class DayGrid extends InteractiveDateComponent {
   // Assumes the row is "rigid" (maintains a constant height regardless of what is inside).
   // `row` is the row number.
   computeRowLevelLimit(row): (number | false) {
-    let rowEl = this.rowEls.eq(row) // the containing "fake" row div
-    let rowHeight = rowEl.height() // TODO: cache somehow?
+    let rowEl = this.rowEls[row] // the containing "fake" row div
+    let rowHeight = rowEl.offsetHeight // TODO: cache somehow?
     let trEls = this.eventRenderer.rowStructs[row].tbodyEl.children()
     let i
     let trEl
@@ -645,21 +645,21 @@ export default class DayGrid extends InteractiveDateComponent {
   showSegPopover(row, col, moreLink, segs) {
     let view = this.view
     let moreWrap = moreLink.parent() // the <div> wrapper around the <a>
-    let topEl // the element we want to match the top coordinate of
+    let topEl: HTMLElement // the element we want to match the top coordinate of
     let options
     let themeClass = view.calendar.theme.getClass('popover')
 
     if (this.rowCnt === 1) {
-      topEl = view.el // will cause the popover to cover any sort of header
+      topEl = view.el[0] // will cause the popover to cover any sort of header
     } else {
-      topEl = this.rowEls.eq(row) // will align with top of row
+      topEl = this.rowEls[row] // will align with top of row
     }
 
     options = {
       className: 'fc-more-popover' + (themeClass ? ' ' + themeClass : ''),
       content: this.renderSegPopoverContent(row, col, segs).toArray(),
       parentEl: view.el[0], // attach to root of view. guarantees outside of scrollbars.
-      top: topEl.offset().top,
+      top: topEl.getBoundingClientRect().top,
       autoHide: true, // when the user clicks elsewhere, hide the popover
       viewportConstrain: this.opt('popoverViewportConstrain'),
       hide: () => {

src/basic/DayGridEventRenderer.ts

@@ -1,6 +1,7 @@
 import * as $ from 'jquery'
 import { htmlEscape, cssToStr } from '../util'
 import EventRenderer from '../component/renderers/EventRenderer'
+import DayGrid from './DayGrid'
 
 
 /* Event-rendering methods for the DayGrid class
@@ -8,7 +9,7 @@ import EventRenderer from '../component/renderers/EventRenderer'
 
 export default class DayGridEventRenderer extends EventRenderer {
 
-  dayGrid: any
+  dayGrid: DayGrid
   rowStructs: any // an array of objects, each holding information about a row's foreground event-rendering
 
 
@@ -33,7 +34,7 @@ export default class DayGridEventRenderer extends EventRenderer {
     let rowStructs = this.rowStructs = this.renderSegRows(segs)
 
     // append to each row's content skeleton
-    this.dayGrid.rowEls.each(function(i, rowNode) {
+    this.dayGrid.rowEls.forEach(function(rowNode, i) {
       $(rowNode).find('.fc-content-skeleton > table').append(
         rowStructs[i].tbodyEl
       )

src/basic/DayGridFillRenderer.ts

@@ -1,9 +1,12 @@
 import * as $ from 'jquery'
+import { htmlToElement, makeElement } from '../util/dom'
 import FillRenderer from '../component/renderers/FillRenderer'
+import DayGrid from './DayGrid'
 
 
 export default class DayGridFillRenderer extends FillRenderer {
 
+  component: DayGrid
   fillSegTag: string = 'td' // override the default tag name
 
 
@@ -11,13 +14,13 @@ export default class DayGridFillRenderer extends FillRenderer {
     let nodes = []
     let i
     let seg
-    let skeletonEl
+    let skeletonEl: HTMLElement
 
     for (i = 0; i < segs.length; i++) {
       seg = segs[i]
       skeletonEl = this.renderFillRow(type, seg)
-      this.component.rowEls.eq(seg.row).append(skeletonEl)
-      nodes.push(skeletonEl[0])
+      this.component.rowEls[seg.row].appendChild(skeletonEl)
+      nodes.push(skeletonEl)
     }
 
     return nodes
@@ -25,13 +28,13 @@ export default class DayGridFillRenderer extends FillRenderer {
 
 
   // Generates the HTML needed for one row of a fill. Requires the seg's el to be rendered.
-  renderFillRow(type, seg) {
+  renderFillRow(type, seg): HTMLElement {
     let colCnt = this.component.colCnt
     let startCol = seg.leftCol
     let endCol = seg.rightCol + 1
     let className
-    let skeletonEl
-    let trEl
+    let skeletonEl: HTMLElement
+    let trEl: HTMLTableRowElement
 
     if (type === 'businessHours') {
       className = 'bgevent'
@@ -39,26 +42,25 @@ export default class DayGridFillRenderer extends FillRenderer {
       className = type.toLowerCase()
     }
 
-    skeletonEl = $(
+    skeletonEl = htmlToElement(
       '<div class="fc-' + className + '-skeleton">' +
         '<table><tr/></table>' +
       '</div>'
     )
-    trEl = skeletonEl.find('tr')
+    trEl = skeletonEl.getElementsByTagName('tr')[0]
 
     if (startCol > 0) {
-      trEl.append('<td colspan="' + startCol + '"/>')
+      trEl.appendChild(makeElement('td', { colspan: startCol }))
     }
 
-    trEl.append(
-      seg.el.attr('colspan', endCol - startCol)
-    )
+    seg.el[0].setAttribute('colspan', endCol - startCol)
+    trEl.appendChild(seg.el[0])
 
     if (endCol < colCnt) {
-      trEl.append('<td colspan="' + (colCnt - endCol) + '"/>')
+      trEl.appendChild(makeElement('td', { colspan: colCnt - endCol }))
     }
 
-    this.component.bookendCells(trEl)
+    this.component.bookendCells($(trEl))
 
     return skeletonEl
   }

src/basic/DayGridHelperRenderer.ts

@@ -1,9 +1,14 @@
 import * as $ from 'jquery'
 import HelperRenderer from '../component/renderers/HelperRenderer'
+import DayGrid from './DayGrid'
+import { htmlToElement } from '../util/dom'
 
 
 export default class DayGridHelperRenderer extends HelperRenderer {
 
+  component: DayGrid
+
+
   // Renders a mock "helper" event. `sourceSeg` is the associated internal segment object. It can be null.
   renderSegs(segs, sourceSeg) {
     let helperNodes = []
@@ -13,30 +18,28 @@ export default class DayGridHelperRenderer extends HelperRenderer {
     rowStructs = this.eventRenderer.renderSegRows(segs)
 
     // inject each new event skeleton into each associated row
-    this.component.rowEls.each(function(row, rowNode) {
-      let rowEl = $(rowNode) // the .fc-row
-      let skeletonEl = $('<div class="fc-helper-skeleton"><table/></div>') // will be absolutely positioned
-      let skeletonTopEl
+    this.component.rowEls.forEach(function(rowNode, row) {
+      let skeletonEl = htmlToElement('<div class="fc-helper-skeleton"><table/></div>') // will be absolutely positioned
+      let skeletonTopEl: HTMLElement
       let skeletonTop
 
       // If there is an original segment, match the top position. Otherwise, put it at the row's top level
       if (sourceSeg && sourceSeg.row === row) {
-        skeletonTop = sourceSeg.el.position().top
+        skeletonTop = sourceSeg.el[0].getBoundingClientRect().top
       } else {
-        skeletonTopEl = rowEl.find('.fc-content-skeleton tbody')
-        if (!skeletonTopEl.length) { // when no events
-          skeletonTopEl = rowEl.find('.fc-content-skeleton table')
+        skeletonTopEl = rowNode.querySelector('.fc-content-skeleton tbody')
+        if (!skeletonTopEl) { // when no events
+          skeletonTopEl = rowNode.querySelector('.fc-content-skeleton table')
         }
 
-        skeletonTop = skeletonTopEl.position().top
+        skeletonTop = skeletonTopEl.getBoundingClientRect().top
       }
 
-      skeletonEl.css('top', skeletonTop)
-        .find('table')
-          .append(rowStructs[row].tbodyEl)
+      skeletonEl.style.top = skeletonTop + 'px'
+      skeletonEl.getElementsByTagName('table')[0].appendChild(rowStructs[row].tbodyEl[0])
 
-      rowEl.append(skeletonEl)
-      helperNodes.push(skeletonEl[0])
+      rowNode.appendChild(skeletonEl)
+      helperNodes.push(skeletonEl)
     })
 
     return $(helperNodes) // must return the elements rendered

src/basic/MonthView.ts

@@ -17,7 +17,7 @@ export default class MonthView extends BasicView {
       height *= this.dayGrid.rowCnt / 6
     }
 
-    distributeHeight(this.dayGrid.rowEls, height, !isAuto) // if auto, don't compensate for height-hogging rows
+    distributeHeight($(this.dayGrid.rowEls), height, !isAuto) // if auto, don't compensate for height-hogging rows
   }
 
 

src/common/Popover.ts

@@ -156,10 +156,6 @@ export default class Popover {
       viewportRect = viewportEl.getBoundingClientRect()
     }
 
-    // if the window is scrolled, it causes the visible area to be further down
-    viewportRect.top += window.scrollY
-    viewportRect.left += window.scrollX
-
     // constrain to the view port. if constrained by two edges, give precedence to top/left
     if (options.viewportConstrain !== false) {
       top = Math.min(top, viewportRect.top + viewportRect.height - rect.height - this.margin)

src/component/DayTableMixin.ts

@@ -6,6 +6,7 @@ export interface DayTableInterface {
   daysPerRow: any
   rowCnt: any
   colCnt: any
+  breakOnWeeks: boolean
   updateDayTable()
   renderHeadHtml()
   renderBgTrHtml(row)

src/util/dom.ts

@@ -1,4 +1,23 @@
 
+// TODO: use in other places
+export function makeElement(tagName, attrs, innerHtml?): HTMLElement {
+  let el: HTMLElement = document.createElement(tagName)
+
+  for (let attrName in attrs) {
+    if (attrName === 'className') {
+      el.className = attrs[attrName]
+    } else {
+      el.setAttribute(attrName, attrs[attrName])
+    }
+  }
+
+  if (typeof innerHtml === 'string') {
+    el.innerHTML = innerHtml
+  }
+
+  return el
+}
+
 export function htmlToElement(htmlString): HTMLElement {
   let div = document.createElement('div')
   div.innerHTML = htmlString.trim()