Upgrade guide for React Calendar 1.x users

React-Calendar 2.0 comes with entirely different architecture, but for most use cases, upgrading should be fairly easy. Benefits from upgrading are substantial - React-Calendar 2.0 is built on modern web technologies and does not need dependencies like moment.js.

Unlike in version 1.0, you have a variety of components to choose from. You can either go with fully functional calendar featuring multiple views and navigation by using Calendar component or you can display just a single month, year, decade or a century using MonthView, YearView, DecadeViewandCenturyView` components, respectively. This gives you more flexibility when creating the interface, but in some cases more code on your side will be required.

Displaying multiple months

Previously, Calendar component was capable of displaying multiple views (being month, year and so on). Now, Calendar displays just one view. Should you like to create layouts e.g. for entire years, you should now use multiple view components.

Before:

<Calendar
  startDate={moment()}
  endDate={moment().endOf('year')}
  size={12}
  mods={
    [
      {
        date: moment(),
        classNames: [ 'current' ],
        component: [ 'day', 'month', 'week' ]
      }
    ]
  }
/>

After:

const year = new Date().getFullYear();
const months = [];
for (let monthIndex = 0; monthIndex < 12; monthIndex += 1) {
  months.push(<MonthView activeStartDate={new Date(year, monthIndex)} />);
}
return (
  <div>
    {months}
  </div>
);

Handling modifiers

Previously, React-Calendar allowed you to pass a prop mods which allowed you to pass an array of objects. These objects contained a date property which told Calendar component which tiles on a view should be modified.

Now, each tile (being day of the month, month in a year and so on) accept onClick function. When the user clicks on a given tile, onClick callback will be fired with a clicked date being the first argument. You should decide whether you want to do something with this callback or not on onClick function level.

How to pass onClick callback

If you're using view components (MonthView, YearView...), this callback is simply called onClick. Calendar component, being the one that handles multiple views, have mutliple callbacks: onClickDay, onClickMonth, onClickYear and onClickDecade.