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

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

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

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

Easy Ganttの導入はこちら

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

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

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

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

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

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

Path pattern: /projects/.*/easy_gantt

Type: StyleSheet

Code:

/* Customize gantt css */

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

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

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