This is toast ui calendar presentation.

1. This is
Arcana Meetup 2019/04/19
#49 kasiwagi
presentation

2. What is ?
多くのWrappersがあります。
Vue、React、Angular5。
More info on how to use this template at www.slidescarnival.com/help-use-presentation-template
This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention
SlidesCarnival and other resources used in a slide footer.
フル機能のJavaScriptスケジュールカレン
ダー
TOAST UIカレンダーはフル機能のカレンダーです。
さまざまな表示タイプ、デフォルトのポップアップ、スケ
ジュールのドラッグまたはサイズ変更、および使いや
すいカスタマイズ可能なテーマを体験できます。
2
Browser Support
+9

3. さらに
は MIT License です
3

4. “◍ 以下に定める条件に従い、本ソフトウェアおよび関連文書のファイル（以下「ソフトウェア」）の複製を取得するすべての人に対し、ソ
フトウェアを無制限に扱うことを無償で許可します。これには、ソフトウェアの複製を使用、複写、変更、結合、掲載、頒布、サブラ
イセンス、および/または販売する権利、およびソフトウェアを提供する相手に同じことを許可する権利も無制限に含まれます。
◍ 上記の著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載するものとします。
◍ ソフトウェアは「現状のまま」で、明示であるか暗黙であるかを問わず、何らの保証もなく提供されます。ここでいう保証とは、商品性、
特定の目的への適合性、および権利非侵害についての保証も含みますが、それに限定されるものではありません。 作者または著
作権者は、契約行為、不法行為、またはそれ以外であろうと、ソフトウェアに起因または関連し、あるいはソフトウェアの使用または
その他の扱いによって生じる一切の請求、損害、その他の義務について何らの責任も負わないものとします。
4
https://ja.osdn.net/projects/opensource/wiki/licenses%2FMI
T_license

5. を見てみよう
5

6. 1.
「なんてかっこいいの」毎月、毎週、毎日そして
豊富なビュータイプ
How Cool: Monthly, Weekly, Daily and Various View Types.
6

7. Monthly
7
Weekly
Daily
2Weeks

8. 2.
「使いやすい」スケジュールのドラッグとサイズ変
更
Easy to Use: Dragging and Resizing a Schedule
8

9. Dragging
9
Resizing

10. 3.
「すぐに使える」デフォルトのポップアップ
Ready to Use: Default Popups
10

11. Creation Popup
11
Detail Popup

12. 特徴まとめ
◍ さまざまな表示タイプをサポートします：毎日、毎週、毎月（6週間、2週間、3週間）
Supports various view types: daily, weekly, monthly(6 weeks, 2 weeks, 3 weeks)
◍ マイルストーンとタスクスケジュールの効率的な管理をサポート
Supports efficient management of milestone and task schedules
◍ 週末の狭い幅をサポート
Supports the narrow width of weekend
◍ 開始曜日の変更をサポート
Supports changing start day of week
◍ 日付とスケジュール情報のUI（グリッドセルのヘッダーとフッターを含む）のカスタマイズをサポートします。
Supports customizing the date and schedule information UI(including a header and
a footer of grid cell)
◍ マウスドラッグによるスケジュール調整をサポート
Supports adjusting a schedule by mouse dragging
◍ テーマによるUIのカスタマイズをサポート
Supports customizing UI by theme
12

13. をプロジェクトで実際に使ってみた
Tried using TOAST UI Calendar in a project .
13

14. “
プロジェクトでLaravelを採用したため、
親和性の高いVue.jsで実装してみました。
14

15. しかしあれほど優秀な
でも一つの問題が発生しました。
15

16. ポップアップのカスタマイズがとても、
とても大変なのです。
16

17. ポップアップってどんなもの？
17
Creation Popup Detail Popup

18. ポップアップってどんなもの？
18
Detail PopupCreation Popup

19. カスタマイズとは？
19
これこれを

20. “
にはポップアップをカスタマイズする
オプションは用意されていません。
20

21. “
https://github.com/nhn/tui.calendar/issues/231
21

22. forkしてくれって書いてあるけど、
Vue.js で Component化すればメンテナンスや変更
に強くなりそうだ。
22

23. そのため Creation PopupをVue.jsで
自作しました。
23

24. 幸いにも、 は
Popupのカスタマイズを許容しているので
24

25. useCreationPopup: false, と
設定すれば、
25

26. カスタマイズとは？
26
これこれが

27. 表示されなくなるので、
27

28. 代わりに
28

29. カスタマイズとは？
29
これを これ

30. を作成し、表示さることに成功しました！
30

31. わーい！
😂
31

32. Popupをで 自作した （コピペした）ので、様々な弊
害が生まれました。
32

33. 副作用一覧
Popupの表示位置が彼方へ行
ってしまった
guideElements.
getBoundingClientRect()で位置を
取得し、クリックした箇所に設定した。
Popup外クリックでPopupが消え
なくなった
Popup外をクリックしたらPopupを閉じ
る処理を追加した。
Datepickerを自前で用意しなく
てはいけなくなった
tui-date-picker というものがあったの
でそれを使用した。
Popupにデータを設定しなけれ
ばいけなくなった
地道に設定した。取得もした。
コンソールエラーが出るようになっ
た
Uncaught TypeError: Cannot read
property 'style' of null
clearGuideElement()をしないといけ
ないっぽいけど、手付かず。
よくわからないCSSがたくさんある
既存のPopupをコピペしてきたため、
消すに消せないidやCSSがたくさんあ
る。から消したい。
33

34. Thanks!素敵な 生活を
Have a nice TOAST UI Calendar life
👍
34