Cm-caesar NPM | npm.io

Caesar

React Calendar library with a similar API to react-dates.

Several bugs and performance issues within react-dates related to unnecessary re-renders motivated me to create my own library that avoided these hiccups. Uses date-fns internally rather than moment saving over 400 KB. Has a similar API which allows for an easy transition.

Installation

To install, you can use npm or yarn:

$ npm install cm-caesar
$ yarn add cm-caesar

Examples

Minimum:

This will render a calendar component which allows you to select a date range, defaults to the current month, and shows a single month. This doesn't really do much as you'll need a way to hook into date changes.

import React from 'react'
import Caesar from 'cm-caesar'

export default React.PureComponent {
    render() {
        return <Caesar />
    }
}

Handled State:

This will render the same calendar as the Minimum Example, but allows you to access the current startDate & endDate from outside of the Caesar component.

import React from 'react'
import Caesar from 'cm-caesar'

export default React.Component {
    state = {
        startDate: null,
        endDate: null,
    }
    
    handleChange = ({ startDate, endDate }) => {
        this.setState({ startDate, endDate })
    }
    
    render() {
        return (
            <Caesar
                onDateChange={this.handleChange}
            />
        )
    }
}

Custom Day Component:

Sometimes you need to display days on the calendar differently and/or include more information. The renderDayContents props allows you to easily do so. The example below uses the format method exported by date-fns to display days of the month with an alternate format.

import React from 'react'
import Caesar from 'cm-caesar'
import { format } from 'date-fns'

export default React.PureComponent {
    renderDay = (day) => (
        <div>
            {format(day, 'Do')}
        </div>
    )

    render() {
        return (
            <Caesar
                renderDayContents={this.renderDay}
            />
        )
    }
}

Props

Name	Type	Default	Description
start	Date	`new Date()`	Month to start the calendar on.
numberOfNights	number	`1`	Number of months to display at once. Also dictates number of months added when adding more months.
onDateChange	({ startDate: ?Date, endDate: ?Date }) => void	`undefined`	Triggered any time a date is changed. Allows access to dates on change.
hideDaysOfWeek	Boolean	`false`	Hide days of the week. Useful for advanced functionality and styling.
onAddPage	(nextMonth: Date) => void	`undefined`	Triggered any time a new page of months is added. Returns the first day of the next page of months.
onFocusChange	(focused: string) => void	`undefined`	Triggered any time the focus changes. Returns a string which can be be one of these values: `'startDate'` & `'endDate'` depending on which date was selected last.
renderDayContents	(day: Date) => React.Node	`undefined`	Allows you to render a custom day component. Gives you access to the current `day` and requires that you return a valid `React.Node`.