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 => {
    // return a component to render for the given date
  };

  render() {
    return <CalendarMonthView renderDay={this._renderDay} />;
  }
}

Functions accessible with a ref

isSmallCalendar()

Returns if the calendar is a small calendar.

Example:

_renderDay = date => {
  if (this.calendar && this.calendar.isSmallCalendar()) {
    // renderDay for small calendar
  } else {
    // renderDay for normal calendar
  }
};

render() {
  return (
    <CalendarMonthView
      ref={ref => (this.calendar = ref)}
      renderDay={this._renderDay}
    />
  );
}

Props

prop	type	default	description
width	string	"90%"	Specifies the width of the calendar (height is dynamically set and therefore cannot be customized). Examples. "500px", "90vw", "90%"
renderDay	function	null	Callback used to render a given day
onMonthChange	function	null	Callback that is fired when the month is changed (Fires once on component mount)
titleTextStyle	object	null	Custom styles for the title text
dayNameTextStyle	object	null	Custom styles for the day names (header row of the calendar)
dayTextStyle	object	null	Custom styles for the numbers that correspond to the days on the calendar
activeDayStyle	object	null	Custom styles for the calendar tile corresponding to the current day
inactiveDayStyle	object	null	Custom styles for the calendar tile corresponding days that are not the current day

Prop Functions:

renderDay(isoDate: string)

isoDate is a ISO-8601 string that represents the current day being rendered.

Example:

const renderDay = isoDate => {
  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.