{"id":25583908,"url":"https://github.com/antonniklasson/react-dategrid","last_synced_at":"2025-10-06T07:56:57.208Z","repository":{"id":142725958,"uuid":"128628546","full_name":"AntonNiklasson/react-dategrid","owner":"AntonNiklasson","description":"A minimal foundation for building calendars with React","archived":false,"fork":false,"pushed_at":"2018-04-18T14:50:59.000Z","size":239,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-05T21:55:23.625Z","etag":null,"topics":["calendar","react","render-props"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AntonNiklasson.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-08T10:16:33.000Z","updated_at":"2023-03-10T08:29:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"e2e7f233-9b22-4021-8f8c-193673ac3059","html_url":"https://github.com/AntonNiklasson/react-dategrid","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/AntonNiklasson/react-dategrid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonNiklasson%2Freact-dategrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonNiklasson%2Freact-dategrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonNiklasson%2Freact-dategrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonNiklasson%2Freact-dategrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AntonNiklasson","download_url":"https://codeload.github.com/AntonNiklasson/react-dategrid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonNiklasson%2Freact-dategrid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278577933,"owners_count":26009701,"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","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","react","render-props"],"created_at":"2025-02-21T06:33:54.056Z","updated_at":"2025-10-06T07:56:57.189Z","avatar_url":"https://github.com/AntonNiklasson.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Dategrid 📅\n\nA calendar component based on [render props](https://reactjs.org/docs/render-props.html).\n\nThe approach is to _make as few decisions as possible_. The only markup it renders is the structure for the underlying table, everything else is up to the consumer. It has no knowledge of something like a _selected date_ or how do style past dates. Implement that kind of behaviour in `renderDay`. The only thing it really needs is a moment instance to base its view on.\n\n## Install\n\n```\nnpm install --save react-dategrid\nyarn add react-dategrid\n```\n\n## Usage\n\nEach `day` is a moment instance. The `view` is what is currently shown by the component, also represented by a moment instance.\n\n```javascript\nimport Dategrid from 'react-dategrid';\n\nclass Datepicker extends React.Component {\n  state = {\n    view: moment()\n  }\n\n  renderTitle = (view) =\u003e {\n    return \u003cstrong\u003e{view.format('MMMM YYYY')}\u003c/strong\u003e;\n  }\n\n  renderWeekday = (index) =\u003e {\n    const weekday = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'][index];\n\n    return \u003cdiv className={index \u003c 5 ? 'workday' : 'weekend'}\u003e{weekday}\u003c/div\u003e }\n\n  renderDay = (day, view) =\u003e {\n    if (moment().isSame(day, \"day\")) {\n      return (\n        \u003cdiv className=\"day day--today\"\u003e{day.date()}\u003c/div\u003e\n      );\n    }\n\n    return \u003cdiv className=\"day\"\u003e{day.date()}\u003c/div\u003e;\n  }\n\n  render() {\n    return (\n      \u003cDategrid\n        view={this.state.view}\n        renderTitle={this.renderTitle}\n        renderWeekday={this.renderWeekday}\n        renderDay={this.renderDay}\n      /\u003e\n    );\n  }\n}\n```\n\n## Props\n\n### view\n\nThe current view to render.\n\n### onViewChange(updatedView)\n\nCalled as the view updates.\n\n### renderTitle(view)\n\nReceives the current view instance. This will be placed between the navigations with a colspan fixed to 5.\n\n### renderPreviousNavigation(props)\n\nReceives props to be spread on the interactive navigation element.\n\n### renderNextNavigation(props)\n\nReceives props to be spread on the interactive navigation element.\n\n### renderDay(day, view)\n\nReceives a specific day as a moment instance together with the current view. This will be rendered into a `\u003ctd /\u003e`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantonniklasson%2Freact-dategrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantonniklasson%2Freact-dategrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantonniklasson%2Freact-dategrid/lists"}