react-universal-calendar v1.4.3

react-universal-calendar

React universal calendar

Fully customizable calendar

Install

npm i react-universal-calendar

// or if using yarn
yarn add react-universal-calendar

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import UniversalCalendar from "react-universal-calendar"

const Calendar = () =>
    <UniversalCalendar renderHeader={() => <div>Custom calendar</div>}
                       renderDate={(date) => <div>{date.format("D")}</div>}/>

ReactDOM.render(<Calendar/>, document.getElementById('root'));

Props

initDate

Type: moment

Month of date determines start page of calendar.

renderHeader

Type: func

Function for render header of calendar.

renderSwitchMonth

Type: function

Function for render navigation component. It has 3 arguments.

• date - moment of current month
• swipeLeft - function for switching to previous month
• swipeRight - function for switching to next month

renderSwitchMonth: (date, swipeLeft, swipeRight) => {/*  your component   */}

dateAreaStyle

Type: object

Additional styles applied for calendar dates container.

renderDayOfWeekName

Type: function

Function for render cell with week day name. It has 1 argument:

• dayNum - serial number of the day of the week.

renderDayOfWeekName: (dayNum) => {/*  your component   */}

cellStyle

Type: object

Additional styles applied for date container.

renderDate

Type: function

Function for render cell with date. It has 2 argument:

• date - moment of current date.
• currentMonth - moment of current month.

 renderDate: (date, currentMonth) => ({/*  your component   */}

License