Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
This is
Arcana Meetup 2019/04/19
#49 kasiwagi
presentation
What is ?
多くのWrappersがあります。
Vue、React、Angular5。
More info on how to use this template at www.slidescarnival.com/help-use-p...
さらに
は MIT License です
3
“◍ 以下に定める条件に従い、本ソフトウェアおよび関連文書のファイル(以下「ソフトウェア」)の複製を取得するすべての人に対し、ソ
フトウェアを無制限に扱うことを無償で許可します。これには、ソフトウェアの複製を使用、複写、変更、結合、掲載、頒布、...
を見てみよう
5
1.
「なんてかっこいいの」毎月、毎週、毎日そして
豊富なビュータイプ
How Cool: Monthly, Weekly, Daily and Various View Types.
6
Monthly
7
Weekly
Daily
2Weeks
2.
「使いやすい」スケジュールのドラッグとサイズ変
更
Easy to Use: Dragging and Resizing a Schedule
8
Dragging
9
Resizing
3.
「すぐに使える」デフォルトのポップアップ
Ready to Use: Default Popups
10
Creation Popup
11
Detail Popup
特徴まとめ
◍ さまざまな表示タイプをサポートします:毎日、毎週、毎月(6週間、2週間、3週間)
Supports various view types: daily, weekly, monthly(6 weeks, 2 weeks, 3 w...
をプロジェクトで実際に使ってみた
Tried using TOAST UI Calendar in a project .
13
“
プロジェクトでLaravelを採用したため、
親和性の高いVue.jsで実装してみました。
14
しかしあれほど優秀な
でも一つの問題が発生しました。
15
ポップアップのカスタマイズがとても、
とても大変なのです。
16
ポップアップってどんなもの?
17
Creation Popup Detail Popup
ポップアップってどんなもの?
18
Detail PopupCreation Popup
カスタマイズとは?
19
これこれを
“
にはポップアップをカスタマイズする
オプションは用意されていません。
20
“
https://github.com/nhn/tui.calendar/issues/231
21
forkしてくれって書いてあるけど、
Vue.js で Component化すればメンテナンスや変更
に強くなりそうだ。
22
そのため Creation PopupをVue.jsで
自作しました。
23
幸いにも、 は
Popupのカスタマイズを許容しているので
24
useCreationPopup: false, と
設定すれば、
25
カスタマイズとは?
26
これこれが
表示されなくなるので、
27
代わりに
28
カスタマイズとは?
29
これを これ
を作成し、表示さることに成功しました!
30
わーい!
😂
31
Popupをで 自作した (コピペした)ので、様々な弊
害が生まれました。
32
副作用一覧
Popupの表示位置が彼方へ行
ってしまった
guideElements.
getBoundingClientRect()で位置を
取得し、クリックした箇所に設定した。
Popup外クリックでPopupが消え
なくなった
Popup...
Thanks!素敵な 生活を
Have a nice TOAST UI Calendar life
👍
34
Upcoming SlideShare
Loading in …5
×

This is toast ui calendar presentation

167 views

Published on

This is toast ui calendar presentation.

Published in: Software
  • Be the first to comment

  • Be the first to like this

This is toast ui calendar presentation

  1. 1. This is Arcana Meetup 2019/04/19 #49 kasiwagi presentation
  2. 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. 3. さらに は MIT License です 3
  4. 4. “◍ 以下に定める条件に従い、本ソフトウェアおよび関連文書のファイル(以下「ソフトウェア」)の複製を取得するすべての人に対し、ソ フトウェアを無制限に扱うことを無償で許可します。これには、ソフトウェアの複製を使用、複写、変更、結合、掲載、頒布、サブラ イセンス、および/または販売する権利、およびソフトウェアを提供する相手に同じことを許可する権利も無制限に含まれます。 ◍ 上記の著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載するものとします。 ◍ ソフトウェアは「現状のまま」で、明示であるか暗黙であるかを問わず、何らの保証もなく提供されます。ここでいう保証とは、商品性、 特定の目的への適合性、および権利非侵害についての保証も含みますが、それに限定されるものではありません。 作者または著 作権者は、契約行為、不法行為、またはそれ以外であろうと、ソフトウェアに起因または関連し、あるいはソフトウェアの使用または その他の扱いによって生じる一切の請求、損害、その他の義務について何らの責任も負わないものとします。 4 https://ja.osdn.net/projects/opensource/wiki/licenses%2FMI T_license
  5. 5. を見てみよう 5
  6. 6. 1. 「なんてかっこいいの」毎月、毎週、毎日そして 豊富なビュータイプ How Cool: Monthly, Weekly, Daily and Various View Types. 6
  7. 7. Monthly 7 Weekly Daily 2Weeks
  8. 8. 2. 「使いやすい」スケジュールのドラッグとサイズ変 更 Easy to Use: Dragging and Resizing a Schedule 8
  9. 9. Dragging 9 Resizing
  10. 10. 3. 「すぐに使える」デフォルトのポップアップ Ready to Use: Default Popups 10
  11. 11. Creation Popup 11 Detail Popup
  12. 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. 13. をプロジェクトで実際に使ってみた Tried using TOAST UI Calendar in a project . 13
  14. 14. “ プロジェクトでLaravelを採用したため、 親和性の高いVue.jsで実装してみました。 14
  15. 15. しかしあれほど優秀な でも一つの問題が発生しました。 15
  16. 16. ポップアップのカスタマイズがとても、 とても大変なのです。 16
  17. 17. ポップアップってどんなもの? 17 Creation Popup Detail Popup
  18. 18. ポップアップってどんなもの? 18 Detail PopupCreation Popup
  19. 19. カスタマイズとは? 19 これこれを
  20. 20. “ にはポップアップをカスタマイズする オプションは用意されていません。 20
  21. 21. “ https://github.com/nhn/tui.calendar/issues/231 21
  22. 22. forkしてくれって書いてあるけど、 Vue.js で Component化すればメンテナンスや変更 に強くなりそうだ。 22
  23. 23. そのため Creation PopupをVue.jsで 自作しました。 23
  24. 24. 幸いにも、 は Popupのカスタマイズを許容しているので 24
  25. 25. useCreationPopup: false, と 設定すれば、 25
  26. 26. カスタマイズとは? 26 これこれが
  27. 27. 表示されなくなるので、 27
  28. 28. 代わりに 28
  29. 29. カスタマイズとは? 29 これを これ
  30. 30. を作成し、表示さることに成功しました! 30
  31. 31. わーい! 😂 31
  32. 32. Popupをで 自作した (コピペした)ので、様々な弊 害が生まれました。 32
  33. 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. 34. Thanks!素敵な 生活を Have a nice TOAST UI Calendar life 👍 34

×