ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール


javascript:google-calendar-holidays

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
javascript:google-calendar-holidays [2009/10/08 22:36] – 0.1.4 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版の場合あり ※サンプルで使っているのは最新の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版の場合あり ※ダウンロードのリンク先が最新のBeta版の場合あり
  
-===== GCalHolidays API リファレンス =====+===== GCalendar Holidays API リファレンス =====
 ==== GCalHolidays ==== ==== GCalHolidays ====
 +=== GCalHolidays.apiUrl ===
 +  * GCalendar-Holidays.phpのURLをセットしておく。
 +
 === GCalHolidays.get(callback, year, month) === === GCalHolidays.get(callback, year, month) ===
   * 概要   * 概要
行 42: 行 64:
   * month : [オプション] 対象とする月。指定しないと一年分のデータを取得する。   * month : [オプション] 対象とする月。指定しないと一年分のデータを取得する。
  
-=== GCalHolidays.userId === +=== GCalHolidays.datepickerStyles === 
-  * GoogleカレンダーのIDを指定するプロパティ +  * [[http://jqueryui.com/datepicker/|jQuery UI Datepicker]]と合わせて使う場合、土曜・日曜日・祝日のstyle(CSS)
-  * デフォルトはGoogleの公式の日本の祝日 +
- +
-=== 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>+
  
  
行 65: 行 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.4 +  @version   0.6.0 
-  @copyright 2008-2009 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", +    /** jQuery UI Datepicker用のstyle(Themeに合わせてお好みで上書きして使う) *
-    projection: "full-noattendees", +    datepickerStyles:
-    maxResults: 30, +        sunday  "background-image: none; background-color: #f99", //日曜日 
-    holidays: {}+        saturday: "background-image: none; background-color: #6cf", //土曜日 
 +        holiday "background-image: none; background-color: #f9f //祝日 
 +    }
 }; };
 /** /**
行 93: 行 105:
     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 = location.protocol "//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タグ生成
行 117: 行 127:
 }; };
 /** /**
-  JSONPによりGoogle Calendar APIから呼び出されるfunction+  JSONPによりGoogle Calendar API経由で呼び出されるfunction
   @param  Object  gdata   カレンダーデータ   @param  Object  gdata   カレンダーデータ
 +  @param  String  start   開始日付
 +  @param  String  end     終了日付
  */  */
-GCalHolidays.decode = function(gdata) { +GCalHolidays.decode = function(gdata, start, end) { 
-    var entries = gdata.feed.entry; +    var days GCalHolidays._entries2days(gdata.items);
-    var days = [];+
  
-    if (entries) { +    //キャッシュする 
-        //日付順にソート +    this._caches[start + ".." + end= days;
-        entries.sort(function(a, b) { +
-            return (a.gd$when[0].startTime > b.gd$when[0].startTime) ? 1 : -1; +
-        });+
  
-        //シンプな器に移す +    //コーバック 
-        for (var i = 0len = entries.length; i < len; i++) { +    this._userCallback(days, 0);    // 第2引は過去バージョンの遺産 
-            var arr = entries[i].gd$when[0].startTime.split("-")+}; 
-            for (var j = 0; j < 3; j++) { +/** 
-                arr[j] *= 1;    //数値にする +  JSONPで取得したデータから日付情報を取り出す 
-            +  @param  Array   entries スケジュール 
-            days[i] = {year: arr[0], month: arr[1], date: arr[2], titleentries[i].title.$t}+  @return Array   日付情報(year, month, date, title) 
-        }+ */ 
 +GCalHolidays._entries2days = function(entries) { 
 +    var days = []; 
 +    var cnt = 0; 
 + 
 +    if (!entries) { 
 +        return days;
     }     }
  
-    //日付範囲を取得 +    //シンプルな器に移す 
-    var feedParts = gdata.feed.link[3].href.split("&"); +    for (var i = 0, len = entries.length; i < len; i++) { 
-    var start = "", end = ""; +        var entry entries[i]
-    for (var i = 0, len = feedParts.length; i < len; i++) { +        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; +            month: ymd[1] * 1, 
-        }+            dateymd[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 ==== 
-  * [[http://code.google.com/apis/calendar/reference.html|API Reference Guide Google Calendar APIs and Tools Google Code]] +<code php> 
-  * [[http://code.google.com/apis/gdata/json.html|Using JSON with Google Data APIs - Google Data APIs - Google Code]]+<?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
 +$googleApiKey = 'set your google api key!';
 +
 +// 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.1255008998.txt.gz · 最終更新: 2009/10/08 22:36 by dgbadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki