react-calendar-month-view

A simple and customizable monthly calendar component view.

Demo & Examples

Live Demo

To build the examples locally, clone this repo and run:

npm install
npm start

or

yarn install
yarn start

Then open localhost:8080 in a browser.

Installation

Install directly from NPM:

npm install react-calendar-month-view --save

or

yarn add react-calendar-month-view

Usage

Use this component to display a month view of a calendar with supplied event duration indicators.

import CalendarMonthView from 'react-calendar-month-view';
 
class App extends Component {
  // date is given as an ISO-8601 string
  _renderDay = (date, isSmallCalendar) => {
    // return a component to render for the given date
  };
 
  render() {
    return <CalendarMonthView renderDay={this._renderDay} />;
  }
}

Props

Functions:

renderDay(isoDate: string, isSmallCalendar: bool)

isoDate is a ISO-8601 string that represents the current day being rendered.
isSmallCalendar is a boolean defining if the calendar is rendered as a "small" or "large" type

Example:

const renderDay = (isoDate, isSmallCalendar) => {
  return <div> ... </div>;
};

onMonthChange(startDate)

startDate is a ISO-8601 string representing the start date of the current month, after the month is changed (Fires once when component is mounted)

Example:

const onMonthChange = startDate => {
  // eg. retrieve data from gcal
};

Notes

Use the width to control the size of the calendar component.