@pratikdhungel/react-calendar-month-view v0.9.0

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