Version 2.0

[clauderic]

If you'd like to test version 2 ahead of it's release, run npm install react-infinite-calendar@next

This version focuses on initial render performance, extensibility through composition, bundle size and fixing bugs related to outdated dependencies.

Composition

The codebase has been heavily refactored to make way for composable Higher Order Components that will help add opt-in layers of functionality. Out of the box, react-infinite-calendar 2.0 will come with the following HOCs: withDateSelection, withDateRangeSelection, withMultipleDateSelection and withKeyboardSupport.

The idea here is that users will also be able to write their own HOCs to enhance react-infinite-calendar to suit their needs if their use-case doesn't fit in the scope of the project.

Here's a simplified example implementing multiple date selection:

Moment.js -->date-fns

Dependency on Moment.js and moment-range has been dropped in favor of date-fns. This results in a much smaller bundle, as date-fns allows cherry-picking the methods we need and only comes bundled with the en locale by default.

The project has also been converted to use the nwb tooling for development and to manage the creation of the ES6, ES5 and UMD builds.

Bug fixes and improvements:

The following issues will be addressed with version 2.0:

• date range selection #4: Date-range selection
• Multi datepicker #13: Multiple-date selection
• Improving performance of initial render #68: Improving performance on initial render
• Can't install calendar #69, build problem #71: Build issues
• Uncaught TypeError: Cannot set property 'DateRange' of undefined #72: Remove dependency on Moment.js and Moment-range
• Uncaught TypeError: _selectedDate.isSame is not a function(…) #61, Bug: Uncaught TypeError: Cannot read property 'isSame' of null #63: Uncaught TypeError: Cannot read property 'isSame' of null.
• Prop type error every time I select a new day #60: Prop type errors when selecting a new date
• Locale does not apply to dates created in util.js #43: Locale does not apply to dates created in util.js

Backwards-breaking changes

Moment.js replaced with date-fns

If you were using a custom locale with version 1.0, you'll need to take a look at the new default locale and update your locale configuration. If you're planning on using a locale other than en, you'll also need to import that locale (refer to date-fns I18n documentation for more details) and pass it as a property of the locale prop. For example, if you wanted to add support for the fr locale:

<InfiniteCalendar
  locale={{
    blank: 'Aucune date sélectionnée',
    headerFormat: 'dddd, D MMM',
    locale: require('date-fns/locale/fr'),
    todayLabel: {
      long: "Aujourd'hui",
      short: 'Auj.',
    },
    weekdays: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
  }}
/>

Supported React Versions

Supported React versions have changed. Previously all React 14 and 15 releases were supported. Going forward only React 15.3 and newer will be supported. This was done in order to drop a peer dependency on react-addons-shallow-compare and replace it with React.PureComponent, as the docs suggest.

Display Options

Finally, display options have also been consolidated under the displayOptions prop:

Property	Type	Default	Description
layout	String	'portrait'	Layout of the calendar. Should be one of 'portrait' or 'landscape'
showHeader	Boolean	true	Show/hide the header
shouldHeaderAnimate	Boolean	true	Enable/Disable the header animation
showOverlay	Boolean	true	Show/hide the month overlay when scrolling
showTodayHelper	Boolean	true	Show/hide the floating back to Today helper
hideYearsOnSelect	Boolean	true	Whether to automatically hide the years view on select.
overscanMonthCount	Number	4	Number of months to render above/below the visible months. Tweaking this can help reduce flickering during scrolling on certain browers/devices.
todayHelperRowOffset	Number	4	This controls the number of rows to scroll past before the Today helper appears

Example usage of display options:

<InfiniteCalendar
  displayOptions={{
    layout: 'landscape',
    showOverlay: false,
    shouldHeaderAnimate: false
  }}
/>

For more details, check out the defaultDisplayOptions file.

Storybook

And finally, react-storybook has been added and all of the examples from the demo site have been added. Clone the repo locally and run npm run storybook to check it out.