Add showWeeksNumber, onWeekClick props

docs/DateUtils.md

@@ -62,3 +62,7 @@ console.log(newRange.from) // 2015-05-24
 ### isDayInRange `(day: Date, range: object<from: ?Date, to: ?Date>) ⇒ Bool`
 
 Returns `true` if `day` is included in the specified range of days.  See the [range example](http://react-day-picker.js.org/examples?range) for an example using this function.
+
+### getWeekNumber `(day: Date) ⇒ Number`
+
+Returns the year's week number (as per ISO, i.e. with the week starting from Monday) for the given day.

docs/DayPickerAPI.md

@@ -10,7 +10,7 @@ import DayPicker from 'react-day-picker';
 
 **Day Modifiers**: [selectedDays](#selecteddays), [disabledDays](#disableddays), [modifiers](#modifiers), [modifiersStyles](#modifiersstyles)
 
-**Customization**: [enableOutsideDays](#enableoutsidedays), [fixedWeeks](#fixedweeks), [todayButton](#todaybutton)
+**Customization**: [enableOutsideDays](#enableoutsidedays), [fixedWeeks](#fixedweeks), [showWeekNumbers](#showweeknumbers), [todayButton](#todaybutton)
 
 **Localization**: [dir](#dir), [firstDayOfWeek](#firstdayofweek), [labels](#labels), [locale](#locale), [localeUtils](#localeUtils), [months](#months), [weekdaysLong](#weekdayslong), [weekdaysShort](#weekdaysshort)
 
@@ -279,6 +279,12 @@ Indicate which day should appear as selected. Set a `selected` modifier.
 
 See [Modifiers](Modifiers.md) for a reference of the accepted values.
 
+### showWeekNumbers
+
+**Type**: `Boolean`
+
+Display the year's week number next to each week ([example](../examples/?weekNumbers)).
+
 ### todayButton
 
 **Type**: `String`
@@ -386,6 +392,12 @@ Event handler when the calendar get the `keydown` event
 
 Event handler when the month is changed, i.e. clicking the navigation buttons or using the keyboard.
 
+### onWeekClick
+
+**Type**: `(weekNumber: Number, days: Date[], e: SynteticEvent) ⇒ void`
+
+Event hander when the user clicks on a week number (when [showWeekNumbers](#showweeknumbers) is set to `true`).
+
 ## Component methods
 
 ### showMonth 

examples/src/Examples.js

@@ -25,6 +25,7 @@ import SelectableDay from './examples/SelectableDay';
 import TodayButton from './examples/TodayButton';
 import SimpleCalendar from './examples/SimpleCalendar';
 import SimpleInput from './examples/SimpleInput';
+import WeekNumbers from './examples/WeekNumbers';
 import YearCalendar from './examples/YearCalendar';
 import YearNavigation from './examples/YearNavigation';
 
@@ -96,6 +97,11 @@ const EXAMPLES = {
     description: 'Use <code>todayButton</code> to display a today button.',
     Component: TodayButton,
   },
+  weekNumbers: {
+    title: 'Selecting an entire week',
+    description: 'Use the <code>weekNumbers</code> prop to display the number of each week.',
+    Component: WeekNumbers,
+  },
   blocked: {
     title: 'Prevent navigation between months',
     description: 'Set <code>canChangeMonth</code> to <code>false</code> to prevent the navigation between months and years.',

examples/src/examples/WeekNumbers.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import DayPicker from '../../../src';
+
+import '../../../src/style.css';
+
+export default class WeekNumbers extends React.Component {
+  state = {
+    selectedDays: undefined,
+    selectedWeek: undefined,
+  };
+
+  handleWeekClick = (week, days, e) => {
+    e.target.blur();
+    if (week === this.state.selectedWeek) {
+      this.setState({
+        selectedWeek: undefined,
+        selectedDays: undefined,
+      });
+      return;
+    }
+    this.setState({
+      selectedDays: days,
+      selectedWeek: week,
+    });
+  };
+
+  render() {
+    return (
+      <DayPicker
+        showWeekNumbers
+        fixedWeeks
+        selectedDays={this.state.selectedDays}
+        onWeekClick={this.handleWeekClick}
+      />
+    );
+  }
+}

examples/webpack.config.js

@@ -53,6 +53,7 @@ module.exports = {
           'SimpleCalendar',
           'SimpleInput',
           'TouchEvents',
+          'WeekNumbers',
           'YearCalendar',
           'YearNavigation',
         ],

src/DateUtils.js

@@ -1,6 +1,7 @@
 /**
  * Clone a date object.
  *
+ * @export
  * @param  {Date} d The date to clone
  * @return {Date} The cloned date
  */
@@ -10,6 +11,8 @@ export function clone(d) {
 
 /**
  * Return `d` as a new date with `n` months added.
+ * 
+ * @export
  * @param {[type]} d
  * @param {[type]} n
  */
@@ -22,6 +25,7 @@ export function addMonths(d, n) {
 /**
  * Return `true` if two dates are the same day, ignoring the time.
  *
+ * @export
  * @param  {Date}  d1
  * @param  {Date}  d2
  * @return {Boolean}
@@ -69,6 +73,7 @@ export function isDayAfter(d1, d2) {
  * Return `true` if a day is in the past, e.g. yesterday or any day
  * before yesterday.
  *
+ * @export
  * @param  {Date}  d
  * @return {Boolean}
  */
@@ -82,6 +87,7 @@ export function isPastDay(d) {
  * Return `true` if a day is in the future, e.g. tomorrow or any day
  * after tomorrow.
  *
+ * @export
  * @param  {Date}  d
  * @return {Boolean}
  */
@@ -95,6 +101,7 @@ export function isFutureDay(d) {
  * Return `true` if day `d` is between days `d1` and `d2`,
  * without including them.
  *
+ * @export
  * @param  {Date}  d
  * @param  {Date}  d1
  * @param  {Date}  d2
@@ -113,6 +120,7 @@ export function isDayBetween(d, d1, d2) {
  * Add a day to a range and return a new range. A range is an object with
  * `from` and `to` days.
  *
+ * @export
  * @param {Date} day
  * @param {Object} range
  * @return {Object} Returns a new range object
@@ -143,6 +151,7 @@ export function addDayToRange(day, range = { from: null, to: null }) {
 /**
  * Return `true` if a day is included in a range of days.
  *
+ * @export
  * @param  {Date}  day
  * @param  {Object}  range
  * @return {Boolean}
@@ -156,10 +165,28 @@ export function isDayInRange(day, range) {
   );
 }
 
+/**
+ * Return the year's week number (as per ISO, i.e. with the week starting from monday)
+ * for the given day.
+ * 
+ * @export
+ * @param {Date} day 
+ * @returns {Number}
+ */
+export function getWeekNumber(day) {
+  const date = clone(day);
+  date.setHours(0, 0, 0);
+  date.setDate(date.getDate() + 4 - (date.getDay() || 7));
+  return Math.ceil(
+    ((date - new Date(date.getFullYear(), 0, 1)) / 8.64e7 + 1) / 7
+  );
+}
+
 export default {
   addDayToRange,
   addMonths,
   clone,
+  getWeekNumber,
   isDayAfter,
   isDayBefore,
   isDayBetween,

src/DayPicker.js

@@ -28,6 +28,7 @@ export default class DayPicker extends Component {
     reverseMonths: PropTypes.bool,
     pagedNavigation: PropTypes.bool,
     todayButton: PropTypes.string,
+    showWeekNumbers: PropTypes.bool,
 
     // Modifiers
     selectedDays: PropTypes.oneOfType([
@@ -110,6 +111,7 @@ export default class DayPicker extends Component {
     onDayFocus: PropTypes.func,
     onMonthChange: PropTypes.func,
     onCaptionClick: PropTypes.func,
+    onWeekClick: PropTypes.func,
   };
 
   static defaultProps = {
@@ -128,6 +130,7 @@ export default class DayPicker extends Component {
     canChangeMonth: true,
     reverseMonths: false,
     pagedNavigation: false,
+    showWeekNumbers: false,
     renderDay: day => day.getDate(),
     weekdayElement: <Weekday />,
     navbarElement: <Navbar classNames={classNames} />,
@@ -541,8 +544,10 @@ export default class DayPicker extends Component {
           locale={this.props.locale}
           localeUtils={this.props.localeUtils}
           firstDayOfWeek={firstDayOfWeek}
-          onCaptionClick={this.props.onCaptionClick}
           footer={this.props.todayButton && this.renderTodayButton()}
+          showWeekNumbers={this.props.showWeekNumbers}
+          onCaptionClick={this.props.onCaptionClick}
+          onWeekClick={this.props.onWeekClick}
         >
           {this.renderDayInMonth}
         </Month>

src/Month.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from './PropTypes';
 import Weekdays from './Weekdays';
 import { getWeekArray } from './Helpers';
+import { getWeekNumber } from './DateUtils';
 
 export default function Month({
   classNames,
@@ -23,6 +24,8 @@ export default function Month({
   children,
 
   footer,
+  showWeekNumbers,
+  onWeekClick,
 }) {
   const captionProps = {
     date: month,
@@ -37,6 +40,7 @@ export default function Month({
     : React.createElement(captionElement, captionProps);
 
   const weeks = getWeekArray(month, firstDayOfWeek, fixedWeeks);
+
   return (
     <div className={classNames.month} role="grid">
       {caption}
@@ -45,16 +49,32 @@ export default function Month({
         weekdaysShort={weekdaysShort}
         weekdaysLong={weekdaysLong}
         firstDayOfWeek={firstDayOfWeek}
+        showWeekNumbers={showWeekNumbers}
         locale={locale}
         localeUtils={localeUtils}
         weekdayElement={weekdayElement}
       />
       <div className={classNames.body} role="rowgroup">
-        {weeks.map(week => (
-          <div key={week[0].getTime()} className={classNames.week} role="row">
-            {week.map(day => children(day, month))}
-          </div>
-        ))}
+        {weeks.map(week => {
+          let weekNumber;
+          if (showWeekNumbers) {
+            weekNumber = getWeekNumber(week[0]);
+          }
+          return (
+            <div key={week[0].getTime()} className={classNames.week} role="row">
+              {showWeekNumbers &&
+                <div
+                  className={classNames.weekNumber}
+                  tabIndex={0}
+                  role="gridcell"
+                  onClick={e => onWeekClick(weekNumber, week, e)}
+                >
+                  {weekNumber}
+                </div>}
+              {week.map(day => children(day, month))}
+            </div>
+          );
+        })}
       </div>
       {footer &&
         <div className={classNames.footer}>
@@ -86,6 +106,10 @@ Month.propTypes = {
     PropTypes.instanceOf(React.Component),
   ]),
 
+  footer: PropTypes.node,
+  showWeekNumbers: PropTypes.bool,
+  onWeekClick: PropTypes.func,
+
   locale: PropTypes.string.isRequired,
   localeUtils: PropTypes.localeUtils.isRequired,
   weekdaysLong: PropTypes.arrayOf(PropTypes.string),
@@ -95,5 +119,4 @@ Month.propTypes = {
   onCaptionClick: PropTypes.func,
 
   children: PropTypes.func.isRequired,
-  footer: PropTypes.node,
 };

src/Weekdays.js

@@ -4,6 +4,7 @@ import PropTypes from './PropTypes';
 export default function Weekdays({
   classNames,
   firstDayOfWeek,
+  showWeekNumbers,
   weekdaysLong,
   weekdaysShort,
   locale,
@@ -31,6 +32,7 @@ export default function Weekdays({
   return (
     <div className={classNames.weekdays} role="rowgroup">
       <div className={classNames.weekdaysRow} role="row">
+        {showWeekNumbers && <div className={classNames.weekday} />}
         {days}
       </div>
     </div>
@@ -47,6 +49,7 @@ Weekdays.propTypes = {
   firstDayOfWeek: PropTypes.number.isRequired,
   weekdaysLong: PropTypes.arrayOf(PropTypes.string),
   weekdaysShort: PropTypes.arrayOf(PropTypes.string),
+  showWeekNumbers: PropTypes.bool,
   locale: PropTypes.string.isRequired,
   localeUtils: PropTypes.localeUtils.isRequired,
   weekdayElement: PropTypes.oneOfType([

src/classNames.js

@@ -13,6 +13,7 @@ export default {
   weekday: 'DayPicker-Weekday',
   body: 'DayPicker-Body',
   week: 'DayPicker-Week',
+  weekNumber: 'DayPicker-WeekNumber',
   day: 'DayPicker-Day',
   footer: 'DayPicker-Footer',
   todayButton: 'DayPicker-TodayButton',

src/style.css

@@ -86,6 +86,17 @@
         vertical-align: middle;
       }
 
+      .DayPicker-WeekNumber {
+        display: table-cell;
+        padding: .5rem;
+        text-align: right;
+        vertical-align: middle;
+        min-width: 1rem;
+        font-size: 0.75em;
+        cursor: pointer;
+        color: #8b9898;
+      }
+
   .DayPicker--interactionDisabled .DayPicker-Day {
     cursor: default;
   }

test/daypicker/events.js

@@ -175,4 +175,17 @@ describe('DayPicker’s events handlers', () => {
       formatMonthTitle(new Date())
     );
   });
+  it('should call `onWeekClick` when clicking on a week number', () => {
+    const onWeekClick = spy();
+    const wrapper = mount(
+      <DayPicker
+        showWeekNumbers
+        onWeekClick={onWeekClick}
+        initialMonth={new Date(2015, 1)}
+      />
+    );
+    wrapper.find('.DayPicker-WeekNumber').at(1).simulate('click');
+    expect(onWeekClick.getCall(0).args[0]).to.equal(6);
+    expect(onWeekClick.getCall(0).args[1]).to.have.length(7);
+  });
 });