ガントチャートライブラリを使用したタスク管理画面の製作⑤

タスク管理システム
http://task.imo-tikuwa.com/login/

ブログの更新について、今回から必要に応じて画像を添付するようにします。

更新内容

  • タスク種別の登録/更新/一覧/削除機能を追加
  • dhtmlxGanttのlightbox内のdatepickerをbootstrap-datepickerからdhtmlxCalendarに変更
  • タスク種別ごとにCSSプロパティを設定し、タスクバーのスタイルを変更できる機能を追加

タスク種別の登録/更新/一覧/削除機能を追加

タスクに種別を持てるようになりました。サンプルでは設計、製造、試験の3項目となっています。
項目名も自由に設定できるので、上記の使い方以外にも使えるかもしれません。

dhtmlxGanttのlightbox内のdatepickerをbootstrap-datepickerからdhtmlxCalendarに変更

lightboxの開始日、終了日を設定するdatepickerをbootstrap-datepickerというライブラリからdhtmlxCalendarというライブラリに変更しました。
[↓変更前]
bootstrap-datepicker
[↓変更後]
dhtmlxCalendar
同じdhtmlxのライブラリなので見栄えが統一されました。コードは以下

gantt.attachEvent("onLightbox", function(id) {
  $(".gantt_section_time > *").css("display", "none");
  $(".gantt_section_time").append("<div style='height:22px;' class='gantt_cal_ltext'><input type='text' id='date-from' class='w100'/> - <input type='text' id='date-to' class='w100'/></div>");
  var task = gantt.getTask(id);
  $("#date-from").val(formatDate(task.start_date, 'YYYY/MM/DD'));
  $("#date-to").val(formatDate(task.end_date, 'YYYY/MM/DD'));
  // ↑ここまでは前回と一緒
  // ↓dhtmlxCalendarのインスタンスを作成
  var dhtmlxFromCalendar = new dhtmlXCalendarObject("date-from");
  dhtmlxFromCalendar.setDateFormat("%Y/%m/%d");
  dhtmlxFromCalendar.setSkin("dhx_skyblue");
  dhtmlxFromCalendar.hideTime();
  dhtmlxFromCalendar.attachEvent("onClick", function(fromDate){
    $(".gantt_section_time select:eq(0)").val(fromDate.getFullYear());
    $(".gantt_section_time select:eq(1)").val(fromDate.getMonth());
    $(".gantt_section_time select:eq(2)").val(fromDate.getDate());
  });
  var dhtmlxToCalendar = new dhtmlXCalendarObject("date-to");
  dhtmlxToCalendar.setDateFormat("%Y/%m/%d");
  dhtmlxToCalendar.setSkin("dhx_skyblue");
  dhtmlxToCalendar.hideTime();
  dhtmlxToCalendar.attachEvent("onClick", function(toDate){
    $(".gantt_section_time select:eq(3)").val(toDate.getFullYear());
    $(".gantt_section_time select:eq(4)").val(toDate.getMonth());
    $(".gantt_section_time select:eq(5)").val(toDate.getDate());
  });
  return true;
});

1つのdhtmlXCalendarObjectでdate-fromとdate-toの2つを初期化することもできましたが、onClickイベント時に変更元の要素がどれだったかを判別するコールバックが存在しないため別々にインスタンス化しました。
bootstrap-datepickerはアカウント管理のメンバー検索機能で使用しています。

タスク種別ごとにCSSプロパティを設定し、タスクバーのスタイルを変更できる機能を追加

上の方で書いたタスク種別の管理機能で、作成したタスク種別のCSSスタイルを編集する機能を作成しました。
task-css-setting
↑の場合、タスク一覧にてタスク種別が「設計」で登録されているタスクは紫色っぽいスタイルで表示されます。設定可能な以下の4つ

  • タスクの背景色
  • タスクの線の色
  • プログレスバーの背景色
  • タスクの文字の色

更新したときに、サーバー側で全てのタスク種別のCSSプロパティ情報を読み込みCSSファイルを生成しています。
プログレスバーの背景色は線形グラデーションで上部と下部に投下した白いレイヤーのようなものを掛けることで実現しています。ベンダープレフィックスは記載していないのでブラウザやそのバージョンによって正常に表示されないかもしれません。

実のところカラーピッカーを使ってみたかっただけです(^o^)

不具合

いつの間に発生したのか不明ですが、FireFoxでタスク管理画面のアコーディオンメニューを開閉するとちらつきが発生するようになりました。原因は調査中・・・;;

スポンサーリンク
GoogleAdsense



GoogleAdsense



シェアする