designetwork

ネットワークを軸としたIT技術メモ

Easy Gantt with Gitmike で休日をグレーアウトする

f:id:daichi703n:20180506175702p:plain

Redmineガントチャートツールとして有用なEasy Ganttだが、テーマGitmikeと組み合わせるとデフォルトでは休日がグレーアウトされない。

f:id:daichi703n:20180506172740p:plain

なお、デフォルトのテーマの場合はこの問題が発生しない。

f:id:daichi703n:20180506173038p:plain

キレイなテーマであるGitmikeはそのまま使用し、休日を考慮してスケジュール・ガントチャートを管理したいため、休日をグレーアウトできるようにCSSをカスタマイズする。

Easy Ganttの導入はこちら

www.easyredmine.com

休日がグレーアウトされない原因

Easy Gantt with Gitmikeで休日がグレーアウトされないのは、Easy Ganttでの休日のレンダリング方法とGitmikeの色設定の組み合わせの問題。

ガントチャートの休日部分は、Javascriptによりスケジュールエリアに箱を書くようになっているのだが、その時の色指定が背景色 * 透明度xx%となっている。Gitmikeではこの背景色として白(255,255,255)が指定されているため、グレーアウトがされなくなっている。

CSSをカスタマイズして休日をグレーアウトする

上記問題の対応として、CSSをカスタマイズする。

CSSのカスタマイズは、直接ソースコードを編集するのではなく、View Customizeプラグインで上書きする。

github.com

CSS適用するIDはJavaScriptにより生成されており変動するため、正規表現で指定する。

Path pattern: /projects/.*/easy_gantt

Type: StyleSheet

Code:

/* Customize gantt css */

[id^="Svgjs"] {
  fill: rgba(0,0,0,0.05);
}

f:id:daichi703n:20180506174256p:plain

これによりEasy Gantt with Gitmikeでも休日をグレーアウトできる。(色は自由に指定可能)

f:id:daichi703n:20180506174151p:plain

まとめ - Easy Gantt with Gitmike で休日をグレーアウトする

View CustomizeプラグインCSSを編集することにより、GitmikeでEasy Ganttのガントチャートで休日がグレーアウトされない問題に対応した。キレイなテーマはそのままに、Easyガントチャートも活用しプロジェクト管理ができるようになった。