ソースを参照

calling Calendar::render after initial render causes bad sizing. fixes #4718. fixes #4723

Adam Shaw 6 年 前
コミット
b6c38eefbc

+ 1 - 0
CHANGELOG.md

@@ -2,6 +2,7 @@
 next
 next
 ----
 ----
 
 
+- calling Calendar::render after initial render causes bad sizing (#4718, #4723)
 - when list views destroyed, wouldn't call eventDestroy (#4727)
 - when list views destroyed, wouldn't call eventDestroy (#4727)
 - solve JS errors when switching views and using showNonCurrentDates (#4677, #4767)
 - solve JS errors when switching views and using showNonCurrentDates (#4677, #4767)
 - prevent unnecessary scrollbars from appearing in daygrid views (4624, #4732)
 - prevent unnecessary scrollbars from appearing in daygrid views (4624, #4732)

+ 26 - 0
packages/__tests__/src/view-render/rerender.js

@@ -0,0 +1,26 @@
+
+describe('rerendering a calendar', function() {
+
+  it('keeps sizing', function() {
+    initCalendar({
+      defaultView: 'dayGridMonth',
+      defaultDate: '2019-08-08',
+      eventLimit: 3,
+      events: [
+        { date: '2019-08-08', title: 'event' },
+        { date: '2019-08-08', title: 'event' },
+        { date: '2019-08-08', title: 'event' },
+        { date: '2019-08-08', title: 'event' }
+      ]
+    })
+
+    expect(getMoreLinkCnt()).toBe(1)
+    currentCalendar.render()
+    expect(getMoreLinkCnt()).toBe(1) // good way to test that sizing is maintained
+  })
+
+  function getMoreLinkCnt() {
+    return $('.fc-more').length
+  }
+
+})

+ 4 - 0
packages/core/src/Calendar.ts

@@ -442,6 +442,10 @@ export default class Calendar {
         theme: this.theme,
         theme: this.theme,
         options: this.optionsManager.computed
         options: this.optionsManager.computed
       }, this.el)
       }, this.el)
+
+      this.isViewUpdated = true
+      this.isDatesUpdated = true
+      this.isEventsUpdated = true
     }
     }
 
 
     component.receiveProps({
     component.receiveProps({

+ 6 - 1
packages/core/src/View.ts

@@ -137,7 +137,12 @@ export default abstract class View extends DateComponent<ViewProps> {
   updateSize(isResize: boolean, viewHeight: number, isAuto: boolean) {
   updateSize(isResize: boolean, viewHeight: number, isAuto: boolean) {
     let { calendar } = this
     let { calendar } = this
 
 
-    if (isResize || calendar.isViewUpdated || calendar.isDatesUpdated || calendar.isEventsUpdated) {
+    if (
+      isResize || // HACKS...
+      calendar.isViewUpdated ||
+      calendar.isDatesUpdated ||
+      calendar.isEventsUpdated
+    ) {
       // sort of the catch-all sizing
       // sort of the catch-all sizing
       // anything that might cause dimension changes
       // anything that might cause dimension changes
       this.updateBaseSize(isResize, viewHeight, isAuto)
       this.updateBaseSize(isResize, viewHeight, isAuto)