fix problems with visibleRange function and timed dates. fixes #4517

src/core/CalendarComponent.ts

@@ -11,7 +11,7 @@ import { BusinessHoursInput, parseBusinessHours } from './structs/business-hours
 import { memoize } from './util/memoize'
 import { computeHeightAndMargins } from './util/dom-geom'
 import { createFormatter } from './datelib/formatting'
-import { diffWholeDays } from './datelib/marker'
+import { diffWholeDays, DateMarker } from './datelib/marker'
 import { memoizeRendering } from './component/memoized-rendering'
 import { CalendarState } from './reducers/types'
 import { ViewPropsTransformerClass } from './plugin-system'
@@ -105,21 +105,21 @@ export default class CalendarComponent extends Component<CalendarComponentProps>
     this.freezeHeight()
 
     let title = this.computeTitle(props.dateProfile, props.viewSpec.options)
-    this._renderToolbars(props.viewSpec, props.dateProfile, props.dateProfileGenerator, title)
+    this._renderToolbars(props.viewSpec, props.dateProfile, props.currentDate, props.dateProfileGenerator, title)
     this.renderView(props, title)
 
     this.updateSize()
     this.thawHeight()
   }
 
-  renderToolbars(viewSpec: ViewSpec, dateProfile: DateProfile, dateProfileGenerator: DateProfileGenerator, title: string) {
+  renderToolbars(viewSpec: ViewSpec, dateProfile: DateProfile, currentDate: DateMarker, dateProfileGenerator: DateProfileGenerator, title: string) {
     let headerLayout = this.opt('header')
     let footerLayout = this.opt('footer')
 
     let now = this.calendar.getNow()
     let todayInfo = dateProfileGenerator.build(now)
-    let prevInfo = dateProfileGenerator.buildPrev(dateProfile)
-    let nextInfo = dateProfileGenerator.buildNext(dateProfile)
+    let prevInfo = dateProfileGenerator.buildPrev(dateProfile, currentDate)
+    let nextInfo = dateProfileGenerator.buildNext(dateProfile, currentDate)
 
     let toolbarProps = {
       title,

src/core/DateProfileGenerator.ts

@@ -4,6 +4,7 @@ import { DateRange, OpenDateRange, constrainMarkerToRange, intersectRanges, rang
 import { ViewSpec } from './structs/view-spec'
 import { DateEnv } from './datelib/env'
 import Calendar from './Calendar'
+import { computeVisibleDayRange } from './util/misc'
 
 
 export interface DateProfile {
@@ -44,11 +45,11 @@ export default class DateProfileGenerator {
 
 
   // Builds a structure with info about what the dates/ranges will be for the "prev" view.
-  buildPrev(currentDateProfile: DateProfile): DateProfile {
+  buildPrev(currentDateProfile: DateProfile, currentDate: DateMarker): DateProfile {
     let { dateEnv } = this
 
     let prevDate = dateEnv.subtract(
-      currentDateProfile.currentRange.start,
+      currentDate,
       currentDateProfile.dateIncrement
     )
 
@@ -57,11 +58,11 @@ export default class DateProfileGenerator {
 
 
   // Builds a structure with info about what the dates/ranges will be for the "next" view.
-  buildNext(currentDateProfile: DateProfile): DateProfile {
+  buildNext(currentDateProfile: DateProfile, currentDate: DateMarker): DateProfile {
     let { dateEnv } = this
 
     let nextDate = dateEnv.add(
-      currentDateProfile.currentRange.start,
+      currentDate,
       currentDateProfile.dateIncrement
     )
 
@@ -356,8 +357,14 @@ export default class DateProfileGenerator {
     }
 
     if (val) {
-      return parseRange(val, this.dateEnv)
+      val = parseRange(val, this.dateEnv)
     }
+
+    if (val) {
+      val = computeVisibleDayRange(val)
+    }
+
+    return val
   }
 
 

src/core/reducers/main.ts

@@ -54,11 +54,11 @@ function reduceDateProfile(currentDateProfile: DateProfile | null, action: Actio
   switch (action.type) {
 
     case 'PREV':
-      newDateProfile = calendar.dateProfileGenerators[viewType].buildPrev(currentDateProfile)
+      newDateProfile = calendar.dateProfileGenerators[viewType].buildPrev(currentDateProfile, currentDate)
       break
 
     case 'NEXT':
-      newDateProfile = calendar.dateProfileGenerators[viewType].buildNext(currentDateProfile)
+      newDateProfile = calendar.dateProfileGenerators[viewType].buildNext(currentDateProfile, currentDate)
       break
 
     case 'SET_DATE':

tests/automated/lib/date-math.js

@@ -0,0 +1,28 @@
+
+export function startOfLocalDay(date) {
+  return new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate()
+  )
+}
+
+export function addLocalDays(date, n) {
+  let newDate = new Date(date.valueOf())
+  newDate.setDate(newDate.getDate() + n)
+  return newDate
+}
+
+export function startOfUtcDay(date) {
+  return new Date(Date.UTC(
+    date.getUTCFullYear(),
+    date.getUTCMonth(),
+    date.getUTCDate()
+  ))
+}
+
+export function addUtcDays(date, n) {
+  let newDate = new Date(date.valueOf())
+  newDate.setUTCDate(newDate.getUTCDate() + n)
+  return newDate
+}

tests/automated/view-dates/visibleRange.js

@@ -1,3 +1,4 @@
+import { addLocalDays, startOfLocalDay, startOfUtcDay, addUtcDays } from '../lib/date-math'
 import { expectActiveRange } from './ViewDateUtils'
 
 describe('visibleRange', function() {
@@ -81,7 +82,7 @@ describe('visibleRange', function() {
     describe('when a function', function() {
       var defaultDateInput = '2017-06-08T12:30:00'
 
-      it('receives the calendar\'s defaultDate, with local timezone', function() {
+      it('receives the calendar\'s defaultDate, with local timezone, and emits local range', function() {
         var matched = false
 
         initCalendar({
@@ -93,13 +94,20 @@ describe('visibleRange', function() {
             if (date.valueOf() === new Date(defaultDateInput).valueOf()) {
               matched = true
             }
+
+            let dayStart = startOfLocalDay(date)
+            return {
+              start: addLocalDays(dayStart, -1),
+              end: addLocalDays(dayStart, 2)
+            }
           }
         })
 
         expect(matched).toBe(true)
+        expectActiveRange('2017-06-07', '2017-06-10')
       })
 
-      it('receives the calendar\'s defaultDate, with UTC timezone', function() {
+      it('receives the calendar\'s defaultDate, with UTC timezone, and emits UTC range', function() {
         var matched = false
 
         initCalendar({
@@ -111,10 +119,35 @@ describe('visibleRange', function() {
             if (date.valueOf() === new Date(defaultDateInput + 'Z').valueOf()) {
               matched = true
             }
+
+            let dayStart = startOfUtcDay(date)
+            return {
+              start: addUtcDays(dayStart, -1),
+              end: addUtcDays(dayStart, 2)
+            }
           }
         })
 
         expect(matched).toBe(true)
+        expectActiveRange('2017-06-07', '2017-06-10')
+      })
+
+      // https://github.com/fullcalendar/fullcalendar/issues/4517
+      it('can emit and timed UTC range that will be rounded', function() {
+        initCalendar({
+          dateIncrement: { days: 3 },
+          timeZone: 'UTC',
+          defaultDate: defaultDateInput,
+          visibleRange: function(date) {
+            return {
+              start: addUtcDays(date, -1), // 2017-06-07T12:30:00 -> 2017-06-07
+              end: addUtcDays(date, 2) // 2017-06-10T12:30:00 -> 2017-06-11
+            }
+          }
+        })
+        expectActiveRange('2017-06-07', '2017-06-11')
+        currentCalendar.prev()
+        expectActiveRange('2017-06-04', '2017-06-08')
       })
 
     })
@@ -222,4 +255,5 @@ describe('visibleRange', function() {
       expectActiveRange('2015-06-07', '2015-06-14')
     })
   })
+
 })