change agenda/basic-view column width syncing

src/agenda/AgendaView.ts

@@ -43,7 +43,6 @@ export default class AgendaView extends View {
   dayGrid: DayGrid // the "all-day" subcomponent. if all-day is turned off, this will be null
 
   scroller: ScrollComponent
-  axisWidth: any // the width of the time axis running down the side
 
   // reselectors
   filterEventsForTimeGrid: any
@@ -157,15 +156,6 @@ export default class AgendaView extends View {
   }
 
 
-  // Generates an HTML attribute string for setting the width of the axis, if it is known
-  axisStyleAttr() {
-    if (this.axisWidth != null) {
-      return 'style="width:' + this.axisWidth + 'px"'
-    }
-    return ''
-  }
-
-
   /* Render Delegation
   ------------------------------------------------------------------------------------------------------------------*/
 
@@ -246,8 +236,8 @@ export default class AgendaView extends View {
     let scrollerHeight
     let scrollbarWidths
 
-    // make all axis cells line up, and record the width so newly created axis cells will have it
-    this.axisWidth = matchCellWidths(findElements(this.el, '.fc-axis'))
+    // make all axis cells line up
+    matchCellWidths(findElements(this.el, '.fc-axis'))
 
     // hack to give the view some height prior to timeGrid's columns being rendered
     // TODO: separate setting height from scroller VS timeGrid.
@@ -371,33 +361,31 @@ agendaTimeGridMethods = {
       weekText = dateEnv.format(weekStart, WEEK_HEADER_FORMAT)
 
       return '' +
-        '<th class="fc-axis fc-week-number ' + theme.getClass('widgetHeader') + '" ' + (view as AgendaView).axisStyleAttr() + '>' +
+        '<th class="fc-axis fc-week-number ' + theme.getClass('widgetHeader') + '">' +
           buildGotoAnchorHtml( // aside from link, important for matchCellWidths
             view,
             { date: weekStart, type: 'week', forceOff: dayTable.colCnt > 1 },
             htmlEscape(weekText) // inner HTML
           ) +
         '</th>'
     } else {
-      return '<th class="fc-axis ' + theme.getClass('widgetHeader') + '" ' + (view as AgendaView).axisStyleAttr() + '></th>'
+      return '<th class="fc-axis ' + theme.getClass('widgetHeader') + '"></th>'
     }
   },
 
 
   // Generates the HTML that goes before the bg of the TimeGrid slot area. Long vertical column.
   renderBgIntroHtml(this: TimeGrid) {
-    let { view, theme } = this
+    let { theme } = this
 
-    return '<td class="fc-axis ' + theme.getClass('widgetContent') + '" ' + (view as AgendaView).axisStyleAttr() + '></td>'
+    return '<td class="fc-axis ' + theme.getClass('widgetContent') + '"></td>'
   },
 
 
   // Generates the HTML that goes before all other types of cells.
   // Affects content-skeleton, mirror-skeleton, highlight-skeleton for both the time-grid and day-grid.
   renderIntroHtml(this: TimeGrid) {
-    let { view } = this
-
-    return '<td class="fc-axis" ' + (view as AgendaView).axisStyleAttr() + '></td>'
+    return '<td class="fc-axis"></td>'
   }
 
 }
