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

| 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 |

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.