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

前置き

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

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

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

デモ環境

Redmine 2.4.1.stable

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

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

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

やりたいこと

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

対象ファイル(修正するファイル)

  1. /redmineのルートディレクトリ/app/controllers/calendars_controller.rb
  2. /redmineのルートディレクトリ/app/view/common/_calendar.html.erb
  3. /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版

コメントを残す