The problem

You need a calendar, events manager, date picker, range picker experience in your application and you want it to be accessible. You also want it to be simple and flexible to account for your use cases.

This solution

This is a render props component that provides functionality and state management to create your own styled components.

Table of Contents

• Installation
• Usage
• Props
  • days
  • months
  • date
  • selected
  • getPrevMonthOffset
  • getNextMonthOffset
  • getCurrentMonth
  • getFullMonth
  • getFullYear
  • addCalendarMonth
  • subCalendarMonth
  • addCalendarYear
  • subCalendarYear
  • selectDate
  • selectRange
  • reset
  • selectMonth
  • selectYear
  • changeLanguage
  • children
• LICENSE

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install --save react-organizer

This package also depends on react and prop-types. Please make sure you have those installed as well.

Usage

NOTE: Organizer component will not provide any styles or jsx, only the functionality. Styles used in the examples are only for better visualization for what could be achieved using this component.

Try it out in the browser

import React from 'react'
import {render} from 'react-dom'
import Organizer from 'react-organizer'

render(
  <Organizer>
    {(props) => (
      <div />
    )}
  </Organizer>,
  document.getElementById('root'),
)

Props

This is the list of props that you should know about.

days

array | optional

array of week day names in prefered language. Defaults to english.

months

array | optional

array of month names in prefered language. Defaults to english.

date

date | optional

calendar date state

selected

date | optional

selected date state

getPrevMonthOffset

function({month: number, year: number, events: boolean})

generates previews month offset

getNextMonthOffset

function({month: number, year: number, events: boolean, totalOffsetDays: number, totalDays: number})

generates next month offset depending on how many grid items you want to display, defaults to 42

getCurrentMonth

function({month: number, year: number, events: boolean})

generates current month

getFullMonth

function(initMonth: number, events: boolean)

generates full month with previews and next months offset days

getFullYear

function(events: boolean)

generates full year with months with previews and next months offset days

addCalendarMonth

function()

subCalendarMonth

function()

addCalendarYear

function()

subCalendarYear

function()

selectDate

function({date: object})

selects date and adds a flag of selected on day object

selectRange

function({date: object})

selected state holds an array and will allow 2 dates in it

reset

function()

resets calendar to initial state

selectMonth

function({month: number})

selectYear

function({year: number})

changeLanguage

function({days: array, months: array})

change language state

children

function({}) | required

This is called with an object.

LICENSE

MIT