Blogger:カレンダー(11)祝日対応などCalendar4_Bloggerモジュール

Calendar3_Bloggerモジュールは失敗したのでCalendar4_Bloggerモジュールになります。

前の関連記事：Blogger:カレンダー(10)祝日データを作成してJSON文字列化する

祝日を赤色に表示させる

祝日データはBlogger:カレンダー(10)祝日データを作成してJSON文字列化するで作成したJSON文字列を使いました。
(2017.1.20追記。2017.1.2の振り替え休日が休日になっていなかったので休日のJSONの作成ツール、日数計算ツールでやり直しました。)

このブログは2013年からしか投稿がないので2013年から2030年までの祝日データを作成しました。

JSON.stringify()で作成したJSON文字列をJavaScriptオブジェクトに戻すにはJSON.parse()での処理が必要と思ってましたが、JSON文字列を代入するだけでオブジェクトにできました、、、なんと便利な。

手間取ったのは配列の要素の存在の有無のチェックでした。

in演算子は配列のインデックスの有無の確認に使えるだけでした。

Pythonでは要素の有無に使えましたのに。(6. 式 (expression) — Python 3.5.2 ドキュメント）

Javascriptで配列内に特定の要素が存在するかどうかの判定 - Qiita

JavaScriptではArray.prototype.indexOf()を使うのでした。

Calendar4_Blogger/Calendar4_Blogger.js at da57aa02148202a643293be148acb41a87b8179a · p--q/Calendar4_Blogger

        _getHolidayC: function(node) {  // 祝日に色をつける。JSON文字列はhttps://p--q.blogspot.jp/2016/12/blogger10json.htmlを作成。
            // キーは年、値は二元元配列。1次が月数、二次が祝日の配列。
            var holidays = {"2013":[[1,14],[11],[20],[29],[3,4,5,6],[],[15],[],[16,23],[14],[3,4,23],[23]],"2014":[[1,13],[11],[21],[29],[3,4,5,6],[],[21],[],[15,23],[13],[3,23,24],[23]],"2015":[[1,12],[11],[21],[29],[3,4,5,6],[],[20],[],[21,22,23],[12],[3,23],[23]],"2016":[[1,11],[11],[20,21],[29],[3,4,5],[],[18],[11],[19,22],[10],[3,23],[23]],"2017":[[1,9],[11],[20],[29],[3,4,5],[],[17],[11],[18,23],[9],[3,23],[23]],"2018":[[1,8],[11,12],[21],[29,30],[3,4,5],[],[16],[11],[17,23,24],[8],[3,23],[23,24]],"2019":[[1,14],[11],[21],[29],[3,4,5,6],[],[15],[11,12],[16,23],[14],[3,4,23],[23]],"2020":[[1,13],[11],[20],[29],[3,4,5,6],[],[20],[11],[21,22],[12],[3,23],[23]],"2021":[[1,11],[11],[20],[29],[3,4,5],[],[19],[11],[20,23],[11],[3,23],[23]],"2022":[[1,10],[11],[21],[29],[3,4,5],[],[18],[11],[19,23],[10],[3,23],[23]],"2023":[[1,9],[11],[21],[29],[3,4,5],[],[17],[11],[18,23],[9],[3,23],[23]],"2024":[[1,8],[11,12],[20],[29],[3,4,5,6],[],[15],[11,12],[16,22,23],[14],[3,4,23],[23]],"2025":[[1,13],[11],[20],[29],[3,4,5,6],[],[21],[11],[15,23],[13],[3,23,24],[23]],"2026":[[1,12],[11],[20],[29],[3,4,5,6],[],[20],[11],[21,22,23],[12],[3,23],[23]],"2027":[[1,11],[11],[21,22],[29],[3,4,5],[],[19],[11],[20,23],[11],[3,23],[23]],"2028":[[1,10],[11],[20],[29],[3,4,5],[],[17],[11],[18,22],[9],[3,23],[23]],"2029":[[1,8],[11,12],[20],[29,30],[3,4,5],[],[16],[11],[17,23,24],[8],[3,23],[23,24]],"2030":[[1,14],[11],[20],[29],[3,4,5,6],[],[15],[11,12],[16,23],[14],[3,4,23],[23]]};
            var arr = holidays[vars.y][vars.m-1];  // 祝日の配列を取得。
            var d = Number(node.textContent);  // 数値に変換
            if (arr.indexOf(d) != -1) {  // 祝日配列に日付があるとき。in演算子はインデックスの有無の確認をするだけ。
                node.style.color = cal._holidayC;
            }
        },

この関数を追加して、107行目で呼び出しています。

125行目でJSONの休日データを使っています。

これで休日が赤色に表示されるようになりました。

最初の投稿月より前と最後の月より後は表示させないようにする

このブログの最初の投稿は2013年3月なのでそれ以前の月は表示させないようにします。

最後の投稿年月はフィードを取得すれば得ることができますが、カレンダーの表示のたびにフィードを取得することになるので、単に現在の月までの表示にすることにします。

Calendar4_Blogger/Calendar4_Blogger.js at 6e99e17f1202a67ae88aa5b2fc5d7258775f8baa · p--q/Calendar4_Blogger

このカレンダーはこのブログに合わせて245行目で2013年3月より前のカレンダーは表示されないように設定しています。

祝日設定でデータがどれぐらい大きくなったか比べてみましょう。

Blogger:カレンダー(9)Calendar2_Bloggerモジュールの導入方法とその機能のCalendar2_Bloggerモジュールは圧縮して6.65KBでした。

で、この祝日データをいれたコードCalendar4_Bloggerは8.52KBになりました。

まあだいたいこれでブログのカスタマイズは完了です。

(2016.12.29追記。矢印がないのにツールチップが表示される問題を修正しました。Calendar4_Blogger/Calendar4_Blogger.js at e9a097c715f1699bc86242d9ab7a3e94764a3272 · p--q/Calendar4_Blogger)

参考にしたサイト

Javascriptで配列内に特定の要素が存在するかどうかの判定 - Qiita
JavaScriptの配列の要素の確認方法。

次の関連記事:Blogger:カレンダー(12)Calendar5_Bloggerモジュールの導入