@@ -411,7 +399,7 @@ agendaDayGridMethods = {
     let { view, theme } = this
 
     return '' +
-      '<td class="fc-axis ' + theme.getClass('widgetContent') + '" ' + (view as AgendaView).axisStyleAttr() + '>' +
+      '<td class="fc-axis ' + theme.getClass('widgetContent') + '">' +
         '<span>' + // needed for matchCellWidths
           getAllDayHtml(view) +
         '</span>' +
@@ -422,9 +410,7 @@ agendaDayGridMethods = {
   // Generates the HTML that goes before all other types of cells.
   // Affects content-skeleton, mirror-skeleton, highlight-skeleton for both the time-grid and day-grid.
   renderIntroHtml(this: DayGrid) {
-    let { view } = this
-
-    return '<td class="fc-axis" ' + (view as AgendaView).axisStyleAttr() + '></td>'
+    return '<td class="fc-axis"></td>'
   }
 
 }

src/agenda/TimeGrid.ts

@@ -14,7 +14,6 @@ import { Seg } from '../component/DateComponent'
 import StandardDateComponent from '../component/StandardDateComponent'
 import OffsetTracker from '../common/OffsetTracker'
 import { Hit } from '../interactions/HitDragging'
-import AgendaView from './AgendaView'
 import DayTableHeader from '../basic/DayTableHeader'
 import DayBgRow from '../basic/DayBgRow'
 
@@ -271,7 +270,7 @@ export default class TimeGrid extends StandardDateComponent {
 
   // Generates the HTML for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL.
   renderSlatRowHtml() {
-    let { view, dateEnv, theme, isRtl } = this
+    let { dateEnv, theme, isRtl } = this
     let dateProfile = this.props.dateProfile
     let html = ''
     let dayStart = startOfDay(dateProfile.renderRange.start)
@@ -287,7 +286,7 @@ export default class TimeGrid extends StandardDateComponent {
       isLabeled = wholeDivideDurations(slotIterator, this.labelInterval) !== null
 
       axisHtml =
-        '<td class="fc-axis fc-time ' + theme.getClass('widgetContent') + '" ' + (view as AgendaView).axisStyleAttr() + '>' +
+        '<td class="fc-axis fc-time ' + theme.getClass('widgetContent') + '">' +
           (isLabeled ?
             '<span>' + // for matchCellWidths
               htmlEscape(dateEnv.format(slotDate, this.labelFormat)) +

src/basic/BasicView.ts

@@ -34,8 +34,6 @@ export default class BasicView extends View {
   dayGrid: DayGrid // the main subcomponent that does most of the heavy lifting
   colWeekNumbersVisible: boolean
 
-  weekNumberWidth: any // width of all the week-number cells running down the side
-
 
   initialize() {
 
@@ -126,15 +124,6 @@ export default class BasicView extends View {
   }
 
 
-  // Generates an HTML attribute string for setting the width of the week number column, if it is known
-  weekNumberStyleAttr() {
-    if (this.weekNumberWidth != null) {
-      return 'style="width:' + this.weekNumberWidth + 'px"'
-    }
-    return ''
-  }
-
-
   // Determines whether each row should have a constant height
   hasRigidRows() {
     let eventLimit = this.opt('eventLimit')
@@ -177,10 +166,7 @@ export default class BasicView extends View {
 
     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(
-        findElements(this.el, '.fc-week-number')
-      )
+      matchCellWidths(findElements(this.el, '.fc-week-number'))
     }
 
     // reset all heights to be natural
@@ -284,7 +270,7 @@ function makeDayGridSubclass(SuperClass) {
 
       if ((view as BasicView).colWeekNumbersVisible) {
         return '' +
-          '<th class="fc-week-number ' + theme.getClass('widgetHeader') + '" ' + (view as BasicView).weekNumberStyleAttr() + '>' +
+          '<th class="fc-week-number ' + theme.getClass('widgetHeader') + '">' +
             '<span>' + // needed for matchCellWidths
               htmlEscape(this.opt('weekLabel')) +
             '</span>' +
@@ -302,7 +288,7 @@ function makeDayGridSubclass(SuperClass) {
 
       if ((view as BasicView).colWeekNumbersVisible) {
         return '' +
-          '<td class="fc-week-number" ' + (view as BasicView).weekNumberStyleAttr() + '>' +
+          '<td class="fc-week-number">' +
             buildGotoAnchorHtml( // aside from link, important for matchCellWidths
               view,
               { date: weekStart, type: 'week', forceOff: dayTable.colCnt === 1 },
@@ -320,8 +306,7 @@ function makeDayGridSubclass(SuperClass) {
       let { view, theme } = this
 
       if ((view as BasicView).colWeekNumbersVisible) {
-        return '<td class="fc-week-number ' + theme.getClass('widgetContent') + '" ' +
-          (view as BasicView).weekNumberStyleAttr() + '></td>'
+        return '<td class="fc-week-number ' + theme.getClass('widgetContent') + '"></td>'
       }
 
       return ''
@@ -334,7 +319,7 @@ function makeDayGridSubclass(SuperClass) {
       let { view } = this
 
       if ((view as BasicView).colWeekNumbersVisible) {
-        return '<td class="fc-week-number" ' + (view as BasicView).weekNumberStyleAttr() + '></td>'
+        return '<td class="fc-week-number"></td>'
       }
 
       return ''

src/util/misc.ts

@@ -121,6 +121,10 @@ export function undistributeHeight(els: HTMLElement[]) {
 export function matchCellWidths(els: HTMLElement[]) {
   let maxInnerWidth = 0
 
+  els.forEach(function(el) {
+    el.style.width = ''
+  })
+
   els.forEach(function(el) {
     let innerEl = el.firstChild // hopefully an element
     if (innerEl instanceof HTMLElement) {