{"id":13422078,"url":"https://github.com/BelkaLab/react-yearly-calendar","last_synced_at":"2025-03-15T10:31:39.006Z","repository":{"id":45460191,"uuid":"46038587","full_name":"BelkaLab/react-yearly-calendar","owner":"BelkaLab","description":"React.js Yearly Calendar Component","archived":true,"fork":true,"pushed_at":"2020-11-13T08:59:35.000Z","size":2904,"stargazers_count":552,"open_issues_count":11,"forks_count":73,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-02-28T03:23:29.091Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"hanse/react-calendar","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BelkaLab.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-12T08:09:19.000Z","updated_at":"2025-01-10T20:48:49.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/BelkaLab/react-yearly-calendar","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/BelkaLab%2Freact-yearly-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BelkaLab%2Freact-yearly-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BelkaLab%2Freact-yearly-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BelkaLab%2Freact-yearly-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BelkaLab","download_url":"https://codeload.github.com/BelkaLab/react-yearly-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719111,"owners_count":20336592,"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":[],"created_at":"2024-07-30T23:00:36.604Z","updated_at":"2025-03-15T10:31:38.534Z","avatar_url":"https://github.com/BelkaLab.png","language":"JavaScript","funding_links":[],"categories":["UI Components","Uncategorized","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","JavaScript"],"sub_categories":["Form Components","Uncategorized"],"readme":"# React-yearly-calendar\n\n[React](https://facebook.github.io/react/) calendar component with yearly view.\n\n[![npm version](https://badge.fury.io/js/react-yearly-calendar.svg)](https://badge.fury.io/js/react-yearly-calendar)\n![Alt text](https://img.shields.io/badge/license-MIT-green.svg?style=flat)\n\n```bash\n$ npm install react-yearly-calendar\n```\n\n# Demo\n**[http://belkalab.github.io/react-yearly-calendar/](https://belkalab.github.io/react-yearly-calendar)**\n\n![http://belkalab.github.io/react-yearly-calendar/](examples/screen.png)\n\nOr taste an example usage below:\n```js\nvar ReactDOM = require('react-dom');\nvar {Calendar, CalendarControls} = require('react-yearly-calendar');\n\nfunction onDatePicked(date) {\n  alert(date);\n}\n\nReactDOM.render(\n  \u003cCalendar\n    year={2018}\n    onPickDate={onDatePicked}\n  /\u003e,\n  document.getElementById('calendar')\n);\n```\n\n## Options\n\n#### Calendar\n\n| Prop | Type | Description | Default |\n|------|------|-------------|---------|\n| **year** | React.PropTypes.number.isRequired | year to be displayed | current year |\n| selectedDay | moment.js object | selected day | today |\n| forceFullWeeks | React.PropTypes.bool | match calendar row end with row start | false |\n| showDaysOfWeek | React.PropTypes.bool | show table header with days of week | true |\n| showWeekSeparators | React.PropTypes.bool | shows a blank column between one week and another | true |\n| firstDayOfWeek | React.PropTypes.number | select first day of week | 0 (Sunday) |\n| selectRange | React.PropTypes.bool | enable selecting ranges | false |\n| selectedRange | `[moment.js obj, moment.js obj]` | selected range of dates in the form `[start, end]` | |\n| customClasses | React.PropTypes.object, React.PropTypes.func | custom days/periods coloring (see section below) | |\n| titles | React.PropTypes.func | function mapping dates to html titles | |\n\n#### CalendarControls\n\n| Prop | Type | Description | Default |\n|------|------|-------------|---------|\n| **year** | React.PropTypes.number.isRequired | current year number | current year |\n| showTodayButton | React.PropTypes.bool | show *Today* button on top left | true |\n\n\n## Callbacks\n\n#### Calendar\n\n| Prop | Type | Syntax | Description |\n|------|------|--------|-------------|\n| onPickDate| React.PropTypes.func | function(selectedDay, dayClasses) {} | called when user clicks on a day. `dayClasses` is a string representing the classes applied to that day |\n| onPickRange| React.PropTypes.func | function(rangeStart, rangeEnd) {} | called when user selects a range of dates (only in `selectRange` mode) |\n\n#### CalendarControls\n\n| Prop | Type | Syntax | Description |\n|------|------|--------|-------------|\n| onPrevYear| React.PropTypes.func | function() {} | called on user clicking `«` (*previous year button*) |\n| onNextYear| React.PropTypes.func | function() {} | called on user clicking `»` (*next year button*) |\n| goToToday| React.PropTypes.func | function() {} | called on user clicking the `today` button |\n\n## Styling guide\nThe calendar is rendered as an html `table` element, to ensure proper displaying even in case the style isn't being loaded.\n\nTake a look at the css file in [`examples/basic/src/style.css`](https://github.com/BelkaLab/react-yearly-calendar/blob/master/examples/basic/src/style.css). Here are some head-ups if you want to style it yourself.\n\n - `table.calendar`: the main element that renders the calendar\n - `table.calendar thead`: renders the week day names\n - `table.calendar thead th.bolder`: adds `bolder` class to Sundays\n - `table.calendar td.month-name`: first column in table body, showing month names\n - `table.calendar td.prev-month`, `table.calendar td.next-month`: classes applied to the days of the previous and next month showed in a month's row to fill it up. Day numbers and callbacks are present even in these cells, so we suggest to play with text color to make days less intrusive and add `pointer-events: none` to prevent clicking.\n - `table.calendar td.week-separator`: class applied to table cells used to separate one week from another. As above, `pointer-events: none` is suggested\n - `table.calendar td.selected`: the currently selected day\n - `table.calendar td.bolder`: the days which are Sundays\n - `table.calendar td.range`: the days in the selected range\n - `table.calendar td.range-left`, `table.calendar td.range-right`: the left and right boundaries of the selected range\n____\n\n - `div.calendar-controls`: the main CalendarControls container\n - `div.calendar-controls .current-year`: the current year\n - `div.calendar-controls .controls`: applies to *next* and *previous* arrows and to *today* button\n - `div.calendar-controls .today`: the *today* button\n\n### Responsive\n\nA first attempt at making this design responsive can be seen [here](https://belkalab.github.io/react-yearly-calendar/responsive/) (window width \u003c 1200px triggers mobile layout). Suggestions and feedback on this are welcome [on issue #10](https://github.com/BelkaLab/react-yearly-calendar/issues/10)\n\n## Custom days/periods colors\n\nBy passing the `customClasses` prop, you can have a fine control on which CSS classes are assigned to each day.\n\n- `customClasses` can be a function accepting a *moment* object as a parameter, giving back the css class to be applied to the given day.\n\n```js\nconst customClasses = day =\u003e ( day.isBefore( moment([day.year(),2,21]) ) || day.isAfter( moment([day.year(),11,21]) ) ) ? 'cheap low-season': 'expensive high-season'\n```\n\n- If `customClasses` is an object, the Calendar will use the keys as css classes and the values as rules to apply them.\n\t- if the value is **an array** of strings in the form `YYYY-MM-DD`, those days will be given the css class. Useful for **single days**, like holidays!\n\t- if the value is **an object** with a `start` and an `end` value (still in the `YYYY-MM-DD` form), the days in that **period** will be given the css class. Nice for seasons!\n\t- if the value is **a string** of comma-separated, three-letter weekdays names in the form `\"ddd,ddd\"`, the class will be given to the **days of the week** appearing on the string. Great for closing days during the week!\n\t- if the value is **a function** returning a boolean value, the class will be assigned using the function itself as a test. A must have for the finest tuning!\n\nConfused? see the snippet below or try it yourself with this [interactive example](http://belkalab.github.io/react-yearly-calendar/custom_classes/)!\n\n```js\nconst customCSSclasses = {\n  holidays: [\n    '2018-04-25',\n    '2018-05-01',\n    '2018-06-02',\n    '2018-08-15',\n    '2018-11-01'\n  ],\n  spring: {\n    start: '2018-03-21',\n    end: '2018-6-20'\n  },\n  summer: {\n    start: '2018-06-21',\n    end: '2018-09-22'\n  },\n  autumn: {\n    start: '2018-09-23',\n    end: '2018-12-21'\n  },\n  weekend: 'Sat,Sun',\n  winter: day =\u003e day.isBefore( moment([2018,2,21]) ) || day.isAfter( moment([2018,11,21]))\n}\n```\n\n## Build it yourself\n\nClone and run\n\n```bash\n$ npm install\n```\n\n## License\nreact-yearly-calendar is Copyright (c) 2016-2020 Belka s.r.l.\n\nIt is free software, and may be redistributed under the terms specified in the LICENSE file (TL;DR: **MIT license**).  \n\n## About Belka\n[Belka](https://belkadigital.com) is a Digital Agency focused on design, mobile applications development and custom solutions.\nWe love open source software! You can [see our projects](https://belkadigital.com/case-studies) or look at our case studies.\n\nInterested? [Hire us](https://belkadigital.com/contacts) to help you build your next amazing project.\n\n[www.belkadigital.com](https://belkadigital.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBelkaLab%2Freact-yearly-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBelkaLab%2Freact-yearly-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBelkaLab%2Freact-yearly-calendar/lists"}