黒猫のWeb的開発

Webやスマートフォンアプリ開発未経験者が何かを勉強して作っていくためのメモです。

dhtmlxGantt2.0でガントチャート

イベントのカレンダーを分かりやすく作りためため、JavaScriptで作ってみる。
日程が分かりやすいように、ガントチャート風にすることにする。

いろいろ調べたが、dhtmlxGanttがよさそうである。
もっと簡単そうなGanttViewなどもあったが、開発が止まってる?
サンプルがIEで表示できなかったのであきらめる。

いいね!と思った点

今は完全ではないが。日本語にもローカライズされそう。
英語だけどマニュアルがしっかりしている。
すごすぎる機能。
ライセンスがGPL

セットアップ

概要を見る感じ素人には機能がリッチすぎる気がする。
http://docs.dhtmlx.com/gantt/

とりあえずココからダウンロード
http://dhtmlx.com/docs/products/dhtmlxGantt/

ドキュメントはここ
http://docs.dhtmlx.com/gantt/whatsnew.html

ダウンロードしたらサンプルがヌルヌル動く。

これだけで、かっこいいサンプルが表示された・・・

<!DOCTYPE html>
<html>
	<head>
	   <script src="codebase/dhtmlxgantt.js"></script>
	   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">
	</head>
	<body>
	    <div id="gantt_here" style='width:1000px; height:400px;'></div>
	    <script type="text/javascript">
	        gantt.init("gantt_here");
	    </script>

	</body>
</html>

イベントカレンダー作ってみた

機能が豊富すぎるので、機能を削った。
タスクとユーザを、イベント名と開催場所に読み替える。
(もっとシンプルなものあったのかな・・・)

http://delta-site.net/sample/javascript/dhtmlxGantt/event_schedule.html

大体やったこと一覧

  • タスクの依存機能、リンク機能解除
  • 1ヶ月のみの日程表
  • Tooltipを削除
  • ダブルクリックで、詳細情報を表示
  • タスク(イベント)を編集不可能にした
  • 不要なアイコンを表示しないようにした

よくわからない点

  • Task Nameと Start Timeが日本語化されなかった。

追加したいこと

  • 土日の列の色を変える

JavaScriptは未だに分からないが、一日もかからなかった。
dhtmlxGanttはすごい!

JavaScript ライブラリ実践活用〔厳選111〕 (Software Design plus)

JavaScript ライブラリ実践活用〔厳選111〕 (Software Design plus)