{"id":20903748,"url":"https://github.com/mormat/react-scheduler","last_synced_at":"2025-05-13T04:33:21.011Z","repository":{"id":153512322,"uuid":"615591736","full_name":"mormat/react-scheduler","owner":"mormat","description":"A google-like scheduler component for React","archived":false,"fork":false,"pushed_at":"2025-04-30T17:15:10.000Z","size":509,"stargazers_count":5,"open_issues_count":4,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-30T17:42:29.885Z","etag":null,"topics":["agenda","nodejs","planner","react","react-component","scheduler"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mormat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2023-03-18T04:51:12.000Z","updated_at":"2025-04-27T17:20:29.000Z","dependencies_parsed_at":"2023-11-17T14:11:05.778Z","dependency_job_id":"f5c4e1df-51ed-4d49-a1bd-5157d7588dba","html_url":"https://github.com/mormat/react-scheduler","commit_stats":null,"previous_names":["mormat/react-scheduler"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mormat%2Freact-scheduler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mormat%2Freact-scheduler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mormat%2Freact-scheduler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mormat%2Freact-scheduler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mormat","download_url":"https://codeload.github.com/mormat/react-scheduler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253877265,"owners_count":21977632,"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":["agenda","nodejs","planner","react","react-component","scheduler"],"created_at":"2024-11-18T13:14:48.982Z","updated_at":"2025-05-13T04:33:19.856Z","avatar_url":"https://github.com/mormat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @mormat/react-scheduler \n\nA google-like scheduler component for React\n\nweek view                 | month view\n:-------------------------:|:-------------------------:\n![preview](docs/week-view.png) | ![preview](docs/month-view.png)\n\n[Demo](https://mormat.github.io/react-scheduler/) -\n[Examples](https://mormat.github.io/react-scheduler/examples.html)\n\nThis is mostly a wrapper of this [web component](https://mormat.github.io/jscheduler_ui/)\n\nAvailable features :\n- switch between views `day`, `week` or `month`\n- drag and drop events\n- create/update/delete events\n- few dependencies : only `React` (\u003e= 17.0.0) and `ReactDOM` (\u003e= 17.0.0) are required.\n\n\n\n## Installation\n\n```\nnpm install @mormat/react-scheduler\n```\n\n### Stylesheet\n\nThe following line can be included in your `src/index.js` or `App.js` file\n```\nimport '@mormat/react-scheduler/dist/react_scheduler.css'\n```\n\nThe css can also be loaded using [unpkg](https://unpkg.com)\n```html\n\u003chead\u003e\n    \u003clink \n        rel=\"stylesheet\" \n        href=\"https://unpkg.com/@mormat/react-scheduler/dist/react_scheduler.css\"\n    \u003e\n\u003c/head\u003e\n```\n\n## Usage\n\n### Importing the component\n\n```js\nimport Scheduler from \"@mormat/react-scheduler\";\n```\n\n### Loading some events\n\n```js\nimport { render } from 'react-dom';\n\nconst currentDate = \"2024-10-08\";\n\nconst events = [\n    { \"label\": \"interview\",  \"start\": \"2024-10-08 10:00\", \"bgColor\": \"#0288d1\" },\n    { \"label\": \"conference\", \"start\": \"2024-10-09 14:00\", \"end\": \"2024-10-09 18:00\", \"bgColor\": \"#9575cd\" },\n    { \"label\": \"meeting\", \"start\": \"2024-10-11 09:00\", \"end\": \"2024-10-11 18:00\", \"bgColor\": \"#0fc4a7\" },\n    { \"label\": \"training course\", \"start\": \"2024-10-08 09:00\", \"end\": \"2024-10-11 18:00\", \"bgColor\": \"#856404\" },\n]\n\nrender(\n    \u003cScheduler \n        currentDate = { currentDate } \n        events = { events } \n    /\u003e, \n    document.getElementById('scheduler')\n);\n```\n\n### More examples\n\n[https://mormat.github.io/react-scheduler/examples.html](https://mormat.github.io/react-scheduler/examples.html)\n\n## Availables props\n\n### `events`\n\nThe events can be defined with a static array or a function for dynamic loading\n\n#### Using an array of objects \nEach object should at least contains the attributes below:\n| attr    | type      | description        |\n|-|-|-|\n| `label` | string    | Describe the event |\n| `start` | string|integer|Date |  Start of the event. The value must be compliant with the constructor of [Date()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date) |\n| `end`   | string|integer|Date |  End of the event. The value must be compliant with the constructor of [Date()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date) |\n\n#### Using a function for dynamic loading\n\nSee example here : [loading dynamic events](https://mormat.github.io/react-scheduler/examples.html?p=loading_ajax_events)\n\n### `currentDate`: string|date|integer\n\nIf defined, the scheduler will start displaying events from this date.\n\nThe value must be compliant with the constructor of [Date()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date)\n\n### `viewMode`: string\n\nIf defined, the scheduler will start displaying events from this specific view mode.\n\nExpected values are `day`, `week`, `month`\n\n### `dateLocale`: string\n\nThe i18n locale used to format dates. \n\nFor instances: `en`, `it`, `es` ...\n\n### `onEventAdd`: callback\n\nA listener called when the user add a event on the scheduler\n\nSee example [Creating event](https://mormat.github.io/react-scheduler/examples.html?p=creating_event)\n\n### `onEventEdit`: callback\n\nA listener called when the user edit a event on the scheduler\n\nSee example [Edit event](https://mormat.github.io/react-scheduler/examples.html?p=editing_event)\n\n### `onEventDrop`: callback\n\nA listener called when the user drop on event on the scheduler\n\nSee example [Drag and drop event](https://mormat.github.io/react-scheduler/examples.html?p=drag_and_drop_event)\n\n### `onEventResize`: callback\n\nA listener called when the user resize an event on the scheduler\n\nSee example [Drag and drop event](https://mormat.github.io/react-scheduler/examples.html?p=resize_event)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmormat%2Freact-scheduler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmormat%2Freact-scheduler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmormat%2Freact-scheduler/lists"}