33
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

RedmineのView Customize pluginでカレンダーに祝日表示

環境

Redmine 3.1.1、3.2.2
redmine-view-customize
https://github.com/onozaty/redmine-view-customize

スクリプトで祝日定義

カレンダー以外にも使いたかったので全ページに読み込ませています。

Path pattern: /
Type: JavaScript
Code:

HOLIDAYS = {};
HOLIDAYS["2016"] = {
  "01-01":"元日",
  "01-11":"成人の日" ,
  "02-11":"建国記念の日",
  "03-20":"春分の日",
  "03-21":"振替休日",
  "04-29":"昭和の日",
  "05-03":"憲法記念日",
  "05-04":"みどりの日",
  "05-05":"こどもの日",
  "07-18":"海の日",
  "08-11":"山の日",
  "09-19":"敬老の日",
  "09-22":"秋分の日",
  "10-10":"体育の日",
  "11-03":"文化の日",
  "11-23":"勤労感謝の日",
  "12-23":"天皇誕生日",
};
HOLIDAYS["2017"] = {
  "01-01":"元日",
  "01-02":"振替休日",
  "01-09":"成人の日",
  "02-11":"建国記念の日",
  "03-20":"春分の日",
  "04-29":"昭和の日",
  "05-03":"憲法記念日",
  "05-04":"みどりの日",
  "05-05":"こどもの日",
  "07-17":"海の日",
  "08-11":"山の日",
  "09-18":"敬老の日",
  "09-23":"秋分の日",
  "10-09":"体育の日",
  "11-03":"文化の日",
  "11-23":"勤労感謝の日",
  "12-23":"天皇誕生日",
};

スクリプトで祝日のtdへholidayクラスを追加

Path pattern: /calendar
Type: JavaScript
Code:

$(function () {
  var year = $("#year").val();
  var month = $("#month").val();
  $("table.cal").find("td").each(function () {
    var $td = $(this);
    if ($td.hasClass("week-number") || $td.hasClass("odd")) {
      return true;
    }
    var day_num = $td.find("p.day-num").text();
    var dateKey = ("0" + month).slice(-2) + "-" + ("0" +day_num).slice(-2);
    if (dateKey in HOLIDAYS[year]) {
      $td.addClass("holiday")
      .find("p.day-num").attr("title", HOLIDAYS[year][dateKey]);
    }
  });
});

スタイルシートで祝日、土日の表示を調整

週の初めが日曜日の場合の設定になります。

Path pattern: /calendar
Type: StyleSheet
Code:

/* 土曜日の文字色 */
table.cal th:last-child ,
table.cal td:last-child:not(.odd) p.day-num {
  color:blue;
}
/* 日曜、祝日の文字色*/
table.cal th:nth-child(2) ,
table.cal td:nth-child(2):not(.odd) p.day-num,
table.cal td.holiday p.day-num{
  color:red;
}

/* 祝日、土日の背景色 */
table.cal td:nth-child(2),
table.cal td:last-child,
table.cal td.holiday {
  background-color:#f6f7f8;
}
/* 前月の日付、翌月の日付のtdの背景色 */
table.cal td.odd {
  background-color:#efefef;
}

カレンダーポップアップ(jQuery ui Datepicker)も対応

Path pattern: /
Type: JavaScript
Code:

$(function (){
  if (window.datepickerOptions) {
    datepickerOptions.beforeShowDay = function (day) {
      var year = "" + day.getFullYear();
      var dateKey = ("0" + (day.getMonth() + 1)).slice(-2) 
                   + "-" + ("0" + day.getDate()).slice(-2);
      if (HOLIDAYS[year] && HOLIDAYS[year][dateKey]) {
        return [true, "holiday"];
      }
      return [true, ""];
    };
  }
});

Path pattern: /
Type: StyleSheet
Code:

.ui-datepicker-calendar th:nth-child(2) span {
  color:red;
}
.ui-datepicker-calendar th:last-child span {
  color:blue;
}

.ui-datepicker-calendar td:nth-child(2) a,
.ui-datepicker-calendar td.holiday a {
  color:red; 
}
.ui-datepicker-calendar td:last-child a{
  color: blue;
}

参考画像

キャプチャ.PNG!

キャプチャ2.PNG

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
33
Help us understand the problem. What are the problem?