カテゴリー内の他の記事

To Do をガントチャートで表示する

Index

概要

To Doアプリのレコード一覧をガントチャート形式で表示するサンプルです。

  • レコード一覧画面で、表示するレコードがある場合にガントチャートを表示します。
  • 優先度フィールドの値に応じてガントチャートの色を変えています。
  • 年月日の表示は、ユーザーの言語設定に応じて変更します。

その他、詳細な仕様はプログラムでご確認ください。

完成形

事前準備

サンプルプログラム

サンプルプログラムでは、Cybozu CDN の利用、JavaScript と CSS のサンプルを紹介します。

ご注意事項

  • サンプルプログラムは、その動作を保証するものではありません
  • サンプルプログラムの技術的なサポート等は行っていません

PC用のJavaScriptファイル

詳細設定から「JavaScript / CSSによるカスタマイズ」を開き、Cybozu CDN から次のライブラリを指定します。

  • jQuery
    https://js.cybozu.com/jquery/2.1.1/jquery.min.js  (version 2.1.1を利用)
  • jQuery.Gantt
    https://js.cybozu.com/jquerygantt/20140623/jquery.fn.gantt.min.js (version 20140623を利用)

JavaScriptサンプル

  • 次のサンプルプログラムをエディターにコピーして、ファイル名を「sample-ganttchart.js」 、文字コードを「UTF-8」、「BOMなし」で保存します
    ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください

PC用のCSSファイル

詳細設定から「JavaScript / CSSによるカスタマイズ」を開き、Cybozu CDN から次のライブラリを指定します。

  • jQuery.Gantt
    https://js.cybozu.com/jquerygantt/20140623/css/style.css (version 20140623を利用)

CSSサンプル

バリエーションを持たせるために、自前で別の色を指定します。 省略しても動作します。

  • 次のサンプルプログラムをエディターにコピーして、ファイル名を「sample-addin.css」 、文字コードを「UTF-8」、「BOMなし」で保存します
    ※ファイル名は任意ですが、ファイルの拡張子は「css」にしてください

設定した画面

「JavaScript / CSSによるカスタマイズ」画面でそれぞれ設定した例を紹介します。

JavaScript / CSS ファイルの設定は以上です。
アプリのトップページへ移動し、サンプルデータを登録してカスタマイズした結果を確認してください。

使用したAPI

  1. イベントハンドラーを登録する
  2. フィールド要素を取得する
  3. デザインのバージョンの取得
  4. ログインユーザーの情報を取得する

デモ環境

https://dev-demo.cybozu.com/k/57/

※デモ環境についての説明はこちら

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
ImTono

はじめまして、質問させていただきます。

上記の設定方法を参照し、無事にガントチャートは表示できるようになったのですが、もともとの仕様でガントチャート部分ではマウスのスクロールが無効になっているかと思います。

チャート部分の項目が増えて縦幅が大きくなると、ガントチャート部分でスクロールできないと不便になってきますので、なんとかマウスのスクロールが効くように設定はできないでしょうか?

ちなみに「navigate'buttons'」に設定していて横スクロールはボタンで操作するようにしています。

お手数をおかけいたしますが、ご教示ください。
よろしくお願いいたします。

Avatar
cybozu Development team

ImTono 様
お世話になっております。cybozu developer network事務局です。
コミュニティでも質問をご投稿頂きありがとうございます。

恐れ入りますが、こちらのコメント欄は記事に対するフィードバックとなっております。
記事のサンプルコードに変更を加える際にご不明点がございましたら、
引き続き、コミュニティをご活用頂きますようお願い致します。

どうぞよろしくお願いいたします。

Avatar
ImTono

事務局 ご担当者様

いつもお世話になっております。

はじめての利用ということもあり、どちらに投稿していいものかわからず、両方に投稿してしまいました。

こちらのコメント欄の件、承知いたしました。
コミュニティのほうでやりとりをさせていただきます。

引き続き、よろしくお願いいたします。

サインインしてコメントを残してください。