Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/davidalekna/react-organizer

📅 Primitive to build simple, flexible, enhanced dates, calendars, events React components
https://github.com/davidalekna/react-organizer

calendar datepicker dates daypicker events

Last synced: about 11 hours ago
JSON representation

📅 Primitive to build simple, flexible, enhanced dates, calendars, events React components

Host: GitHub
URL: https://github.com/davidalekna/react-organizer
Owner: davidalekna
License: mit
Created: 2018-09-05T12:07:40.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2020-06-16T15:07:24.000Z (over 4 years ago)
Last Synced: 2024-10-08T04:29:25.794Z (about 1 month ago)
Topics: calendar, datepicker, dates, daypicker, events
Language: JavaScript
Homepage: https://davidalekna.github.io/react-organizer
Size: 1.14 MB
Stars: 32
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


  Organizer 📅 (beta)



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




[![Build Status][build-badge]][build]

[![Code Coverage][coverage-badge]][coverage]

[![MIT License][license-badge]][license]

[![PRs Welcome][prs-badge]][prs] 

[![Code of Conduct][coc-badge]][coc]

[![size][size-badge]][unpkg-dist] [![gzip size][gzip-badge]][unpkg-dist]

[![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](https://davidalekna.github.io/react-organizer)

## 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](#installation)

- [Usage](#usage)

- [Props](#props)

  - [days](#days)

  - [months](#months)

  - [date](#date)

  - [selected](#selected)

  - [getPrevMonthOffset](#getprevmonthoffset)

  - [getNextMonthOffset](#getnextmonthoffset)

  - [getCurrentMonth](#getcurrentmonth)

  - [getFullMonth](#getfullmonth)

  - [getFullYear](#getfullyear)

  - [addCalendarMonth](#addcalendarmonth)

  - [subCalendarMonth](#subcalendarmonth)

  - [addCalendarYear](#addcalendaryear)

  - [subCalendarYear](#subcalendaryear)

  - [selectDate](#selectdate)

  - [selectRange](#selectrange)

  - [reset](#reset)

  - [selectMonth](#selectmonth)

  - [selectYear](#selectyear)

  - [changeLanguage](#changelanguage)

  - [children](#children)

- [LICENSE](#license)

## Installation

This module is distributed via [npm][npm] which is bundled with [node][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](https://codesandbox.io/s/github/davidalekna/organizer-examples)

```jsx

import React from 'react'

import {render} from 'react-dom'

import Organizer from 'react-organizer'

render(

  

    {(props) => (

      


    )}

  ,

  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

[npm]: https://www.npmjs.com/

[node]: https://nodejs.org

[build-badge]: https://travis-ci.org/davidalekna/react-organizer.svg?style=flat-square

[build]: https://travis-ci.org/davidalekna/react-organizer

[coverage-badge]: https://codecov.io/gh/davidalekna/react-organizer/branch/master/graph/badge.svg?style=flat-square

[coverage]: https://codecov.io/gh/davidalekna/react-organizer

[license-badge]: https://img.shields.io/npm/l/downshift.svg?style=flat-square

[license]: https://github.com/davidalekna/react-organizer/blob/master/LICENSE

[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square

[prs]: http://makeapullrequest.com

[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square

[coc]: https://github.com/davidalekna/react-organizer/blob/master/CODE_OF_CONDUCT.md

[react-badge]: https://img.shields.io/badge/%E2%9A%9B%EF%B8%8F-(p)react-00d8ff.svg?style=flat-square

[react]: https://facebook.github.io/react/

[gzip-badge]: http://img.badgesize.io/https://unpkg.com/downshift/dist/downshift.umd.min.js?compression=gzip&label=gzip%20size&style=flat-square

[size-badge]: http://img.badgesize.io/https://unpkg.com/downshift/dist/downshift.umd.min.js?label=size&style=flat-square

[unpkg-dist]: https://unpkg.com/react-organizer/dist/

[use-a-render-prop]: https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce