【PrimeFaces】カレンダーで休日の色を変えてみました - タイガー！タイガー！じれったいぞー！（SE編）

PrimeFacesは、リッチな画面を構築するのに、とても便利ですね。私自身は、JavaScriptやjQueryなど、クライアントサイドが得意ではないので、とても助かっています。

今回は、お試しで、職場の休日が赤になるようなカレンダーを作ってみました。

サンプル・ソース

calendar.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <h:outputScript library="js" name="pfCalendars.js"/>        
        <style type="text/css">
            .highlight-calendar a {
                color: red !important;
            }
        </style>

    </h:head>

    <h:body>
        <h:form id="form">
            <p:growl id="msgs" showDetail="true" />
            <p:outputLabel for="button" value="Calendar: " />
            <p:calendar 
                id="button"
                locale="ja"
                showOn="button"
                pattern="yyyy/MM/dd"
                beforeShowDay="setHolidays"
                value="#{calendarView.date1}" />
        </h:form>
    </h:body>

</html>

pfCalendars.js

/**
 * For p:calendar Component
 * 
 */
var holidays;

function setHolidays(date) {
    var d = date.getDate();
    var m = date.getMonth() + 1;
    var y = date.getFullYear();
    var cssClass = 'highlight-calendar';

    if (holidays[y] && holidays[y][m] && holidays[y][m][d]) {
        return [true, cssClass, ''];
    } else {
        return [true, '']; // no change   
    }
}

jQuery(function ($) {
    $.getJSON("resources/json/holidays.json", function (data) {
        holidays = data;
    });
});

PrimeFaces.locales['ja'] = {
    closeText: '閉じる',
    prevText: '前',
    nextText: '次',
    monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', 
        '10月', '11月', '12月'],
    monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
        '10月', '11月', '12月'],
    dayNames: ['日曜', '月曜', '火曜', '水曜', '木曜', '金曜', '土曜'],
    dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
    dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
    weekHeader: '週',
    firstDay: 0,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: '',
    timeOnlyTitle: '時間のみ',
    timeText: '時間',
    hourText: '時',
    minuteText: '分',
    secondText: '秒',
    currentText: '今日',
    ampm: false,
    month: '月',
    week: '週',
    day: '日',
    allDayText: '全日'
};

holidays.json

{
    "2015": {
        "1": {
            "1": true,
            "2": true,
            "3": true,
            "4": true,
            "10": true,
            "11": true,
            "12": true,
            "17": true,
            "18": true,
            "24": true,
            "25": true,
            "31": true
        },
        "2": {
            "1": true,
            "7": true,
            "8": true,
            "11": true,
            "14": true,
            "15": true,
            "21": true,
            "22": true,
            "28": true
        }
    }
}

結果

ブラウザでカレンダーコンポーネントを表示されてみると、下記の画面のようになりました！
json側の設定で、日付ごとに休日や行事などをbooleanではなく、値で管理させれば、よりカラフルなカレンダーになるかと思います。

f:id:no14141:20150130202318j:plain

課題

原因が明確になっていないのですが、Firefoxでは、「整形式になっていません。」という警告が！！
jsonも問題なさそうだし。
問題なく動くので、とりあえずこのままで動かしていますが･･･。う～ん、何とも。。。

f:id:no14141:20150130202330j:plain