Monthly Calendar React Component, inspired by a Squarespace calendar theme
npm install react-calendar-month-viewA simple and customizable monthly calendar component view.
To build the examples locally, clone this repo and run:
``js`
npm install
npm start
or
`js`
yarn install
yarn start
Then open localhost:8080 in a browser.
Install directly from NPM:
`js`
npm install react-calendar-month-view --save
or
`js`
yarn add react-calendar-month-view
Use this component to display a month view of a calendar with supplied event duration indicators.
`jsx
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
}
}
`
| 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 |
#### 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:
`jsx`
const renderDay = (isoDate, isSmallCalendar) => {
return ... ;
};
#### 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:
`jsx``
const onMonthChange = startDate => {
// eg. retrieve data from gcal
};
Use the width to control the size of the calendar component.