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はがんばる社畜を応援しています。
参考サイト
- 徒然さめざめ Redmine hack! -カレンダーに休日色を-
- Redmineのカレンダーの休日に色を付ける – suworkの日記
- カレンダーの休日(土日)の背景に色を付ける – Google Groups
Amazon
Redmineによるタスクマネジメント実践技法 |
Redmine -もっと手軽にプロジェクト管理! |
入門Redmine 第3版 |