readjust classnames and whatnot

packages-premium

@@ -1 +1 @@
-Subproject commit 46615809ed45a7ade08afdcd930e631382365a2b
+Subproject commit bc94e439e8571c4b526f7b5ed15f3ae303d03835

packages/__tests__/src/legacy/TimeGrid-render.js

@@ -17,14 +17,14 @@ describe('Agenda view rendering', function() {
       let dayGridWrapper = viewWrapper.dayGrid
       let timeGridWrapper = viewWrapper.timeGrid
 
-      expect(headerWrapper.getAxisEl())
+      expect(viewWrapper.getHeaderAxisEl())
         .toBeLeftOf(headerWrapper.getCellEls()[0])
 
-      expect(dayGridWrapper.getAxisEls()[0])
+      expect(viewWrapper.getAllDayAxisEl())
         .toBeLeftOf(dayGridWrapper.getAllDayEls()[0])
 
       expect(timeGridWrapper.getSlotAxisEls()[0])
-        .toBeLeftOf(timeGridWrapper.getSlotNonAxisEls()[0])
+        .toBeLeftOf(timeGridWrapper.getSlotLaneEls()[0])
     })
   })
 
@@ -40,14 +40,14 @@ describe('Agenda view rendering', function() {
       let dayGridWrapper = viewWrapper.dayGrid
       let timeGridWrapper = viewWrapper.timeGrid
 
-      expect(headerWrapper.getAxisEl())
+      expect(viewWrapper.getHeaderAxisEl())
         .toBeRightOf(headerWrapper.getCellEls()[0])
 
-      expect(dayGridWrapper.getAxisEls()[0])
+      expect(viewWrapper.getAllDayAxisEl())
         .toBeRightOf(dayGridWrapper.getAllDayEls()[0])
 
       expect(timeGridWrapper.getSlotAxisEls()[0])
-        .toBeRightOf(timeGridWrapper.getSlotNonAxisEls()[0])
+        .toBeRightOf(timeGridWrapper.getSlotLaneEls()[0])
     })
   })
 })

packages/__tests__/src/legacy/background-events.js

@@ -80,28 +80,6 @@ describe('background events', function() {
         expect(dayGridWrapper.getEventEls().length).toBe(0)
       })
 
