Your go-to, prescribed, Calendar component for React

Calendarx is a state container that makes creating custom calendar components a breeze. With a simple API, Calendarx makes it easy to display days and events, change views, and advance between the months, weeks, and days.

yarn add calendarx

or

npm install calendarx

import { Calendar } from 'calendarx'

import { Row, Column, Events } from './components'

const events = [{ date: new Date(), id: 'birthday-1' }] // optional

export default () => (
  <Calendar events={events}>
    {({ days, date, goToNext, goToPrev, goToToday }) => (
      <div>
        <Row>
          <span>{date.toDateString()}</span>
          <button onClick={() => goToPrev()}>&lt;</button>
          <button onClick={goToToday}>Today</button>
          <button onClick={() => goToNext()}>&gt;</button>
        </Row>
        {days.map((week, i) => (
          <Row key={i}>
            {week.map((day, j) => (
              <Column key={j}>
                {day.events.map((event) => (
                  <Event isToday={day.isToday} key={event.id} {...event} />
                ))}
              </Column>
            ))}
          </Row>
        ))}
      </div>
    )}
  </Calendar>
)

or use as a React hook:

import { useCalendar } from 'calendarx'

export default MyCalendar() {
  const { days } = useCalendar(options)

 // ...
}

for an Advanced example, check out:

Note: the Calendarx days grid will adapt depending on the number of days that are specified in numDays. For example, if 4 is passed in, the first column will start with your initialDate. If 7 is passed in (anything <10), the calendar will align itself to the beginning of the week. If 10 < numDays < 365 (the default is 35), the calendar will align to include the entire month and potentially parts of the previous/next month in order to align the grid with your start of the week (default is Sunday).

The following will be passed to your props.children or props.render function:

This object contains the following fields/getters:

• date: Date
• events: Event[]
• isToday: Boolean
• isSame(unit: 'year'|'month'|'week'|'day'): Boolean: Function

Events will include the other properties you pass alongside date in your events prop.

Please do! If you have ideas, bug fixes, or examples to showcase, please submit a PR/issue.

1. yarn
2. Make your changes
3. yarn test
4. Push a PR

Thanks goes to these wonderful people (emoji key):

Michael Fix 💻

Filipe 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

MIT

This project was inspired by Kyle Stetz's CLNDR.