ゼロと無限の間に

フリーでオープンソースなJavaScriptとかPHPとか。

ユーザ用ツール

サイト用ツール


javascript:google-calendar-holidays

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
javascript:google-calendar-holidays [2008/02/29 23:12] – image追加 dgbadminjavascript:google-calendar-holidays [2015/09/22 14:19] (現在) – [GCalHolidays] dgbadmin
行 1: 行 1:
-====== GoogleカレンダーからJSONPで日本の祝日一覧を取得 - GCalHolidays ======+====== GoogleカレンダーからJSONPで日本の祝日一覧を取得 - GCalendar Holidays ======
  
-{{javascript:adore.png|}}+コメントと更新履歴の参照は[[http://0-oo.net/log/category/google-calendar-holidays/|ゼロと無限の間のログ » GCalendar Holidays]]でどうぞ。
  
-[[http://code.google.com/apis/calendar/|Google Calendar API]]から、日本の祝日データを取得して表示するJavaScriptです。\\+{{:javascript:jui-cal.png|}} 
 + 
 +[[https://developers.google.com/google-apps/calendar/|Google Calendar API V3]]から、日本の祝日データを取得して表示するJavaScriptです。\\
 Googleカレンダーに登録されている祝日なので、ハッピーマンデーの時のように休日の制度が変わっても柔軟に対応できます。\\ Googleカレンダーに登録されている祝日なので、ハッピーマンデーの時のように休日の制度が変わっても柔軟に対応できます。\\
 ただしGoogleカレンダーに登録されている祝日が間違っている(あるいは最新でない)場合もそのまま表示されます。:-X ただしGoogleカレンダーに登録されている祝日が間違っている(あるいは最新でない)場合もそのまま表示されます。:-X
  
-コメと更新履歴参照は[[http://0-oo.net/log/category/google-calendar-holidays/|ゼロと無限の間のログ » GCalHolidays]]でど+[[Yahho Calendar|Yahho Calendar]]または[[http://jqueryui.com/datepicker/|jQuery UI Datepicker]]と合わせて使うと便利です。 
 + 
 +===== バージョ0.6.0からの変更点 ===== 
 +バージョン0.5.xまではGoogle Calendar API V2から取得していましたが、Google Calendar API V2の廃止にもない、バージョン0.6.0からはGoogle Calendar API V3から取得するようにしました。ただ、Google Calendar API V3はGoogle API KEYが必須になるため、**いったんサーバサイドのPHPでGoogle Calendar API V3からデータを取得し、そこからJavaScriptでデータを取得する**形にしました。そのPHP(GCalendar-Holidays.php)もこのページで公開しています。 
 + 
 +これにともない取得するGoogleカレンダーは公式版の祝日カレンダーのみになりました。(GCalendar-Holidays.phpを変すれば任意カレンダーを取得できます。) 
 + 
 + 
 +===== jQuery UI Datepickerに祝日を表示する ===== 
 + 
 +バージョン0.3.0からは[[http://jqueryui.com/datepicker/|jQuery UI Datepicker]]にも対応しました。\\ 
 +バージョン0.4.0からはjQuery UI Datepickerの土曜日・日曜日に背景色を付けるよにしました 
 + 
 +使い方は、jQuery UI Datepickerを使うページでGcalendar HolidaysのJavaScriptファイルを読み込むだけです。(下記サンプル参照) 
  
 ===== サンプル ===== ===== サンプル =====
 下記のページで実際に使ってみてください。\\ 下記のページで実際に使ってみてください。\\
-[[http://0-oo.net/sam/google-calendar-holidays/|GCalHolidaysのサンプル]]+  * [[http://0-oo.net/sam/google-calendar-holidays/|GCalendar Holidaysのサンプル]] 
 +  * [[http://0-oo.net/sam/google-calendar-holidays/jquery-ui-datepicker.php|jQuery UI Datepickerに祝日を表示するのサンプル]] 
 +  * [[http://0-oo.net/sam/google-calendar-holidays/multi-datepickers.php|複数表示のjQuery UI Datepickerに祝日を表示するのサンプル]] 
 + 
 +※サンプルで使っているのは最新のBeta版の場合あり
  
  
 ===== ライセンス ===== ===== ライセンス =====
-GCalHolidaysは[[http://0-oo.net/pryn/MIT_license.txt|MITライセンス]]で。\\ +GCalendar Holidaysは[[http://0-oo.net/pryn/MIT_license.txt|MITライセンス]]で。\\ 
-GCalHolidaysはGoogle Calendar APIを利用するので、[[http://www.google.com/googlecalendar/terms_of_use.html|Googleカレンダーの利用規約]]にも従ってください。+GCalendar HolidaysはGoogle Calendar APIを利用するので、[[http://www.google.com/googlecalendar/terms_of_use.html|Googleカレンダーの利用規約]]にも従ってください。
  
  
 ===== ダウンロード ===== ===== ダウンロード =====
-[[http://0-oo.net/js/GCalHolidays.js|GCalHolidays.js]]+[[http://g.0-oo.net/gcalendar-holidays.js|gcalendar-holidays.js]]
  
 +※ダウンロードのリンク先が最新のBeta版の場合あり
  
-===== GCalHolidays API リファレンス =====+===== GCalendar Holidays API リファレンス =====
 ==== GCalHolidays ==== ==== GCalHolidays ====
 +=== GCalHolidays.apiUrl ===
 +  * GCalendar-Holidays.phpのURLをセットしておく。
 +
 === GCalHolidays.get(callback, year, month) === === GCalHolidays.get(callback, year, month) ===
   * 概要   * 概要
行 40: 行 64:
   * month : [オプション] 対象とする月。指定しないと一年分のデータを取得する。   * month : [オプション] 対象とする月。指定しないと一年分のデータを取得する。
  
-=== GCalHolidays.userId === +=== GCalHolidays.datepickerStyles === 
-  * GoogleカレンダーのIDを指定するプロパティ +  * [[http://jqueryui.com/datepicker/|jQuery UI Datepicker]]と合わせ使う場合の、土曜・日曜日・祝日のstyle(CSS)
-  * デフォルトはmozilla.orgからインポートしいる本の祝日 +
- +
-=== GCalHolidays.maxResults === +
-  * 取得するデータ最大件数を指定するプロパティ +
-  * デフォルトは30+
  
  
 ===== さらに進んだ使い方 ===== ===== さらに進んだ使い方 =====
-GCalHolidaysプロパティを変更すれば、他の国の祝日や祝日以外のデータ(Googleカレンダーで公開されているイベントのデータ)も取得できます。 +GCalendar-Holidays.phpで指定するGoogleカレンダーIDを変更すれば、他の国の祝日や祝日以外のデータ(Googleカレンダーで公開されているイベントのデータ)も取得できます。
- +
-例:サッカーの日本代表のスケジュールを取得する場合 +
-<code javascript> +
-GCalHolidays.userId = "k1b51v9t41vn3k0agk648pr7p0@group.calendar.google.com"; +
-GCalHolidays.max = 50; +
-GCalHolidays.get(callback, 2008); +
-</code>+
  
  
行 63: 行 75:
 <code javascript> <code javascript>
 /** /**
- *  GCalHolidays + *  GCalendar Holidays - Googleカレンダーから日本の祝日を取得 
-  @see http://0-oo.net/sbox/javascript/google-calendar-holidays +  @see       http://0-oo.net/sbox/javascript/google-calendar-holidays 
-  @version 0.1.1 +  @version   0.6.0 
-  @copyright 2008 dgbadmin@gmail.com +  @copyright 2008-2014 dgbadmin@gmail.com 
-  @license http://0-oo.net/pryn/MIT_license.txt (The MIT license)+  @license   http://0-oo.net/pryn/MIT_license.txt (The MIT license)
  */  */
 var GCalHolidays = { var GCalHolidays = {
-    //userId: "japanese__ja@holiday.calendar.google.com"    //Google公式版 +    /** Google Calendarから情報を取得するAPIのURL *
-    //userId: "japanese@holiday.calendar.google.com"        //もう1つのID +    apiUrl: "https://gcalendar-holidays.appspot.com/",
-      userId: "outid3el0qkcrsuf89fltf7a4qbacgt9@import.calendar.google.com   //mozilla.org版 +
-    , visibility: "public" +
-    projection: "full-noattendees" +
-    , maxResults: 30 +
-    , holidays: {} +
-};+
  
 +    /** jQuery UI Datepicker用のstyle(Themeに合わせてお好みで上書きして使う) */
 +    datepickerStyles: {
 +        sunday:   "background-image: none; background-color: #f99", //日曜日
 +        saturday: "background-image: none; background-color: #6cf", //土曜日
 +        holiday:  "background-image: none; background-color: #f9f"  //祝日
 +    }
 +};
 /** /**
-    @param    Function    callback    データ取得時に呼び出されるfunction +  祝日を取得する 
-    @param    Number      year        (optional) 年(指定しなければ今年) + *  @param  Function    callback    データ取得時に呼び出されるfunction 
-    @param    Number      month       (optional) 月(1~12)+  @param  Number      year        (optional) 年(指定しなければ今年) 
 +  @param  Number      month       (optional) 月(1~12 指定しなければ1年の全て
  */  */
 GCalHolidays.get = function(callback, year, month) { GCalHolidays.get = function(callback, year, month) {
     //日付範囲     //日付範囲
-    var padZero = function(value) { return ("0" + value).slice(-2) };+    var padZero = function(value) { return ("0" + value).slice(-2)};
     var y = year || new Date().getFullYear();     var y = year || new Date().getFullYear();
     var start = [y, padZero(month || 1), "01"].join("-");     var start = [y, padZero(month || 1), "01"].join("-");
     var m = month || 12;     var m = month || 12;
     var end = [y, padZero(m), padZero(new Date(y, m, 0).getDate())].join("-");     var end = [y, padZero(m), padZero(new Date(y, m, 0).getDate())].join("-");
-     + 
-    //取得済みの場合はそれを使う +    this._caches = (this._caches || {}); 
-    var cache = this.holidays[start + ".." + end]; +    this._userCallback = callback; 
-    if (cache) { + 
-        callback(cache);+    var cache = this._caches[start + ".." + end]; 
 + 
 +    if (cache) {    //取得済みの場合はそれを使う 
 +        callback(cache, 0);
         return;         return;
     }     }
  
-    this.userCallback = callback; 
-     
     //URL作成     //URL作成
-    var url = "http://www.google.com/calendar/feeds/"; +    var url = GCalHolidays.apiUrl + "?timeMin=" + start + "&timeMax=" + end;
-    url += this.userId + "/" + this.visibility + "/" + this.projection; +
-    url += "?alt=json-in-script&callback=GCalHolidays.decode"; +
-    url += "&max-results=" + this.maxResults + "&start-min=" + start + "&start-max=" + end;+
  
     //scriptタグ生成     //scriptタグ生成
行 113: 行 125:
     script.charset = "UTF-8";     script.charset = "UTF-8";
     document.body.appendChild(script);     document.body.appendChild(script);
-}+}
 +/** 
 +  JSONPによりGoogle Calendar API経由で呼び出されるfunction 
 +  @param  Object  gdata   カレンダーデータ 
 +  @param  String  start   開始日付 
 +  @param  String  end     終了日付 
 + */ 
 +GCalHolidays.decode = function(gdata, start, end) { 
 +    var days = GCalHolidays._entries2days(gdata.items);
  
 +    //キャッシュする
 +    this._caches[start + ".." + end] = days;
 +
 +    //コールバック
 +    this._userCallback(days, 0);    // 第2引数は過去バージョンの遺産
 +};
 /** /**
-    JSONPによりGoogle Calendar APIから呼びされるfunction+  JSONPで取得したデータから日付情報を取りす 
 +  @param  Array   entries スケジュール 
 +  @return Array   日付情報(year, month, date, title)
  */  */
-GCalHolidays.decode = function(gdata) { +GCalHolidays._entries2days = function(entries) {
-    var entries = gdata.feed.entry;+
     var days = [];     var days = [];
-     +    var cnt = 0; 
-    if (entries) { + 
-        //日付順にソート +    if (!entries) { 
-        entries.sort(function(a, b) { +        return days;
-            return (a.gd$when[0].startTime > b.gd$when[0].startTime) ? 1 : -1; +
-        }); +
-         +
-        //シンプルな器に移す +
-        for (var i in entries) { +
-            var arr = entries[i].gd$when[0].startTime.split("-"); +
-            for (var j in arr) { +
-                arr[j] *= 1;    //数値にする +
-            } +
-            days[i] = {year: arr[0], month: arr[1], date: arr[2], title: entries[i].title.$t}; +
-        }+
     }     }
-     + 
-    //日付範囲を取得 +    //シンプルな器に移す 
-    var feedParts = gdata.feed.link[3].href.split("&"); +    for (var 0len entries.length; i < len; i++) { 
-    var start ""end ""; +        var entry entries[i]
-    for (var in feedParts) { +        var ymd = entry.start.date.split("T")[0].split("-"); 
-        var params feedParts[i].split("="); + 
-        switch (params[0]+        days[cnt//年月日は使いやすいように数値にする 
-            case "start-min"start = params[1]; break; +            yearymd[0] * 1, 
-            case "start-max"end = params[1]; break; +            monthymd[1] * 1, 
-        }+            date: ymd[2] * 1, 
 +            title: entry.summary 
 +        }
 +        cnt++;
     }     }
-     + 
-    this.holidays[start + ".."end] days;    //キャシュする +    return days; 
-     +}; 
-    this.userCallback(days);    //ルバ+ 
 +/** 
 +  jQuery UI Datepickerのカレンダーに祝日を表示する 
 +  @param  Number  year    表示する年 
 +  @param  Number  month   表示する月 
 +  @param  Object  inst    Datepicker 
 +  @see http://jqueryui.com/demos/datepicker/ 
 + */ 
 +GCalHolidays.datepicker = function(year, month, inst) { 
 +    setTimeout(function() { //処理後に対象のdivが再構築されるケースを回避 
 +        for (var i = 0, len = (inst.settings.numberOfMonths || 1); i < len; i++) { 
 +            GCalHolidays.get(function(holidays) { 
 +                for (var j = 0, len2 = holidays.length; j < len2; j++) { 
 +                    var h = holidays[j]; 
 +                    var s = "[data-year=" + h.year + "][data-month=" + (h.month - 1) + "] a" 
 + 
 +                    inst.dpDiv.find(s).each(function() { 
 +                        if ($(this).text() == h.date) { 
 +                            $(this).addClass("gcal-holiday").attr("title", h.title); 
 +                            return false; 
 +                        } 
 +                    }); 
 +                } 
 +            }, year, month); 
 +             
 +            month++; 
 +             
 +            if (month > 12) { 
 +                year++; 
 +                month 1; 
 +            } 
 +        } 
 +    }, 1); 
 +}; 
 +/** 
 +  jQuery UI Datepickerが有効な場合はイベントハンドラとstyleをセする 
 + */ 
 +if (window.$ && $.datepicker && $.datepicker.setDefaults) { 
 +    $.datepicker.setDefaults({ 
 +        beforeShow: function(input, inst) { 
 +            var date = $(input).datepicker("getDate") || new Date(); 
 +            GCalHolidays.datepicker(date.getFullYear(), date.getMonth() + 1, inst); 
 +        }, 
 +        beforeShowDay: function(date) { //土日のclass属性 
 +            return [true, { 0: "gcal-sunday", 6: "gcal-saturday" }[date.getDay()] || ""]; 
 +        }, 
 +        onChangeMonthYear: GCalHolidays.datepicker 
 +    }); 
 + 
 +    $(function() {  //ジ表示後に土日・祝日用のstyleをセト 
 +        var styles = GCalHolidays.datepickerStyles; 
 +        var css = ""; 
 +        css += ".gcal-sunday   .ui-state-default { " + styles.sunday + " } "; 
 +        css += ".gcal-saturday .ui-state-default { " + styles.saturday + " } "; 
 +        css += ".ui-widget-content .gcal-holiday { " + styles.holiday + " }"; 
 +        $("head").append($('<style type="text/css">' + css + "</style>")); 
 +    });
 } }
 </code> </code>
  
 +==== GCalendar-Holidays.php ====
 +<code php>
 +<?php
 +/**
 +  GCalendar-Holidays.php
 +  @see       http://0-oo.net/sbox/javascript/google-calendar-holidays
 +  @version   0.1.0
 +  @copyright 2014 dgbadmin@gmail.com
 +  @license   http://0-oo.net/pryn/MIT_license.txt (The MIT license)
 + */
  
-===== 参考サイト ===== +// Google APIのKEY 
-  * [[http://code.google.com/apis/calendar/reference.html|API Reference Guide - Google Calendar APIs and Tools - Google Code]] +$googleApiKey = 'set your google api key!';
-  * [[http://code.google.com/apis/gdata/json.html|Using JSON with Google Data APIs - Google Data APIs - Google Code]]+
  
 +// GoogleカレンダーのID
 +$calendarId = 'japanese__ja@holiday.calendar.google.com';
 +
 +// 日付範囲
 +$timeMin = $_GET['timeMin'];
 +$timeMax = $_GET['timeMax'];
 +validate($timeMin);
 +validate($timeMax);
 +
 +// Google Calendar API V3のパラメータ
 +$params = array(
 + 'key' => $googleApiKey,
 + 'timeMin' => $timeMin . 'T00:00:00+0900',
 + 'timeMax' => $timeMax . 'T23:59:59+0900',
 + 'fields' => 'items(start,summary)',
 +);
 +
 +// Google Calendar API V3のURL
 +$apiUrl = 'https://www.googleapis.com/calendar/v3/calendars/';
 +$apiUrl .= rawUrlEncode($calendarId) . '/events?';
 +$apiUrl .= http_build_query($params);
 +
 +// 取得&出力
 +header('Content-Type: application/javascript; charset=utf-8');
 +echo 'GCalHolidays.decode(' . file_get_contents($apiUrl) . ', "' . $timeMin . '", "' . $timeMax . '");';
 +
 +// 不正文字列は弾く
 +function validate($date) {
 + if (!preg_match('/^[-0-9]+\z/', $date)) {
 + throw new Exception($date);
 + }
 +}
 +</code>
javascript/google-calendar-holidays.1204294337.txt.gz · 最終更新: 2008/02/29 23:12 by dgbadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki