Skip to content

Commit 6ad0b8e

Browse files
heenakwagheenakwag
authored
Merge pull request #1170 from nhn/docs/update-readme
docs: update README, getting-started
2 parents eb273ae + fd10f10 commit 6ad0b8e

33 files changed

+625
-508
lines changed

‎README.md

+37-18
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,52 @@
11
# ![TOAST UI Calendar](https://user-images.githubusercontent.com/26706716/39230183-7f8ff186-48a0-11e8-8d9c-9699d2d0e471.png)
22

3-
> 🍞📅 A JavaScript schedule calendar that is full featured. Now your service just got the customizable calendar.
3+
> 🍞📅 A JavaScript calendar that is full featured. Now your service just got the customizable calendar.
4+
45
[![npm](https://img.shields.io/npm/v/@toast-ui/calendar.svg)](https://www.npmjs.com/package/@toast-ui/calendar)
56
[![GitHub license](https://img.shields.io/github/license/nhn/tui.calendar.svg)](https://github.com/nhn/tui.calendar/blob/main/LICENSE)
6-
[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/nhn/tui.project-name/labels/help%20wanted)
7+
[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/nhn/tui.calendar/labels/help%20wanted)
78
[![code with hearth by NHN Cloud](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-NHN_Cloud-ff1414.svg)](https://github.com/nhn)
89

9-
## 🚧 The new version is coming out
10-
11-
You're now looking at the `main` branch of the latest version of TOAST UI Calendar. You can try [the alpha version](https://github.com/nhn/tui.calendar/releases/tag/v2.0.0-alpha.4) of the new calendar.
12-
13-
```sh
14-
npm install --save @toast-ui/calendar
15-
```
16-
17-
For the previous version, Please check out the [`v1` branch](https://github.com/nhn/tui.calendar/tree/v1).
10+
## 🚩 Table of Contents
11+
12+
- [📦 Packages](#-packages)
13+
- [📙 Documents](#-documents)
14+
- [Collect statistics on the use of open source](#collect-statistics-on-the-use-of-open-source)
15+
- [📅 Features](#-features)
16+
- [✨ Monthly, Weekly, Daily and Various View Types](#-monthly-weekly-daily-and-various-view-types)
17+
- [Easy to Use: Dragging and Resizing a Schedule](#easy-to-use-dragging-and-resizing-a-schedule)
18+
- [Ready to Use: Default Popups](#ready-to-use-default-popups)
19+
- [🎨 Other Features](#-other-features)
20+
- [💬 Contributing](#-contributing)
21+
- [🌏 Browser Support](#-browser-support)
22+
- [🔩 Dependencies](#-dependencies)
23+
- [🍞 TOAST UI Family](#-toast-ui-family)
24+
- [🚀 Used By](#-used-by)
25+
- [📜 License](#-license)
1826

1927
## 📦 Packages
2028

2129
The functionality of TOAST UI Calendar is available when using the Plain JavaScript, React, Vue Component.
2230

23-
- [@toast-ui/calendar](https://github.com/nhn/tui.calendar/tree/main/apps/calendar) - Plain JavaScript component implemented by NHN Cloud.
24-
- 🚧 React & Vue wrappers are coming with the public release.
31+
- [@toast-ui/calendar](/apps/calendar) - Plain JavaScript component implemented by [NHN Cloud](https://github.com/nhn).
32+
- [@toast-ui/react-calendar](/apps/react-calendar) - React wrapper component implemented by [NHN Cloud](https://github.com/nhn).
33+
- [@toast-ui/vue-calendar](/apps/vue-calendar) - Vue wrapper component implemented by [NHN Cloud](https://github.com/nhn).
2534

2635
## 📙 Documents
2736

2837
- [English](./docs/README.md)
2938
- [Korean](./docs/ko/README.md)
3039

40+
## Collect statistics on the use of open source
41+
42+
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. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage.
43+
44+
To disable GA, refer to the docs below.
45+
46+
- [TOAST UI Calendar](/docs/en/guide/getting-started.md#disable-to-collect-hostname-for-google-analyticsga)
47+
- [TOAST UI Calendar for React](/apps/react-calendar/docs/en/guide/getting-started.md#disable-to-collect-hostname-for-google-analyticsga)
48+
- [TOAST UI Calendar for Vue](/apps/vue-calendar/docs/en/guide/getting-started.md#disable-to-collect-hostname-for-google-analyticsga)
49+
3150
## 📅 Features
3251

3352
### ✨ Monthly, Weekly, Daily and Various View Types
@@ -64,10 +83,10 @@ The functionality of TOAST UI Calendar is available when using the Plain JavaScr
6483

6584
## 💬 Contributing
6685

67-
- [Code of Conduct](https://github.com/nhn/tui.calendar/blob/main/CODE_OF_CONDUCT.md)
68-
- [Contributing guideline](https://github.com/nhn/tui.calendar/blob/main/CONTRIBUTING.md)
69-
- [Issue guideline](https://github.com/nhn/tui.calendar/blob/main/docs/ISSUE_TEMPLATE.md)
70-
- [Commit convention](https://github.com/nhn/tui.calendar/blob/main/docs/COMMIT_MESSAGE_CONVENTION.md)
86+
- [Code of Conduct](/CODE_OF_CONDUCT.md)
87+
- [Contributing Guidelines](/CONTRIBUTING.md)
88+
- [Commit Message Convention](/docs/COMMIT_MESSAGE_CONVENTION.md)
89+
- [Issue Guidelines](/docs/ISSUE_TEMPLATE.md)
7190

7291
## 🌏 Browser Support
7392

@@ -102,4 +121,4 @@ The functionality of TOAST UI Calendar is available when using the Plain JavaScr
102121

103122
## 📜 License
104123

105-
This software is licensed under the [MIT](https://github.com/nhn/tui.calendar/blob/main/LICENSE) © [NHN Cloud](https://github.com/nhn).
124+
This software is licensed under the [MIT](/LICENSE) © [NHN Cloud](https://github.com/nhn).

‎apps/calendar/README.md

+119-99
Original file line numberDiff line numberDiff line change
@@ -1,163 +1,183 @@
11
# ![TOAST UI Calendar](https://user-images.githubusercontent.com/26706716/39230183-7f8ff186-48a0-11e8-8d9c-9699d2d0e471.png)
22

3-
> A JavaScript schedule calendar that is full featured. Now your service just got the customizable calendar.
3+
> A JavaScript calendar that is full featured. Now your service just got the customizable calendar.
44
55
[![npm](https://img.shields.io/npm/v/@toast-ui/calendar.svg)](https://www.npmjs.com/package/@toast-ui/calendar)
6+
[![license](https://img.shields.io/github/license/nhn/tui.calendar.svg)](https://github.com/nhn/tui.calendar/blob/master/LICENSE)
7+
[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/nhn/tui.calendar/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)
8+
[![code with hearth by NHN Cloud](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-NHN_Cloud-ff1414.svg)](https://github.com/nhn)
69

710
## 🚩 Table of Contents
811

12+
- [📙 Documents](#-documents)
913
- [Collect statistics on the use of open source](#collect-statistics-on-the-use-of-open-source)
1014
- [💾 Install](#-install)
11-
- [Via Package Manager](#via-package-manager)
12-
- [npm](#npm)
15+
- [Using npm](#using-npm)
16+
- [Via Contents Delivery Network (CDN)](#via-contents-delivery-network-cdn)
1317
- [Download Source Files](#download-source-files)
14-
- [🔨 Usage](#-usage)
15-
- [HTML](#html)
16-
- [JavaScript](#javascript)
17-
- [Load](#load)
18+
- [📅 Usage](#-usage)
19+
- [Load](#load)
20+
- [Implement](#implement)
21+
- [🔧 Pull Request Steps](#-pull-request-steps)
22+
- [Setup](#setup)
23+
- [Develop](#develop)
24+
- [Pull Request](#pull-request)
25+
- [💬 Contributing](#-contributing)
26+
- [📜 License](#-license)
1827

19-
## 🚧 The new version is coming out
20-
21-
You're now looking at the `main` branch of the latest version of TOAST UI Calendar. You can try [the alpha version](https://github.com/nhn/tui.calendar/releases/tag/v2.0.0-alpha.4) of the new calendar.
22-
23-
```sh
24-
npm install --save @toast-ui/calendar
25-
```
28+
## 📙 Documents
2629

27-
For the previous version, Please check out the [`v1` branch](https://github.com/nhn/tui.calendar/tree/v1).
30+
- [English](./docs/README.md)
31+
- [Korean](./docs/ko/README.md)
2832

2933
## Collect statistics on the use of open source
3034

31-
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. > “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 following `usageStatistics` option when creating a calendar.
35+
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. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage.
3236

33-
To disable GA use the [options](https://nhn.github.io/tui.calendar/2.0.0-alpha/?path=/story/documentation-%ED%95%9C%EA%B5%AD%EC%96%B4-api-%EC%98%B5%EC%85%98--page#usagestatistics):
37+
To disable GA, set the [`usageStatistics` option](/docs/en/apis/options.md#usagestatistics) to `false`:
3438

3539
```js
3640
const calendar = new Calendar('#calendar', {
3741
usageStatistics: false
3842
});
3943
```
4044

41-
## 📙 Documents
42-
43-
- [English](../../docs/README.md)
44-
- [Korean](../../docs/ko/README.md)
45-
4645
## 💾 Install
4746

48-
TOAST UI products can be used by using the package manager or downloading the source directly.
49-
However, we highly recommend using the package manager.
50-
51-
### Via Package Manager
47+
### Using npm
5248

53-
TOAST UI products are registered in [npm](https://www.npmjs.com/).
54-
You can conveniently install it using the commands provided by each package manager.
55-
When using npm, be sure to use it in the environment [Node.js](https://nodejs.org) is installed.
56-
57-
#### npm
58-
59-
``` sh
60-
$ npm install --save @toast-ui/[email protected]
49+
```sh
50+
npm install --save @toast-ui/calendar
6151
```
6252

6353
### Via Contents Delivery Network (CDN)
6454

65-
🚧 **CDN assets are not provided in alpha.** 🚧
66-
6755
TOAST UI products are available over the CDN powered by [NHN Cloud](https://www.toast.com).
6856

69-
You can use the CDN as below.
70-
71-
Insert style sheet files
72-
7357
```html
74-
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-calendar/latest/toastui-calendar.min.css" />
75-
76-
<!-- If you use the default popups, use this. -->
77-
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
78-
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />
79-
```
58+
<link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />
59+
<script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
8060

81-
Insert JavaScript file
61+
<!-- To get bundle file for legacy browser -->
62+
<!-- <script src="https://uicdn.toast.com/calendar /latest/toastui-calendar.ie11.min.js"></script> -->
8263

83-
```html
84-
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
85-
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
86-
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
64+
<!-- Import as es module -->
65+
<!-- <script type="module" src="https:// uicdn.toast.com/calendar/latest/toastui-calendar.mjs"></script> -->
8766
```
8867

8968
If you want to use a specific version, use the tag name instead of `latest` in the url's path.
9069

9170
The CDN directory has the following structure.
9271

9372
```
94-
tui-calendar/
95-
├─ latest/
96-
│ ├─ tui-calendar.js
97-
│ └─ tui-calendar.min.js
98-
│ └─ tui-calendar.css
99-
│ └─ tui-calendar.min.css
100-
├─ v1.0.0/
101-
│ ├─ ...
73+
- uicdn.toast.com/
74+
├─ calendar/
75+
│ ├─ latest
76+
│ │ ├─ toastui-calendar.css
77+
│ │ ├─ toastui-calendar.js
78+
│ │ ├─ toastui-calendar.min.css
79+
│ │ ├─ toastui-calendar.min.js
80+
│ │ ├─ toastui-calendar.ie11.js
81+
│ │ ├─ toastui-calendar.ie11.min.js
82+
│ │ │ toastui-calendar.mjs
83+
│ ├─ v2.0.0/
10284
```
10385

10486
### Download Source Files
10587

106-
* [Download all sources for each version](https://github.com/nhn/tui.calendar/releases)
88+
- [Download all sources for each version](https://github.com/nhn/tui.calendar/releases)
10789

108-
## 🔨 Usage
90+
## 📅 Usage
10991

110-
### HTML
92+
### Load
11193

112-
Place a `<div></div>` where you want TOAST UI Calendar rendered.
94+
TOAST UI Calendar can be instantiated through the constructor function. There are three ways to access the constructor function depending on the environment.
11395

114-
```html
115-
<body>
116-
...
117-
<div id="calendar" style="height: 800px;"></div>
118-
...
119-
</body>
96+
```js
97+
/* ES6 module in Node.js environment */
98+
import Calendar from '@toast-ui/calendar';
99+
import '@toast-ui/calendar/toastui-calendar.css';
120100
```
121101

122-
### JavaScript
123-
124-
#### Using namespace in browser environment
125-
126-
```javascript
127-
const Calendar = tui.Calendar;
102+
```js
103+
/* CommonJS in Node.js environment */
104+
const Calendar = require('@toast-ui/calendar');
105+
require('@toast-ui/calendar/toastui-calendar.css');
128106
```
129107

130-
#### Using module format in node environment
131-
132-
```javascript
133-
const Calendar = require('tui-calendar'); /* CommonJS */
134-
require("tui-calendar/dist/tui-calendar.css");
135-
136-
// If you use the default popups, use this.
137-
require("tui-date-picker/dist/tui-date-picker.css");
138-
require("tui-time-picker/dist/tui-time-picker.css");
108+
```js
109+
/* in the browser environment namespace */
110+
const Calendar = tui.Calendar;
139111
```
140112

141-
```javascript
142-
import Calendar from 'tui-calendar'; /* ES Modules */
143-
import "tui-calendar/dist/tui-calendar.css";
113+
### Implement
144114

145-
// If you use the default popups, use this.
146-
import 'tui-date-picker/dist/tui-date-picker.css';
147-
import 'tui-time-picker/dist/tui-time-picker.css';
115+
```html
116+
<div id="calendar" style="height: 800px"></div>
148117
```
149118

150-
Then you can create a calendar instance with [options](https://nhn.github.io/tui.calendar/2.0.0-alpha/?path=/story/documentation-%ED%95%9C%EA%B5%AD%EC%96%B4-api-%EC%98%B5%EC%85%98--page) to set configuration.
151-
152119
```javascript
153120
const calendar = new Calendar('#calendar', {
154-
defaultView: 'month',
155-
taskView: true,
121+
defaultView: 'week',
156122
template: {
157-
monthDayName: (dayName) => {
158-
return '<span class="calendar-week-day-name__name">' + dayName.label + '</span>';
159-
}
160-
...
161-
}
123+
time(event) {
124+
const { start, end, title } = event;
125+
126+
return `<span style="color: white;">${formatTime(start)}~${formatTime(end)} ${title}</span>`;
127+
},
128+
allday(event) {
129+
return `<span style="color: gray;">${event.title}</span>`;
130+
},
131+
},
132+
calendars: [
133+
{
134+
id: 'cal1',
135+
name: 'Personal',
136+
backgroundColor: '#03bd9e',
137+
},
138+
{
139+
id: 'cal2',
140+
name: 'Work',
141+
backgroundColor: '#00a9ff',
142+
},
143+
],
162144
});
163145
```
146+
147+
## 🔧 Pull Request Steps
148+
149+
TOAST UI products are open source, so you can create a pull request(PR) after you fix issues.
150+
Run npm scripts and develop yourself with the following process.
151+
152+
### Setup
153+
154+
Fork `develop` branch into your personal repository.
155+
Clone it to local computer. Install node modules.
156+
Before starting development, you should check to have any errors.
157+
158+
``` sh
159+
git clone https://github.com/{your-personal-repo}/[[repo name]].git
160+
cd [[repo name]]
161+
npm install
162+
```
163+
164+
### Develop
165+
166+
Let's start development!
167+
168+
### Pull Request
169+
170+
Before PR, check to test lastly and then check any errors.
171+
If it has no error, commit and then push it!
172+
173+
For more information on PR's step, please see links of Contributing section.
174+
175+
## 💬 Contributing
176+
177+
- [Code of Conduct](/CODE_OF_CONDUCT.md)
178+
- [Contributing Guidelines](/CONTRIBUTING.md)
179+
- [Commit Message Convention](/docs/COMMIT_MESSAGE_CONVENTION.md)
180+
181+
## 📜 License
182+
183+
This software is licensed under the [MIT](/LICENSE) © [NHN Cloud](https://github.com/nhn).

‎apps/calendar/tuidoc.config.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
},
1616
{
1717
"title": "FE Development Lab",
18-
"linkUrl": "https://github.com/nhn/fe.javascript"
18+
"linkUrl": "https://ui.toast.com/"
1919
}
2020
],
2121
"main": {

0 commit comments

Comments
 (0)