Skip to content

πŸ“… Primitive to build simple, flexible, enhanced dates, calendars, events React components

License

Notifications You must be signed in to change notification settings

davidalekna/react-organizer

Repository files navigation

Organizer πŸ“… (beta)

Primitive to build simple, flexible, enhanced dates, calendars, input slector, events manager React components


Build Status Code Coverage MIT License PRs Welcome Code of Conduct size gzip size Storybook

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

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

About

πŸ“… Primitive to build simple, flexible, enhanced dates, calendars, events React components

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published