kintoneで日付フォームを使用すると、レコードの入力の際に
カレンダーが表示されますが、祝日の表示がありません。
（赤く表示されたりしない）
祝日表示は不可能なのでしょうか。
kiyoさん
結論としては、やや強引なカスタマイズで可能です。次に試してみたコード（もっと良い書き方はあるかもしれません）を記させて頂きますが、DOM操作も含みますので現在kintoneで使われているdatepickerライブラリ（Closure Library）が変更になるようなことがあると、動かなくなりますのでご注意ください。また、「kintone全体のカスタマイズ」にセットすれば、全てのアプリでの適用と出来ます。
(function () {
“use strict”;
function loadJS(src) {
document.write('<script type="text/javascript" src="' + src + '"></script>');
}
loadJS('https://cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js');
// 2014年の祝日
var holidays = [
[1, 13], // Jan.
[11], // Feb.
[21], // Mar.
[29], // Apr.
[3, 4, 5, 6], // May
[], // Jun.
[21], // Jul
[], // Aug.
[15, 23], // Sep.
[13], // Oct
[3, 23, 24], // Nov.
[23] // Dec.
];
function colorHolidays(){
// カラーリングの初期化
var allDays = $('.goog-date-picker-date').get();
$(allDays).css('background-color', '#FFFFFF');
var saturdays = $('.goog-date-picker-wkend-start').get();
$(saturdays).css('background-color', '#00FFFF');
var sundays = $('.goog-date-picker-wkend-end').get();
$(sundays).css('background-color', '#FFB6C1');
// 全検索による祝日のカラーリング
var calendars = $('.goog-date-picker-head').parent().parent();
for(var i=0; i<calendars.length; i++){
var month = $(calendars[i]).find('.goog-date-picker-month');
var days = $(calendars[i]).find('.goog-date-picker-date');
for(var j=0; j< 12; j++){
if(j+1 === parseInt($(month[0]).text().replace('月', ''))){ // 日本語表記対応
for(var k=0; k<days.length; k++){
for(var l=0; l<holidays[j].length; l++){
if(parseInt($(days[k]).text())===holidays[j][l]){
if(!$(days[k]).hasClass('goog-date-picker-other-month')){
$(days[k]).css('background-color', '#FFB6C1');
} // if
} // if
} // for l
} // for k
} // if
} // for j
} // for i
// 選択日のカラーリング
var selected = $('.goog-date-picker-selected').get();
$(selected).css('background-color', '#00BFFF');
// 月の移動に対応するためのループ
setTimeout(colorHolidays, 300);
}
kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.index.edit.show'], function(event){
colorHolidays();
return event;
});
})();
成人の日等固定日でない祝日がありますので、そこまでの自動化のためには、祝日をAPIで取得する等して年毎にholidaysを動的に変えて上げる必要があろうかと思います。
Ryu Yamashita さん
ありがとうございます。
動的に祝日を変更するためには、別APIと連携しないといけなそうですね。
ソースまでご提示いただき、わかりやすいです。
是非参考にさせていただきます。
ちなみに、jQuery UIのdatepickerですと日付指定はこのような全検索は不要で、もう少しスッキリできますので、編集画面等以外での日付入力等の時には選択肢に考えられると良いかなぁと思います。
また、祝日のテーブルの作成については、
① 年が変わるのを検知してAPIで取得して都度テーブルにする
② 必要分を予めテーブルとして持っておく
③ ②で準備していない分は①の方法で取得する（①と②のハイブリッド）
が考えられ、得失を見て選択することになると思います。今回の場合には①の方法ではkintone.proxy()の利用になると思いますが、これもAPIコール数の制限対象だったと思われる点、外部APIの仕様が変更になりうる点のデメリットが顕在化しそうに感じますし、予めテーブルとして持っておくのにコードも大して汚しそうにないことを考慮すると③か②で対応しておくのが良いかと考えます。