Redmineのカレンダーの土日祝に色をつける方法

2013/12/222016/02/28 kobat 0 Comment Redmine, カスタマイズ, タスク管理, ツール, プロジェクト管理, プロジェクト管理ツール, リソース管理, 改善, 解決策

前置き

なんでRedmine2.0.3って休業日設定ができないんでしょうね、あと祝日を取り込んで、カレンダーとガントチャートに反映して色付けしてくれたりしないんでしょうかね。
「土日も祝日も働けや～～～！！ゴルァァァァァ！！！！」
ってことなんでしょうか･･･。クソですね、クソ。（勝手な想像です）

というわけで今回は、祝日をソース上に直に設定して、かつ、カレンダーの土日と祝日に色をつける方法をご紹介しようと思います。

※　ちなみに2.4.1では休業日設定はできるものの、カレンダー画面には何も反映されない…せめてclassぐらい付けてくれよ…

デモ環境

Redmine 2.4.1.stable

デフォルトの「カレンダー」画面

デフォルトだと↓こんな感じ。真っ白～。

やりたいこと

土曜日の背景を水色に
日曜祝日の背景を赤色に
当日をわかりやすくするため、赤枠で囲む

対象ファイル（修正するファイル）

/redmineのルートディレクトリ/app/controllers/calendars_controller.rb
/redmineのルートディレクトリ/app/view/common/_calendar.html.erb
/redmineのルートディレクトリ/public/stylesheets/application.css

修正内容

/app/controllers/calendars_controller.rb

ファイルの一番下に、下記のコードを追記して、新規に「holiday」メソッドを作ります。
要は、2014年の祝日をこのファイルにベタ書きします。

require "date"

class  Date
  COMPANY_HOLIDAY =
  [
    [ "%Y%m%d", '201312(23|31)'],
    [ "%Y%m%d", '201401(01|02|03|13)'],
    [ "%Y%m%d", '201402(11)'],
    [ "%Y%m%d", '201403(21)'],
    [ "%Y%m%d", '201404(29)'],
    [ "%Y%m%d", '201405(05|06)'],
    [ "%Y%m%d", '201407(21)'],
    [ "%Y%m%d", '201409(15|23)'],
    [ "%Y%m%d", '201410(13)'],
    [ "%Y%m%d", '201411(03|24)'],
    [ "%Y%m%d", '201412(23|31)'],
    [ "%Y%m%d", '201501(01|02|12)'],
  ]

  def holiday?
    COMPANY_HOLIDAY.each do |fil|
      return true if self.strftime(fil.first) =~ Regexp.new(fil.last)
    end
    return false
  end
end

/app/view/common/_calendar.html.erb

10行目のセルを書き出しているところに、

土曜日だったらtdのclassに「saturday」を付ける
日曜日だったらtdのclassに「sunday」を付ける
祝祭日だったらtdのclassに「holiday」を付ける

という記述を追記します。

<table class="cal">
<thead>
<tr><th scope="col" title="<%= l(:label_week) %>" class="week-number"></th><% 7.times do |i| %><th scope="col"><%= day_name( (calendar.first_wday+i)%7 ) %></th><% end %></tr>
</thead>
<tbody>
<tr>
<% day = calendar.startdt
while day <= calendar.enddt %>
<%= ("<td class='week-number' title='#{ l(:label_week) }'>#{(day+(11-day.cwday)%7).cweek}</td>".html_safe) if day.cwday == calendar.first_wday %>
- <td class="<%= day.month==calendar.month ? 'even' : 'odd' %><%= ' today' if Date.today == day %>">
+ <td class="<%= day.month==calendar.month ? 'even' : 'odd' %><%= ' today' if Date.today == day %><%= ' sunday' if day.sunday? %><%= ' saturday' if day.saturday? %><%= ' holiday' if day.holiday? %>">
<p class="day-num"><%= day.day %></p>

/public/stylesheets/application.css

このCSSに、classが「saturday」だったときと、「sunday」だったときと、「holiday」だったときの、背景色を指定します。
あと、当日をわかりやすくするための赤枠で囲む記述も追加します。
（ついでに、翌月のグレーのところを少し濃い目に変更しました）

/***** Calendar *****/
table.cal {border-collapse: collapse; width: 100%; margin: 0px 0 6px 0;border: 1px solid #d7d7d7;}
table.cal thead th {width: 14%; background-color:#EEEEEE; padding: 4px; }
table.cal thead th.week-number {width: auto;}
table.cal tbody tr {height: 100px;}
table.cal td {border: 1px solid #d7d7d7; vertical-align: top; font-size: 0.9em;}
table.cal td.week-number { background-color:#EEEEEE; padding: 4px; border:none; font-size: 1em;}
table.cal td p.day-num {font-size: 1.1em; text-align:right;}
table.cal td.odd p.day-num {color: #bbb;}
- table.cal td.today {background:#ffffdd;}
+ table.cal td.today {background:#ffffdd;border:2px solid #E80000;}
table.cal td.today p.day-num {font-weight: bold;}
table.cal .starting a, p.cal.legend .starting {background: url(../images/bullet_go.png) no-repeat -1px -2px; padding-left:16px;}
table.cal .ending a, p.cal.legend .ending {background: url(../images/bullet_end.png) no-repeat -1px -2px; padding-left:16px;}
table.cal .starting.ending a, p.cal.legend .starting.ending {background: url(../images/bullet_diamond.png) no-repeat -1px -2px; padding-left:16px;}
p.cal.legend span {display:block;}
+ table.cal td.saturday {background:#E3E6FB;}
+ table.cal td.sunday {background:#FFE4E1;}
+ table.cal td.holiday {background:#FFE4E1;}
/***** Tooltips ******/

- .odd {background-color:#eee;}
+ .odd {background-color:#f6f7f8;}

ファイルの更新が終わったら、Redmineを再起動。

結果

う～んステキ！見やすい！

というわけで、この記事が僕と同じように「手さぐりでRedmineをカスタマイズしながら使っている、プレイングマネージャー的な雑用係兼ディレクター兼プロマネ」の手助けになれば幸いです。
otsukare-tion.comはがんばる社畜を応援しています。

参考サイト

Amazon


Redmineによるタスクマネジメント実践技法	Redmine -もっと手軽にプロジェクト管理!	入門Redmine 第3版

前置き