{"id":19740355,"url":"https://github.com/distributive-network/tui-calendar.react-calendar","last_synced_at":"2025-06-20T21:35:02.987Z","repository":{"id":137121267,"uuid":"384480882","full_name":"Distributive-Network/tui-calendar.react-calendar","owner":"Distributive-Network","description":"A fork of a React.js wrapper for ToastUI 's tui-calendar","archived":false,"fork":false,"pushed_at":"2022-06-20T15:21:52.000Z","size":462,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-06T00:04:48.791Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Distributive-Network.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-09T15:36:56.000Z","updated_at":"2021-11-04T19:58:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"406b424f-e7fa-470e-82a4-b4a61b0d08ad","html_url":"https://github.com/Distributive-Network/tui-calendar.react-calendar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Distributive-Network/tui-calendar.react-calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Distributive-Network%2Ftui-calendar.react-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Distributive-Network%2Ftui-calendar.react-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Distributive-Network%2Ftui-calendar.react-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Distributive-Network%2Ftui-calendar.react-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Distributive-Network","download_url":"https://codeload.github.com/Distributive-Network/tui-calendar.react-calendar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Distributive-Network%2Ftui-calendar.react-calendar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261020668,"owners_count":23098201,"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-11-12T01:20:43.384Z","updated_at":"2025-06-20T21:34:57.966Z","avatar_url":"https://github.com/Distributive-Network.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TOAST UI Calendar for React\n\n\u003e This is a React component wrapping [TOAST UI Calendar](https://github.com/nhn/tui.calendar).\n\n [![github version](https://img.shields.io/github/release/nhnent/toast-ui.react-calendar.svg)](https://github.com/nhn/toast-ui.react-calendar/releases/latest)\n[![npm version](https://img.shields.io/npm/v/@toast-ui/react-calendar.svg)](https://www.npmjs.com/package/@toast-ui/react-calendar)\n[![license](https://img.shields.io/github/license/nhnent/toast-ui.vue-calendar.svg)](https://github.com/nhn/toast-ui.react-calendar/blob/master/LICENSE)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/nhn/toast-ui.react-calendar/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)\n[![code with hearth by NHN](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-NHN-ff1414.svg)](https://github.com/nhn)\n\n## 🚩 Table of Contents\n* [Collect statistics on the use of open source](#collect-statistics-on-the-use-of-open-source)\n* [Install](#-install)\n    * [Using npm](#using-npm)\n* [Usage](#-usage)\n    * [Import](#Import)\n    * [Props](#props)\n    * [Instance Methods](#Instance-Methods)\n    * [Getting the root element](#Getting-the-root-element)\n    * [Event](#event)\n* [Pull Request Steps](#-pull-request-steps)\n* [Documents](#-documents)\n* [Contributing](#-contributing)\n* [License](#-license)\n\n## Collect statistics on the use of open source\n\nReact Wrapper of TOAST UI Calendar applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Calendar is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. \u003e “ui.toast.com\") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the `usageStatistics` props like the example below.\n\n```js\n\u003cCalendar\n  usageStatistics={false}\n/\u003e\n```\n\nOr, include `tui-code-snippet.js` (**v1.4.0** or **later**) and then immediately write the options as follows:\n\n```js\ntui.usageStatistics = false;\n```\n\n## 💾 Install\n\n### Using npm\n\n```sh\nnpm install --save @toast-ui/react-calendar\n```\n\n## 📊 Usage\nWe provide a [simple example](https://codesandbox.io/s/toast-uireact-calendar-82fi9) and you can start right away.\n\n### Import\n\nYou can use Toast UI Calendar for React as a ECMAScript module or a CommonJS module. As this module does not contain CSS files, you should import `tui-calendar.css` from `tui-calendar/dist` manually.\n\n* Using ECMAScript module\n\n```js\nimport Calendar from '@toast-ui/react-calendar';\nimport 'tui-calendar/dist/tui-calendar.css';\n\n// If you use the default popups, use this.\nimport 'tui-date-picker/dist/tui-date-picker.css';\nimport 'tui-time-picker/dist/tui-time-picker.css';\n```\n\n* Using CommonJS module\n\n```js\nvar Calendar = require('@toast-ui/react-calendar');\nrequire('tui-calendar/dist/tui-calendar.css');\n\n// If you use the default popups, use this.\nrequire('tui-date-picker/dist/tui-date-picker.css');\nrequire('tui-time-picker/dist/tui-time-picker.css');\n```\n\n### Props\nWe are supported in the form of props for [Options of TOAST UI Calendar](https://nhn.github.io/tui.calendar/latest/Options). Each name of props is same options of Toast UI Calendar except `view` is for `defaultView` of option. Additionally you can set schedules using `schedules` of prop.\n\n```js\nconst myTheme = {\n  // Theme object to extends default dark theme.\n};\n\nconst MyComponent = () =\u003e (\n  \u003cCalendar\n    height=\"900px\"\n    calendars={[\n      {\n        id: '0',\n        name: 'Private',\n        bgColor: '#9e5fff',\n        borderColor: '#9e5fff'\n      },\n      {\n        id: '1',\n        name: 'Company',\n        bgColor: '#00a9ff',\n        borderColor: '#00a9ff'\n      }\n    ]}\n    disableDblClick={true}\n    disableClick={false}\n    isReadOnly={false}\n    month={{\n      startDayOfWeek: 0\n    }}\n    schedules={[\n      {\n        id: '1',\n        calendarId: '0',\n        title: 'TOAST UI Calendar Study',\n        category: 'time',\n        dueDateClass: '',\n        start: today.toISOString(),\n        end: getDate('hours', today, 3, '+').toISOString()\n      },\n      {\n        id: '2',\n        calendarId: '0',\n        title: 'Practice',\n        category: 'milestone',\n        dueDateClass: '',\n        start: getDate('date', today, 1, '+').toISOString(),\n        end: getDate('date', today, 1, '+').toISOString(),\n        isReadOnly: true\n      },\n      {\n        id: '3',\n        calendarId: '0',\n        title: 'FE Workshop',\n        category: 'allday',\n        dueDateClass: '',\n        start: getDate('date', today, 2, '-').toISOString(),\n        end: getDate('date', today, 1, '-').toISOString(),\n        isReadOnly: true\n      },\n      {\n        id: '4',\n        calendarId: '0',\n        title: 'Report',\n        category: 'time',\n        dueDateClass: '',\n        start: today.toISOString(),\n        end: getDate('hours', today, 1, '+').toISOString()\n      }\n    ]}\n    scheduleView\n    taskView\n    template={{\n      milestone(schedule) {\n        return `\u003cspan style=\"color:#fff;background-color: ${schedule.bgColor};\"\u003e${\n          schedule.title\n        }\u003c/span\u003e`;\n      },\n      milestoneTitle() {\n        return 'Milestone';\n      },\n      allday(schedule) {\n        return `${schedule.title}\u003ci class=\"fa fa-refresh\"\u003e\u003c/i\u003e`;\n      },\n      alldayTitle() {\n        return 'All Day';\n      }\n    }}\n    theme={myTheme}\n    timezones={[\n      {\n        timezoneOffset: 540,\n        displayLabel: 'GMT+09:00',\n        tooltip: 'Seoul'\n      },\n      {\n        timezoneOffset: -420,\n        displayLabel: 'GMT-08:00',\n        tooltip: 'Los Angeles'\n      }\n    ]}\n    useDetailPopup\n    useCreationPopup\n    view={selectedView} // You can also set the `defaultView` option.\n    week={{\n      showTimezoneCollapseButton: true,\n      timezonesCollapsed: true\n    }}\n  /\u003e\n);\n```\n\n#### Theme\nWrite own theme object. [Link - See \"themeConfig\"](https://nhn.github.io/tui.calendar/latest/themeConfig)\n\n### Instance Methods\n\nFor using [instance methods of TOAST UI Calendar](https://nhn.github.io/tui.calendar/latest/Calendar), first thing to do is creating Refs of wrapper component using [`createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs). But the wrapper component does not provide a way to call instance methods of TOAST UI Calendar directly. Instead, you can call `getInstance()` method of the wrapper component to get the instance, and call the methods on it.\n\n```js\nconst calendarOptions = {\n  // sort of option properties.\n};\n\nclass MyComponent extends React.Component {\n  calendarRef = React.createRef();\n\n  handleClickNextButton = () =\u003e {\n    const calendarInstance = this.calendarRef.current.getInstance();\n\n    calendarInstance.next();\n  };\n\n  render() {\n    return (\n      \u003c\u003e\n        \u003cCalendar\n          ref={this.calendarRef}\n          {...calendarOptions}\n        /\u003e\n        \u003cbutton onClick={this.handleClickNextButton}\u003eGo next!\u003c/button\u003e\n      \u003c/\u003e\n    );\n  }\n}\n```\n\n### Getting the root element\n\nAn instance of the wrapper component also provides a handy method for getting the root element. If you want to manipulate the root element directly, you can call `getRootElement` to get the element.\n\n```js\nclass MyComponent extends React.Component {\n  calendarRef = React.createRef();\n\n  handleClickButton = () =\u003e {\n    this.calendarRef.current.getRootElement().classList.add('calendar-root');\n  };\n\n  render() {\n    return (\n      \u003c\u003e\n        \u003cCalendar\n          ref={this.calendarRef}\n          {...calendarOptions}\n        /\u003e\n        \u003cbutton onClick={this.handleClickButton}\u003eClick!\u003c/button\u003e\n      \u003c/\u003e\n    );\n  }\n}\n```\n\n### Event\n\n[All the events of TOAST UI Calendar](https://nhn.github.io/tui.calendar/latest/Calendar#event-afterRenderSchedule) are supported in the form of `on[EventName]` props. The first letter of each event name should be capitalized. For example, for using `mousedown` event you can use `onMousedown` prop like the example below.\n\n```js\nclass MyComponent extends React.Component {\n  handleClickDayname = (ev) =\u003e {\n    // view : week, day\n    console.group('onClickDayname');\n    console.log(ev.date);\n    console.groupEnd();\n  };\n\n  render() {\n    return (\n      \u003cCalendar\n        onClickDayname={this.handleClickDayname}\n      /\u003e\n    );\n  }\n}\n```\n\n## 🔧 Pull Request Steps\n\nTOAST UI products are open source, so you can create a pull request(PR) after you fix issues.\nRun npm scripts and develop yourself with the following process.\n\n### Setup\n\nFork `develop` branch into your personal repository.\nClone it to local computer. Install node modules.\nBefore starting development, you should check to haveany errors.\n\n``` sh\n$ git clone https://github.com/{your-personal-repo}/[[repo name]].git\n$ cd [[repo name]]\n$ npm install\n```\n\n### Develop\n\nLet's start development!\n\n### Pull Request\n\nBefore PR, check to test lastly and then check any errors.\nIf it has no error, commit and then push it!\n\nFor more information on PR's step, please see links of Contributing section.\n\n## 💬 Contributing\n* [Code of Conduct](https://github.com/nhn/toast-ui.react-calendar/blob/master/CODE_OF_CONDUCT.md)\n* [Contributing guideline](https://github.com/nhn/toast-ui.react-calendar/blob/master/CONTRIBUTING.md)\n* [Commit convention](https://github.com/nhn/toast-ui.react-calendar/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md)\n\n## 📜 License\nThis software is licensed under the [MIT](./LICENSE) © [NHN.](https://github.com/nhn)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdistributive-network%2Ftui-calendar.react-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdistributive-network%2Ftui-calendar.react-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdistributive-network%2Ftui-calendar.react-calendar/lists"}