onRangeChange prop (#641)

* Added onRangeChange prop

* Normalized date range paramater to always be an object

* onRangeChange can work with custom views if range() is implemented, used warning package instead of console.warn

* Elaborated onRangeChange documentation

* Fixed handleViewChange passing stale prop to onRangeChange

src/Agenda.js

@@ -222,6 +222,11 @@ class Agenda extends React.Component {
   }
 }
 
+Agenda.range = (start, { length = Agenda.defaultProps.length }) => {
+  let end = dates.add(start, length, 'day');
+  return { start, end };
+};
+
 Agenda.navigate = (date, action, { length = Agenda.defaultProps.length }) => {
   switch (action) {
     case navigate.PREVIOUS:

src/Calendar.js

@@ -9,6 +9,7 @@ import {
   dateRangeFormat,
   views as componentViews,
 } from './utils/propTypes'
+import warning from 'warning';
 
 import { notify } from './utils/helpers'
 import { navigate, views } from './utils/constants'
@@ -251,6 +252,14 @@ class Calendar extends React.Component {
      */
     onDrillDown: PropTypes.func,
 
+    /**
+     * Callback fired when the visible date range changes. Returns an Array of dates
+     * or an object with start and end dates for BUILTIN views.
+     *
+     * Cutom views may return something different.
+     */
+    onRangeChange: PropTypes.func,
+
     /**
      * A callback fired when a date selection is made. Only fires when `selectable` is `true`.
      *
@@ -807,6 +816,18 @@ class Calendar extends React.Component {
     )
   }
 
+  handleRangeChange = (date, view) => {
+    let { onRangeChange } = this.props
+    if(onRangeChange) {
+      if(view.range) {
+        onRangeChange(view.range(date, {}))
+      }
+      else {
+        warning(true, 'onRangeChange prop not supported for this view')
+      }
+    }
+  }
+
   handleNavigate = (action, newDate) => {
     let { view, date, getNow, onNavigate, ...props } = this.props
     let ViewComponent = this.getView()
@@ -819,13 +840,17 @@ class Calendar extends React.Component {
     })
 
     onNavigate(date, view, action)
-  }
+    this.handleRangeChange(date, ViewComponent)
+  };
 
   handleViewChange = view => {
     if (view !== this.props.view && isValidView(view, this.props)) {
       this.props.onView(view)
     }
-  }
+
+    let views = this.getViews();
+    this.handleRangeChange(this.props.date, views[view])
+  };
 
   handleSelectEvent = (...args) => {
     notify(this.props.onSelectEvent, args)

src/Day.js

@@ -12,20 +12,25 @@ class Day extends React.Component {
   }
 
   render() {
-    let { date, ...props } = this.props
+    let { date, ...props } = this.props;
+    let range = Day.range(date);
 
     return (
       <TimeGrid
         {...props}
-        range={[dates.startOf(date, 'day')]}
+        range={range}
         eventOffset={10}
       />
-    )
+    );
   }
 }
 
-Day.navigate = (date, action) => {
-  switch (action) {
+Day.range = (date) => {
+  return [dates.startOf(date, 'day')]
+}
+
+Day.navigate = (date, action)=>{
+  switch (action){
     case navigate.PREVIOUS:
       return dates.add(date, -1, 'day')
 

src/Month.js

@@ -355,6 +355,12 @@ class MonthView extends React.Component {
   }
 }
 
+MonthView.range = (date, { culture }) => {
+  let start = dates.firstVisibleDay(date, culture)
+  let end = dates.lastVisibleDay(date, culture)
+  return { start, end }
+}
+
 MonthView.navigate = (date, action) => {
   switch (action) {
     case navigate.PREVIOUS:

src/WorkWeek.js

@@ -26,6 +26,12 @@ class WorkWeek extends React.Component {
   }
 }
 
+WorkWeek.range = (date, options) => {
+  return Week.range(date, options).filter(
+    d => [6, 0].indexOf(d.getDay()) === -1
+  )
+}
+
 WorkWeek.navigate = Week.navigate
 
 WorkWeek.title = (date, { formats, culture }) => {