{"id":13751930,"url":"https://github.com/davidalekna/react-organizer","last_synced_at":"2025-05-09T18:32:50.455Z","repository":{"id":57342149,"uuid":"147511721","full_name":"davidalekna/react-organizer","owner":"davidalekna","description":"📅 Primitive to build simple, flexible, enhanced dates, calendars, events React components","archived":false,"fork":false,"pushed_at":"2020-06-16T15:07:24.000Z","size":1192,"stargazers_count":32,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-08T04:29:25.794Z","etag":null,"topics":["calendar","datepicker","dates","daypicker","events"],"latest_commit_sha":null,"homepage":"https://davidalekna.github.io/react-organizer","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidalekna.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-05T12:07:40.000Z","updated_at":"2024-10-06T15:54:46.000Z","dependencies_parsed_at":"2022-09-16T02:50:22.272Z","dependency_job_id":null,"html_url":"https://github.com/davidalekna/react-organizer","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidalekna%2Freact-organizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidalekna%2Freact-organizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidalekna%2Freact-organizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidalekna%2Freact-organizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidalekna","download_url":"https://codeload.github.com/davidalekna/react-organizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224876976,"owners_count":17384699,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","datepicker","dates","daypicker","events"],"created_at":"2024-08-03T09:00:57.226Z","updated_at":"2024-11-16T04:32:03.535Z","avatar_url":"https://github.com/davidalekna.png","language":"JavaScript","funding_links":[],"categories":["*.js"],"sub_categories":["React"],"readme":"\u003ch1 align=\"center\"\u003e\n  Organizer 📅 (beta)\n\u003c/h1\u003e\n\u003cp align=\"center\" style=\"font-size: 1.2rem;\"\u003ePrimitive to build simple, flexible, enhanced dates, calendars, input slector, events manager React components\u003c/p\u003e\n\n\u003chr /\u003e\n\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![MIT License][license-badge]][license]\n[![PRs Welcome][prs-badge]][prs] \n[![Code of Conduct][coc-badge]][coc]\n[![size][size-badge]][unpkg-dist] [![gzip size][gzip-badge]][unpkg-dist]\n[![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](https://davidalekna.github.io/react-organizer)\n\n## The problem\n\nYou 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.\n\n## This solution\n\nThis is a render props component that provides functionality and state management to create your own styled components. \n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n  - [days](#days)\n  - [months](#months)\n  - [date](#date)\n  - [selected](#selected)\n  - [getPrevMonthOffset](#getprevmonthoffset)\n  - [getNextMonthOffset](#getnextmonthoffset)\n  - [getCurrentMonth](#getcurrentmonth)\n  - [getFullMonth](#getfullmonth)\n  - [getFullYear](#getfullyear)\n  - [addCalendarMonth](#addcalendarmonth)\n  - [subCalendarMonth](#subcalendarmonth)\n  - [addCalendarYear](#addcalendaryear)\n  - [subCalendarYear](#subcalendaryear)\n  - [selectDate](#selectdate)\n  - [selectRange](#selectrange)\n  - [reset](#reset)\n  - [selectMonth](#selectmonth)\n  - [selectYear](#selectyear)\n  - [changeLanguage](#changelanguage)\n  - [children](#children)\n- [LICENSE](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\nThis module is distributed via [npm][npm] which is bundled with [node][node] and\nshould be installed as one of your project's `dependencies`:\n\n```\nnpm install --save react-organizer\n```\n\n\u003e This package also depends on `react` and `prop-types`. Please make sure you have those installed as well.\n\n## Usage\n\n\u003e 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.\n\n\u003e [Try it out in the browser](https://codesandbox.io/s/github/davidalekna/organizer-examples)\n\n```jsx\nimport React from 'react'\nimport {render} from 'react-dom'\nimport Organizer from 'react-organizer'\n\nrender(\n  \u003cOrganizer\u003e\n    {(props) =\u003e (\n      \u003cdiv /\u003e\n    )}\n  \u003c/Organizer\u003e,\n  document.getElementById('root'),\n)\n```\n\n## Props\n\nThis is the list of props that you should know about. \n\n### days\n\n\u003e `array` | optional\n\narray of week day names in prefered language. Defaults to english.\n\n### months\n\n\u003e `array` | optional\n\narray of month names in prefered language. Defaults to english.\n\n### date\n\n\u003e `date` | optional\n\ncalendar date state\n\n### selected\n\n\u003e `date` | optional\n\nselected date state\n\n### getPrevMonthOffset\n\n\u003e `function({month: number, year: number, events: boolean})` \n\ngenerates previews month offset\n\n### getNextMonthOffset\n\n\u003e `function({month: number, year: number, events: boolean, totalOffsetDays: number, totalDays: number})`\n\ngenerates next month offset depending on how many grid items you want to display, defaults to 42\n\n### getCurrentMonth\n\n\u003e `function({month: number, year: number, events: boolean})` \n\ngenerates current month\n\n### getFullMonth\n\n\u003e `function(initMonth: number, events: boolean)` \n\ngenerates full month with previews and next months offset days\n\n### getFullYear\n\n\u003e `function(events: boolean)` \n\ngenerates full year with months with previews and next months offset days\n\n### addCalendarMonth\n\n\u003e `function()` \n\n### subCalendarMonth\n\n\u003e `function()`  \n\n### addCalendarYear\n\n\u003e `function()` \n\n### subCalendarYear\n\n\u003e `function()` \n\n### selectDate\n\n\u003e `function({date: object})` \n\nselects date and adds a flag of selected on day object\n\n### selectRange\n\n\u003e `function({date: object})` \n\nselected state holds an array and will allow 2 dates in it\n\n### reset\n\n\u003e `function()` \n\nresets calendar to initial state\n\n### selectMonth\n\n\u003e `function({month: number})` \n\n### selectYear\n\n\u003e `function({year: number})` \n\n### changeLanguage\n\n\u003e `function({days: array, months: array})` \n\nchange language state\n\n### children\n\n\u003e `function({})` | _required_\n\nThis is called with an object. \n\n## LICENSE\n\nMIT\n\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n[build-badge]: https://travis-ci.org/davidalekna/react-organizer.svg?style=flat-square\n[build]: https://travis-ci.org/davidalekna/react-organizer\n[coverage-badge]: https://codecov.io/gh/davidalekna/react-organizer/branch/master/graph/badge.svg?style=flat-square\n[coverage]: https://codecov.io/gh/davidalekna/react-organizer\n[license-badge]: https://img.shields.io/npm/l/downshift.svg?style=flat-square\n[license]: https://github.com/davidalekna/react-organizer/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/davidalekna/react-organizer/blob/master/CODE_OF_CONDUCT.md\n[react-badge]: https://img.shields.io/badge/%E2%9A%9B%EF%B8%8F-(p)react-00d8ff.svg?style=flat-square\n[react]: https://facebook.github.io/react/\n[gzip-badge]: http://img.badgesize.io/https://unpkg.com/downshift/dist/downshift.umd.min.js?compression=gzip\u0026label=gzip%20size\u0026style=flat-square\n[size-badge]: http://img.badgesize.io/https://unpkg.com/downshift/dist/downshift.umd.min.js?label=size\u0026style=flat-square\n[unpkg-dist]: https://unpkg.com/react-organizer/dist/\n[use-a-render-prop]: https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidalekna%2Freact-organizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidalekna%2Freact-organizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidalekna%2Freact-organizer/lists"}