📊
Reactで使えるGantt ChartのOSSを簡単に紹介する
こんにちは,motaです。
今回は、新人研修の一環で、社内ツールの開発を行う関係でその中でReactでGantt Chartを調査しました。調べても全然記事がなかったため、ここにメモ程度に残しておきます。
- React timeline calender
- frappe gantt
- rc-gantt
- Gantt Task React
React timeline calender
Starred 1.6k , Fork 510 , Latest updated at 2022/05
contributors 47
License : MIT
いいところ
ピンチイン・ピンチアウトでカレンダーの拡大縮小・横移動ができる。
サイドバーが使える
いろんな使い方の例がCodeSandboxにある
微妙なところ
子要素の表示が初学社にとっては難しかった。
APIはあるが、標準でビューモード（日・週・月）の切り替えボタンがない
なんか表示がバグって結局使わなかった。
Frappe Gantt
Starred 3.3k , Fork 739 , Latest updated at 2022/04
contributors 20
License : MIT
いいところ
モダンなUIな気がする
微妙なところ
サイドバーがない
React Libraryがあるけど、メンテがされてない
react gantt frappe
Latest update at 2020.
License : MIT ( not sure )
rc-gantt
Starred 25k , Fork 4 , Latest updated at 2022/09
contributors 2
License : MIT
いいところ
サイドバーがある
表示モードのボタンがある ( day / week / year / quater )
今日に戻るボタンがある
DBとの接続が楽だった。
子要素も標準で作れるし、子要素の子要素も可能
結局これを使った。
微妙なところ
中国語のドキュメント
ナレッジがネット上にほとんど落ちてない
Gantt Task React
Starred 287 , Fork 121 , Latest updated at 2022/07
contributors 8
License : MIT
demo : https://matematuk.github.io/gantt-task-react/
まとめ
ネットのどこをググってもあまり情報が落ちていなく、みなさん自作しているのか、そもそもReactでGanttを実装する機会がないのか、JSのライブラリでやっているんですかね？
簡易的ですが、Gantt Chartを無料でOSSでReactで実装したい方のググりが楽になれば嬉しいと思い執筆しました。
Discussion