-      describe('when weekNumbers', function() {
-
-        it('renders to right of week numbers', function() {
-          let calendar = initCalendar({
-            weekNumbers: true,
-            events: [ {
-              start: '2014-11-02',
-              end: '2014-11-09',
-              rendering: 'background'
-            } ]
-          })
-
-          let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid
-          let allBgEls = dayGridWrapper.getBgEventEls()
-
-          expect(allBgEls.length).toBe(1)
-          expect(dayGridWrapper.getBgEventEls(1).length).toBe(1)
-          expect(allBgEls).toBeRightOf(dayGridWrapper.getWeekCell(1))
-          expect(dayGridWrapper.getEventEls().length).toBe(0)
-        })
-      })
-
       it('renders "business hours" on whole days', function() {
         let calendar = initCalendar({
           businessHours: true
@@ -152,27 +130,6 @@ describe('background events', function() {
         expect(allBgEls[1]).toBeRightOf(dayGridWrapper.getDayEl('2014-11-12'))
         expect(dayGridWrapper.getEventEls().length).toBe(0)
       })
-
-      describe('when weekNumbers', function() {
-        it('renders to left of week numbers', function() {
-          let calendar = initCalendar({
-            weekNumbers: true,
-            events: [ {
-              start: '2014-11-02',
-              end: '2014-11-09',
-              rendering: 'background'
-            } ]
-          })
-
-          let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid
-          let allBgEls = dayGridWrapper.getBgEventEls()
-
-          expect(allBgEls.length).toBe(1)
-          expect(dayGridWrapper.getBgEventEls(1).length).toBe(1)
-          expect(allBgEls[0]).toBeLeftOf(dayGridWrapper.getWeekCell(1))
-          expect(dayGridWrapper.getEventEls().length).toBe(0)
-        })
-      })
     })
 
     describe('when inverse', function() {

packages/__tests__/src/legacy/dayNames.js

@@ -2,7 +2,7 @@ import { removeLtrCharCodes } from '../lib/string'
 import { addDays } from '@fullcalendar/core'
 import { parseUtcDate } from '../lib/date-parsing'
 import DayGridViewWrapper from '../lib/wrappers/DayGridViewWrapper'
-import DayHeaderWrapper from '../lib/wrappers/DayHeaderWrapper'
+import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
 
 
 describe('day names', function() {
@@ -23,7 +23,7 @@ describe('day names', function() {
         locale: 'en'
       })
 
-      DayHeaderWrapper.DOW_CLASSNAMES.forEach(function(dowClassName, index) {
+      CalendarWrapper.DOW_CLASSNAMES.forEach(function(dowClassName, index) {
         var dayDate = addDays(sundayDate, index)
         var dayText = removeLtrCharCodes(
           dayDate.toLocaleString('en', { weekday: 'long', timeZone: 'UTC' })
@@ -42,7 +42,7 @@ describe('day names', function() {
     $.each(locales, function(index, locale) {
       describe('when locale is ' + locale, function() {
 
-        DayHeaderWrapper.DOW_CLASSNAMES.forEach(function(dowClassName, index) {
+        CalendarWrapper.DOW_CLASSNAMES.forEach(function(dowClassName, index) {
           var dayDate = addDays(sundayDate, index)
           var dayText = removeLtrCharCodes(
             dayDate.toLocaleString(locale, { weekday: 'long', timeZone: 'UTC' })

packages/__tests__/src/legacy/eventLimit-popover.js

@@ -232,16 +232,12 @@ describe('eventLimit popover', function() {
         let $lunch1EventEl = $('.lunch1-event', popoverEl)
         let $lunch2EventEl = $('.lunch2-event', popoverEl)
 
-        expect($longEventEl).toHaveClass(CalendarWrapper.EVENT_IS_NOT_START_CLASSNAME)
-        expect($longEventEl).toHaveClass(CalendarWrapper.EVENT_IS_NOT_END_CLASSNAME)
         expect($longEventEl).not.toHaveClass(CalendarWrapper.EVENT_IS_START_CLASSNAME)
         expect($longEventEl).not.toHaveClass(CalendarWrapper.EVENT_IS_END_CLASSNAME);
 
         [ $meetingEventEl, $lunch1EventEl, $lunch2EventEl ].forEach(function($el) {
           expect($el).toHaveClass(CalendarWrapper.EVENT_IS_START_CLASSNAME)
           expect($el).toHaveClass(CalendarWrapper.EVENT_IS_END_CLASSNAME)
-          expect($el).not.toHaveClass(CalendarWrapper.EVENT_IS_NOT_START_CLASSNAME)
-          expect($el).not.toHaveClass(CalendarWrapper.EVENT_IS_NOT_END_CLASSNAME)
         })
 
         done()

packages/__tests__/src/legacy/navLinks.js

@@ -105,23 +105,13 @@ describe('navLinks', function() {
         })
 
         it('moves to week', function() {
-          let dateClickSpy = spyOnCalendarCallback('dateClick')
-          let calendar = initCalendar()
-          let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid
-
-          $.simulateMouseClick(dayGridWrapper.getWeekNavLinkEls(false)[1])
-          expectWeekView(calendar, 'timeGridWeek', tz.parseDate('2016-08-07'))
-          expect(dateClickSpy).not.toHaveBeenCalled()
-        })
-
-        it('moves to week with within-day rendering', function() {
           let dateClickSpy = spyOnCalendarCallback('dateClick')
           let calendar = initCalendar({
             weekNumbersWithinDays: true
           })
           let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid
 
-          $.simulateMouseClick(dayGridWrapper.getWeekNavLinkEls(true)[1])
+          $.simulateMouseClick(dayGridWrapper.getWeekNavLinkEls()[1])
           expectWeekView(calendar, 'timeGridWeek', tz.parseDate('2016-08-07'))
           expect(dateClickSpy).not.toHaveBeenCalled()
         })
@@ -184,9 +174,9 @@ describe('navLinks', function() {
       let calendar = initCalendar({
         weekNumbers: true
       })
-      let headerWrapper = new TimeGridViewWrapper(calendar).header
+      let viewWrapper = new TimeGridViewWrapper(calendar)
 
-      $.simulateMouseClick(headerWrapper.getWeekNavLinkEl())
+      $.simulateMouseClick(viewWrapper.getHeaderWeekNumberLink())
       expectWeekView(calendar, 'timeGridWeek', '2016-08-14')
       expect(dateClickSpy).not.toHaveBeenCalled()
     })

packages/__tests__/src/legacy/timegrid-view.js

@@ -1,5 +1,5 @@
 import TimeGridViewWrapper from '../lib/wrappers/TimeGridViewWrapper'
-import DayHeaderWrapper from '../lib/wrappers/DayHeaderWrapper'
+import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
 
 describe('timeGrid view rendering', function() {
   pushOptions({
@@ -8,13 +8,13 @@ describe('timeGrid view rendering', function() {
 
   it('should have have days ordered sun to sat', function() {
     let calendar = initCalendar()
-    let headerWrapper = new TimeGridViewWrapper(calendar).header
-    let axisEl = headerWrapper.getAxisEl()
-    let thEls = headerWrapper.getCellEls()
+    let viewWrapper = new TimeGridViewWrapper(calendar)
+    let axisEl = viewWrapper.getHeaderAxisEl()
+    let thEls = viewWrapper.header.getCellEls()
 
     expect(axisEl).toBeTruthy()
 
-    let dowClassNames = DayHeaderWrapper.DOW_CLASSNAMES
+    let dowClassNames = CalendarWrapper.DOW_CLASSNAMES
 
     for (let i = 0; i < dowClassNames.length; i++) {
       expect(thEls[i]).toHaveClass(dowClassNames[i])

packages/__tests__/src/legacy/weekLabel.js

@@ -1,13 +1,12 @@
 import esLocale from '@fullcalendar/core/locales/es'
-import DayGridViewWrapper from '../lib/wrappers/DayGridViewWrapper'
-import TimeGridViewWrapper from '../lib/wrappers/TimeGridViewWrapper';
+import TimeGridViewWrapper from '../lib/wrappers/TimeGridViewWrapper'
 
 describe('weekText', function() { // TODO: rename file
   pushOptions({
     weekNumbers: true
   })
 
-  ;[ 'dayGridWeek', 'timeGridWeek' ].forEach(function(viewName) {
+  ;[ 'timeGridWeek' ].forEach(function(viewName) {
 
     describe('when views is ' + viewName, function() {
       pushOptions({
@@ -45,9 +44,8 @@ describe('weekText', function() { // TODO: rename file
 
 
     function expectWeekNumberTitle(calendar, title) {
-      let ViewWrapper = viewName.match(/^dayGrid/) ? DayGridViewWrapper : TimeGridViewWrapper
-      let headerWrapper = new ViewWrapper(calendar).header
-      let text = headerWrapper.getWeekNumberTitle()
+      let viewWrapper = new TimeGridViewWrapper(calendar)
+      let text = viewWrapper.getHeaderWeekText()
         .replace(/\d/g, '').trim() // remove the number
 
       expect(text).toBe(title)

packages/__tests__/src/legacy/weekNumberCalculation.js

@@ -14,7 +14,7 @@ describe('weekNumberCalculation', function() {
 
     let getWeekNumberText = viewName.match(/^dayGrid/)
       ? (calendar) => new DayGridViewWrapper(calendar).dayGrid.getWeekNumberText(0)
-      : (calendar) => new TimeGridViewWrapper(calendar).header.getWeekNumberTitle()
+      : (calendar) => new TimeGridViewWrapper(calendar).getHeaderWeekText()
 
     it('should display the American standard when using \'local\'', function() {
       let calendar = initCalendar({

packages/__tests__/src/legacy/weekNumbers.js

@@ -1,4 +1,5 @@
-import { getLegacyWeekNumberCounts } from "../lib/wrappers/DayGridWrapper"
+import DayGridViewWrapper from '../lib/wrappers/DayGridViewWrapper'
+import TimeGridViewWrapper from '../lib/wrappers/TimeGridViewWrapper'
 
 describe('weekNumbers', function() {
 
@@ -9,354 +10,74 @@ describe('weekNumbers', function() {
     })
 
     describe('with default weekNumbers', function() { // which is false!
-
-      describe('and default weekNumbersWithinDays', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar()
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to false', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar({
-            weekNumbersWithinDays: false
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
+      it('should not display week numbers at all', function() {
+        let calendar = initCalendar()
+        let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid
+        expect(dayGridWrapper.getWeekNumberEls().length).toEqual(0)
       })
-
-      describe('and weekNumbersWithinDays set to true', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar({
-            weekNumbersWithinDays: true
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
     })
 
     describe('with weekNumbers to false', function() {
-
       pushOptions({
         weekNumbers: false
       })
 
-      describe('and default weekNumbersWithinDays', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar({
-            weekNumbersWithinDays: true
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to false', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar({
-            weekNumbersWithinDays: false
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to true', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar({
-            weekNumbersWithinDays: true
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
+      it('should not display week numbers at all', function() {
+        let calendar = initCalendar()
+        let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid
+        expect(dayGridWrapper.getWeekNumberEls().length).toEqual(0)
       })
-
     })
 
     describe('with weekNumbers to true', function() {
-
       pushOptions({
         weekNumbers: true
       })
 
-      describe('and default weekNumbersWithinDays', function() {
-        it('should display week numbers along the side only', function() {
-          initCalendar()
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.colWeekNumbers).toEqual(6)
-          expect(counts.cellWeekNumbers).toEqual(0)
-          expect(counts.cornerWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to false', function() {
-        it('should display week numbers along the side only', function() {
-          initCalendar({
-            weekNumbersWithinDays: false
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.colWeekNumbers).toEqual(6)
-          expect(counts.cellWeekNumbers).toEqual(0)
-          expect(counts.cornerWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to true', function() {
-        it('should display week numbers in the day cells only', function() {
-          initCalendar({
-            weekNumbersWithinDays: true
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.colWeekNumbers).toEqual(0)
-          expect(counts.cellWeekNumbers).toEqual(6)
-          expect(counts.cornerWeekNumbers).toEqual(0)
-        })
+      it('should display week numbers in the day cells only', function() {
+        let calendar = initCalendar()
+        let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid
+        expect(dayGridWrapper.getWeekNumberEls().length).toBeGreaterThan(0)
       })
-
-    })
-
-  })
-
-  describe('when using dayGridWeek view', function() {
-
-    pushOptions({
-      defaultView: 'dayGridWeek'
-    })
-
-    describe('with default weekNumbers', function() {
-
-      describe('and default weekNumbersWithinDays', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar()
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to false', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar({
-            weekNumbersWithinDays: false
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to true', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar({
-            weekNumbersWithinDays: true
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
-    })
-
-    describe('with weekNumbers to false', function() {
-
-      pushOptions({
-        weekNumbers: false
-      })
-
-      describe('and default weekNumbersWithinDays', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar()
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to false', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar({
-            weekNumbersWithinDays: false
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to true', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar({
-            weekNumbersWithinDays: true
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
-    })
-
-    describe('with weekNumbers to true', function() {
-
-      pushOptions({
-        weekNumbers: true
-      })
-
-      describe('and default weekNumbersWithinDays', function() {
-        it('should display week numbers along the side only', function() {
-          initCalendar()
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.colWeekNumbers).toEqual(1)
-          expect(counts.cellWeekNumbers).toEqual(0)
-          expect(counts.cornerWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to false', function() {
-        it('should display week numbers along the side only', function() {
-          initCalendar({
-            weekNumbersWithinDays: false
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.colWeekNumbers).toEqual(1)
-          expect(counts.cellWeekNumbers).toEqual(0)
-          expect(counts.cornerWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to true', function() {
-        it('should display week numbers in the day cells only', function() {
-          initCalendar({
-            weekNumbersWithinDays: true
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.colWeekNumbers).toEqual(0)
-          expect(counts.cellWeekNumbers).toEqual(1)
-          expect(counts.cornerWeekNumbers).toEqual(0)
-        })
-      })
-
     })
 
   })
 
   describe('when using an timeGrid view', function() {
-
     pushOptions({
       defaultView: 'timeGridWeek'
     })
 
     describe('with default weekNumbers', function() {
-
-      describe('and default weekNumbersWithinDays', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar()
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to false', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar({
-            weekNumbersWithinDays: false
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
+      it('should not display week numbers at all', function() {
+        let calendar = initCalendar()
+        let viewWrapper = new TimeGridViewWrapper(calendar)
+        expect(viewWrapper.getHeaderWeekNumberLink()).toBeFalsy()
       })
-
-      describe('and weekNumbersWithinDays set to true', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar({
-            weekNumbersWithinDays: true
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
     })
 
     describe('with weekNumbers to false', function() {
-
       pushOptions({
         weekNumbers: false
       })
 
-      describe('and default weekNumbersWithinDays', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar()
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to false', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar({
-            weekNumbersWithinDays: false
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to true', function() {
-        it('should not display week numbers at all', function() {
-          initCalendar({
-            weekNumbersWithinDays: true
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(0)
-        })
+      it('should not display week numbers at all', function() {
+        let calendar = initCalendar()
+        let viewWrapper = new TimeGridViewWrapper(calendar)
+        expect(viewWrapper.getHeaderWeekNumberLink()).toBeFalsy()
       })
-
     })
 
     describe('with weekNumbers to true', function() {
-
       pushOptions({
         weekNumbers: true
       })
 
-      describe('and default weekNumbersWithinDays', function() {
-        it('should display week numbers in the top left corner only', function() {
-          initCalendar()
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(1)
-          expect(counts.colWeekNumbers).toEqual(0)
-          expect(counts.cellWeekNumbers).toEqual(0)
-          expect(counts.cornerWeekNumbers).toEqual(1)
-        })
+      it('should display week numbers in the top left corner only', function() {
+        let calendar = initCalendar()
+        let viewWrapper = new TimeGridViewWrapper(calendar)
+        expect(viewWrapper.getHeaderWeekNumberLink()).toBeTruthy()
       })
-
-      describe('and weekNumbersWithinDays set to false', function() {
-        it('should display week numbers in the top left corner only', function() {
-          initCalendar({
-            weekNumbersWithinDays: false
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(1)
-          expect(counts.colWeekNumbers).toEqual(0)
-          expect(counts.cellWeekNumbers).toEqual(0)
-          expect(counts.cornerWeekNumbers).toEqual(1)
-        })
-      })
-
-      describe('and weekNumbersWithinDays set to true', function() {
-        it('should display week numbers in the top left corner only', function() {
-          initCalendar({
-            weekNumbersWithinDays: true
-          })
-          let counts = getLegacyWeekNumberCounts()
-          expect(counts.allWeekNumbers).toEqual(1)
-          expect(counts.colWeekNumbers).toEqual(0)
-          expect(counts.cellWeekNumbers).toEqual(0)
-          expect(counts.cornerWeekNumbers).toEqual(1)
-        })
-      })
-
     })
 
   })

packages/__tests__/src/lib/wrappers/CalendarWrapper.ts

@@ -12,6 +12,8 @@ export default class CalendarWrapper {
   static EVENT_START_RESIZER_CLASSNAME = 'fc-event-resizer-start'
   static EVENT_END_RESIZER_CLASSNAME = 'fc-event-resizer-end'
   static BG_EVENT_CLASSNAME = 'fc-bgevent'
+  static DAY_PAST_CLASSNAME = 'fc-day-past'
+  static DAY_FUTURE_CLASSNAME = 'fc-day-future'
   static TODAY_CLASSNAME = 'fc-day-today'
   static DOW_CLASSNAMES = [ 'fc-day-sun', 'fc-day-mon', 'fc-day-tue', 'fc-day-wed', 'fc-day-thu', 'fc-day-fri', 'fc-day-sat' ]
   static LTR_CLASSNAME = 'fc-dir-ltr'
@@ -78,11 +80,11 @@ export default class CalendarWrapper {
 
   getEventElInfo(eventEl: HTMLElement) {
     return {
-      isStart: eventEl.classList.contains('fc-start'),
-      isEnd: eventEl.classList.contains('fc-end'),
+      isStart: eventEl.classList.contains(CalendarWrapper.EVENT_IS_START_CLASSNAME),
+      isEnd: eventEl.classList.contains(CalendarWrapper.EVENT_IS_END_CLASSNAME),
       timeText: $(eventEl).find('.' + CalendarWrapper.EVENT_TIME_CLASSNAME).text() || '',
-      titleEl: eventEl.querySelector('.fc-title'),
-      resizerEl: eventEl.querySelector('.fc-resizer')
+      titleEl: eventEl.querySelector('.' + CalendarWrapper.EVENT_TITLE_CLASSNAME),
+      resizerEl: eventEl.querySelector('.' + CalendarWrapper.EVENT_RESIZER_CLASSNAME)
     }
   }
 

packages/__tests__/src/lib/wrappers/DayGridWrapper.ts

@@ -40,10 +40,7 @@ export default class DayGridWrapper {
 
 
   getDayNumberText(date) {
-    if (typeof date === 'string') {
-      date = new Date(date)
-    }
-    return $('.fc-day-top[data-date="' + formatIsoDay(date) + '"]', this.el).text()
+    return $(this.getDayEl(date).querySelector('.fc-daygrid-day-top')).text()
   }
 
 
@@ -58,19 +55,15 @@ export default class DayGridWrapper {
   }
 
 
+  // example: gets all the Mondays in the first row of days
   // TODO: discourage use
   getDowEls(dayAbbrev) {
-    return findElements(this.el, `.fc-row:first-child td.fc-day.fc-${dayAbbrev}`)
+    return findElements(this.el, `tr:first-child > td.fc-day-${dayAbbrev}`)
   }
 
 
   getDisabledDayEls() {
-    return findElements(this.el, '.fc-bg .fc-disabled-day')
-  }
-
-
-  getAxisEls() {
-    return findElements(this.el, '.fc-axis')
+    return findElements(this.el, '.fc-day-disabled')
   }
 
 
@@ -84,28 +77,28 @@ export default class DayGridWrapper {
   }
 
 
-  getWeekNavLinkEls(isEmbedded) { // along the sides of the row
-    return isEmbedded
-      ? findElements(this.el, '.fc-day-top a.fc-week-number')
-      : findElements(this.el, '.fc-week-number a')
+  getWeekNavLinkEls() {
+    return findElements(this.el, '.fc-daygrid-week-number[data-navlink]')
+  }
+
+
+  getWeekNumberEls() {
+    return findElements(this.el, '.fc-daygrid-week-number')
   }
 
 
-  getWeekCell(rowIndex) {
-    return this.el.querySelector(`.fc-row:nth-child(${rowIndex + 1}) td.fc-week-number`)
+  getWeekNumberEl(rowIndex) {
+    return this.getRowEl(rowIndex).querySelector('.fc-daygrid-week-number')
   }
 
 
   getWeekNumberText(rowIndex) {
-    return $(this.el.querySelector(`.fc-row:nth-child(${rowIndex + 1}) .fc-content-skeleton thead td.fc-week-number`)).text()
+    return $(this.getWeekNumberEl(rowIndex)).text()
   }
 
 
   getNavLinkEl(date) {
-    if (typeof date === 'string') {
-      date = new Date(date)
-    }
-    return this.el.querySelector(`.fc-day-top[data-date="${formatIsoDay(date)}"] a:not(.fc-week-number)`)
+    return this.getDayEl(date).querySelector('.fc-daygrid-day-number[data-navlink]')
   }
 
 
@@ -129,7 +122,7 @@ export default class DayGridWrapper {
 
 
   getMorePopoverHeaderEl() {
-    return this.getMorePopoverEl().querySelector('.fc-header') as HTMLElement
+    return this.getMorePopoverEl().querySelector('.fc-popover-header') as HTMLElement
   }
 
 
@@ -145,7 +138,7 @@ export default class DayGridWrapper {
 
   getMorePopoverEventTitles() {
     return this.getMorePopoverEventEls().map((el) => {
-      return $(el.querySelector('.fc-title')).text()
+      return $(el.querySelector('.fc-event-title')).text()
     })
   }
 
@@ -156,22 +149,22 @@ export default class DayGridWrapper {
 
 
   closeMorePopover() {
-    $(this.getMorePopoverEl().querySelector('.fc-close')).simulate('click')
+    $(this.getMorePopoverEl().querySelector('.fc-popover-close')).simulate('click')
   }
 
 
   getMorePopoverTitle() {
-    return $(this.getMorePopoverEl().querySelector('.fc-header .fc-title')).text()
+    return $(this.getMorePopoverEl().querySelector('.fc-popover-title')).text()
   }
 
 
   getRowEl(i) {
-    return this.el.querySelector(`.fc-row:nth-child(${i + 1})`) as HTMLElement // nth-child is 1-indexed!
+    return this.el.querySelector(`tr:nth-child(${i + 1})`) as HTMLElement // nth-child is 1-indexed!
   }
 
 
   getRowEls() {
-    return findElements(this.el, '.fc-row')
+    return findElements(this.el, 'tr')
   }
 
 
@@ -317,13 +310,3 @@ export default class DayGridWrapper {
   }
 
 }
-
-
-export function getLegacyWeekNumberCounts() {
-  return {
-    allWeekNumbers: $('.fc-week-number').length,
-    colWeekNumbers: $('.fc-content-skeleton thead td.fc-week-number').length,
-    cellWeekNumbers: $('.fc-content-skeleton thead .fc-day-top span.fc-week-number').length, // within-the-cell
-    cornerWeekNumbers: $('.fc-head .fc-axis.fc-week-number').length
-  }
-}

packages/__tests__/src/lib/wrappers/DayHeaderWrapper.ts

@@ -6,9 +6,6 @@ import CalendarWrapper from './CalendarWrapper'
 
 export default class DayHeaderWrapper {
 
-  static DOW_CLASSNAMES = [ 'fc-sun', 'fc-mon', 'fc-tue', 'fc-wed', 'fc-thu', 'fc-fri', 'fc-sat' ]
-
-
   constructor(public el: HTMLElement) {
   }
 
@@ -51,31 +48,6 @@ export default class DayHeaderWrapper {
   }
 
 
-  getAxisEl() {
-    return this.el.querySelector('.fc-axis')
-  }
-
-
-  getAxisText() { // not used?
-    return $(this.getAxisEl()).text()
-  }
-
-
-  getWeekNumberEl() {
-    return this.el.querySelector('.fc-week-number')
-  }
-
-
-  getWeekNavLinkEl() {
-    return this.el.querySelector('.fc-week-number a')
-  }
-
-
-  getWeekNumberTitle() {
-    return $(this.getWeekNumberEl()).text()
-  }
-
-
   getNavLinkEls() {
     return findElements(this.el, '.fc-col-header-cell[data-date] a')
   }

packages/__tests__/src/lib/wrappers/ListViewWrapper.ts

@@ -9,7 +9,7 @@ export default class ListViewWrapper extends ViewWrapper {
 
 
   constructor(calendar: Calendar) {
-    super(calendar, 'fc-list-view')
+    super(calendar, 'fc-list')
   }
 
 

packages/__tests__/src/lib/wrappers/TimeGridViewWrapper.ts

@@ -32,8 +32,23 @@ export default class TimeGridViewWrapper extends ViewWrapper {
   }
 
 
+  getHeaderAxisEl() {
+    return this.el.querySelector('.fc-col-header .fc-timegrid-axis')
+  }
+
+
+  getHeaderWeekNumberLink() {
+    return this.getHeaderAxisEl().querySelector('a')
+  }
+
+
+  getHeaderWeekText() { // the title
+    return $(this.getHeaderWeekNumberLink()).text()
+  }
+
+
   getAllDayAxisEl() {
-    return this.el.querySelector('.fc-day-grid > .fc-row > .fc-bg .fc-axis')
+    return this.el.querySelector('.fc-daygrid-body .fc-timegrid-axis')
   }
 
 

packages/__tests__/src/lib/wrappers/TimeGridWrapper.ts

@@ -3,6 +3,7 @@ import { formatIsoDay, formatIsoTime, ensureDate } from '../datelib-utils'
 import { parseUtcDate } from '../date-parsing'
 import { getBoundingRect } from '../dom-geom'
 import { addPoints } from '../geom'
+import CalendarWrapper from './CalendarWrapper'
 
 
 export default class TimeGridWrapper {
@@ -27,8 +28,8 @@ export default class TimeGridWrapper {
   }
 
 
-  getSlotEls() { // TODO: rename "slat"
-    return findElements(this.el, '.fc-slats tr[data-time]')
+  getSlotEls() {
+    return findElements(this.el, '.fc-timegrid-slot-label[data-time]')
   }
 
 
@@ -37,18 +38,18 @@ export default class TimeGridWrapper {
   }
 
 
-  getSlotAxisEls() {
-    return findElements(this.el, '.fc-slats tr[data-time] .fc-axis')
+  getSlotAxisEls() { // TODO: rename to label
+    return findElements(this.el, '.fc-timegrid-slot-label[data-time]')
   }
 
 
-  getSlotNonAxisEls() {
-    return findElements(this.el, '.fc-slats tr[data-time] td:not(.fc-axis)')
+  getSlotLaneEls() {
+    return findElements(this.el, '.fc-timegrid-slot-lane[data-time]')
   }
 
 
   getSlotElByIndex(index) { // TODO: rename "slat"
-    return $(`.fc-slats tr:eq(${index})`, this.el).get()
+    return $(`.fc-timegrid-slots tr:eq(${index})`, this.el).get()
   }
 
 
@@ -57,7 +58,7 @@ export default class TimeGridWrapper {
     date = new Date(date.valueOf() + timeMs)
 
     if (date.getUTCDate() === 1) { // ensure no time overflow/underflow
-      return this.el.querySelector('.fc-slats tr[data-time="' + formatIsoTime(date) + '"]')
+      return this.el.querySelector('.fc-timegrid-slot-label[data-time="' + formatIsoTime(date) + '"]')
     } else {
       return null
     }
@@ -69,13 +70,18 @@ export default class TimeGridWrapper {
   }
 
 
+  getColEl(col) {
+    return this.el.querySelectorAll('.fc-timegrid-col')[col] as HTMLElement
+  }
+
+
   queryBgEventsInCol(col) {
-    return $(`.fc-content-skeleton td:not(.fc-axis):eq(${col}) .fc-bgevent`, this.el).get()
+    return findElements(this.getColEl(col), '.fc-bgevent')
   }
 
 
   queryNonBusinessSegsInCol(col) {
-    return $(`.fc-content-skeleton td:not(.fc-axis):eq(${col}) .fc-nonbusiness`, this.el).get()
+    return findElements(this.getColEl(col), '.fc-nonbusiness')
   }
 
 
@@ -86,13 +92,13 @@ export default class TimeGridWrapper {
 
   // TODO: discourage use
   getDowEls(dayAbbrev) {
-    return findElements(this.el, `.fc-day.fc-${dayAbbrev}`)
+    return findElements(this.el, `.fc-day-${dayAbbrev}`)
   }
 
 
   // for https://github.com/fullcalendar/fullcalendar-scheduler/issues/363
   isStructureValid() {
-    return Boolean(this.el.querySelector('.fc-content-skeleton'))
+    return Boolean(this.el.querySelector('.fc-timegrid-slots'))
   }
 
 
@@ -109,20 +115,20 @@ export default class TimeGridWrapper {
 
 
   getNowIndicatorArrowEl() {
-    return this.el.querySelector('.fc-now-indicator-arrow')
+    return this.el.querySelector('.fc-timegrid-now-indicator-arrow')
   }
 
 
   getNowIndicatorLineEl() {
-    return this.el.querySelector('.fc-now-indicator-line')
+    return this.el.querySelector('.fc-timegrid-now-indicator-line')
   }
 
 
   getTimeAxisInfo() {
-    return $('.fc-slats tr[data-time]', this.el).map(function(i, tr) {
+    return $('.fc-timegrid-slot-label[data-time]', this.el).map(function(i, td) {
       return {
-        text: $(tr).find('.fc-time').text(),
-        isMajor: !$(tr).hasClass('fc-minor')
+        text: $(td).text(),
+        isMajor: !$(td).hasClass('fc-timegrid-slot-minor')
       }
     }).get()
   }
@@ -155,7 +161,7 @@ export default class TimeGridWrapper {
     return new Promise((resolve) => {
       $(eventEl).simulate('mouseover') // resizer only shows on hover
 
-      let resizerEl = eventEl.querySelector('.fc-resizer')
+      let resizerEl = eventEl.querySelector('.' + CalendarWrapper.EVENT_RESIZER_CLASSNAME)
       let resizerPoint = getRectCenter(resizerEl.getBoundingClientRect())
       let origPoint = this.getPoint(origEndDate)
       let yCorrect = resizerPoint.top - origPoint.top
@@ -179,7 +185,7 @@ export default class TimeGridWrapper {
           localPoint: { left: '50%', top: '90%' },
           delay: 200,
           onRelease: () => {
-            let resizerEl = eventEl.querySelector('.fc-resizer')
+            let resizerEl = eventEl.querySelector('.' + CalendarWrapper.EVENT_RESIZER_CLASSNAME)
             let resizerPoint = getRectCenter(resizerEl.getBoundingClientRect())
             let origPoint = this.getPoint(origEndDate)
             let yCorrect = resizerPoint.top - origPoint.top
@@ -566,7 +572,7 @@ export default class TimeGridWrapper {
 
   getEventTimeTexts() {
     return this.getEventEls().map(function(eventEl) {
-      return $(eventEl.querySelector('.fc-time')).text()
+      return $(eventEl.querySelector('.fc-event-time')).text()
     })
   }
 
@@ -631,7 +637,7 @@ function checkEventRenderingMatch(expectedRects, eventEls) {
 
 export function queryEventElInfo(eventEl: HTMLElement) {
   return {
-    timeText: $(eventEl.querySelector('.fc-time')).text(),
-    isShort: eventEl.classList.contains('fc-short')
+    timeText: $(eventEl.querySelector('.fc-event-time')).text(),
+    isShort: eventEl.classList.contains('fc-timegrid-event-condensed')
   }
 }

packages/__tests__/src/lib/wrappers/ToolbarWrapper.ts

@@ -33,7 +33,7 @@ export default class ToolbarWrapper {
 
 
   getTitleText() {
-    return this.el.querySelector('h2').innerText.trim()
+    return (this.el.querySelector('.fc-toolbar-title') as HTMLElement).innerText.trim()
   }
 
 

packages/bootstrap/src/main.scss

@@ -37,10 +37,10 @@
 }
 
 
-/* TimeGrid Slats (lines that run horizontally)
+/* TimeGrid Slots (lines that run horizontally)
 --------------------------------------------------------------------------------------------------*/
 
-.fc-theme-bootstrap .fc-time-grid .fc-slats table {
+.fc-theme-bootstrap .fc-timegrid-slots table {
   /* some themes have background color. see through to slats */
   background: none;
 }

packages/core/src/Toolbar.tsx

@@ -74,7 +74,7 @@ class ToolbarSection extends BaseComponent<ToolbarSectionProps> {
             if (buttonName === 'title') {
               isOnlyButtons = false
               children.push(
-                <h2>{props.title}</h2>
+                <h2 className='fc-toolbar-title'>{props.title}</h2>
               )
 
             } else {

packages/list/src/ListView.tsx

@@ -37,7 +37,7 @@ export default class ListView extends DateComponent<ViewProps> {
 
 
   render(props: ViewProps, state: {}, context: ComponentContext) {
-    let extraClassNames = [ 'fc-list-view' ]
+    let extraClassNames = [ 'fc-list' ]
     let themeClassName = context.theme.getClass('bordered')
     if (themeClassName) {
       extraClassNames.push(themeClassName)

packages/list/src/main.scss

@@ -16,18 +16,14 @@
 
 /* view wrapper */
 
-.fc-dir-rtl .fc-list-view {
-  direction: rtl; /* unlike core views, leverage browser RTL */
-}
-
-.fc-theme-standard .fc-list-view {
+.fc-theme-standard .fc-list {
   border: 1px solid $fc-theme-standard-border-color;
   border: 1px solid var(--fc-theme-standard-border-color, $fc-theme-standard-border-color);
 }
 
 .fc .fc-list-table {
   width: 100%;
-  border-style: hidden; // kill outer border. already on fc-list-view
+  border-style: hidden; // kill outer border. already on fc-list
 
   td, th { // needs to be high precedence to overcome reset :(
     padding: 8px 14px;

packages/timegrid/src/TimeColsView.tsx

@@ -239,10 +239,9 @@ export default abstract class TimeColsView extends DateComponent<ViewProps> {
           {(rootElRef, classNames, innerElRef, innerContent) => (
             <th ref={rootElRef} class={[
               'fc-timegrid-axis',
-              'fc-scrollgrid-shrink',
-              'fc-week-number' // TODO: make part of WeekNumberRoot
+              'fc-scrollgrid-shrink'
             ].concat(classNames).join(' ')}>
-              <div class='fc-timegrid-axis-frame fc-scrollgrid-shrink-frame'>
+              <div class='fc-timegrid-axis-frame fc-scrollgrid-shrink-frame fc-timegrid-axis-frame-liquid'>
                 <a class='fc-timegrid-axis-cushion fc-scrollgrid-shrink-cushion' data-navlink={navLinkData} ref={innerElRef}>
                   {innerContent}
                 </a>