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

License

cm-caesar is released under the MIT license.