javascript:google-calendar-holidays
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
javascript:google-calendar-holidays [2008/02/29 23:12] – image追加 dgbadmin | javascript: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/ |
- | [[http://code.google.com/ | + | {{: |
+ | |||
+ | [[https://developers.google.com/ | ||
Googleカレンダーに登録されている祝日なので、ハッピーマンデーの時のように休日の制度が変わっても柔軟に対応できます。\\ | Googleカレンダーに登録されている祝日なので、ハッピーマンデーの時のように休日の制度が変わっても柔軟に対応できます。\\ | ||
ただしGoogleカレンダーに登録されている祝日が間違っている(あるいは最新でない)場合もそのまま表示されます。: | ただしGoogleカレンダーに登録されている祝日が間違っている(あるいは最新でない)場合もそのまま表示されます。: | ||
- | コメントと更新履歴の参照は[[http:// | + | [[Yahho Calendar|Yahho Calendar]]または[[http:// |
+ | |||
+ | ===== バージョン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:// | ||
+ | バージョン0.4.0からはjQuery UI Datepickerの土曜日・日曜日に背景色を付けるようにしました。 | ||
+ | |||
+ | 使い方は、jQuery UI Datepickerを使うページでGcalendar HolidaysのJavaScriptファイルを読み込むだけです。(下記サンプル参照) | ||
===== サンプル ===== | ===== サンプル ===== | ||
下記のページで実際に使ってみてください。\\ | 下記のページで実際に使ってみてください。\\ | ||
- | [[http:// | + | * [[http:// |
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | |||
+ | ※サンプルで使っているのは最新のBeta版の場合あり | ||
===== ライセンス ===== | ===== ライセンス ===== | ||
- | GCalHolidaysは[[http:// | + | GCalendar Holidaysは[[http:// |
- | GCalHolidaysはGoogle Calendar APIを利用するので、[[http:// | + | GCalendar HolidaysはGoogle Calendar APIを利用するので、[[http:// |
===== ダウンロード ===== | ===== ダウンロード ===== | ||
- | [[http:// | + | [[http://g.0-oo.net/gcalendar-holidays.js|gcalendar-holidays.js]] |
+ | ※ダウンロードのリンク先が最新のBeta版の場合あり | ||
- | ===== GCalHolidays | + | ===== GCalendar Holidays |
==== GCalHolidays ==== | ==== GCalHolidays ==== | ||
+ | === GCalHolidays.apiUrl === | ||
+ | * GCalendar-Holidays.phpのURLをセットしておく。 | ||
+ | |||
=== GCalHolidays.get(callback, | === GCalHolidays.get(callback, | ||
* 概要 | * 概要 | ||
行 40: | 行 64: | ||
* month : [オプション] 対象とする月。指定しないと一年分のデータを取得する。 | * month : [オプション] 対象とする月。指定しないと一年分のデータを取得する。 | ||
- | === GCalHolidays.userId | + | === GCalHolidays.datepickerStyles |
- | * GoogleカレンダーのIDを指定するプロパティ | + | * [[http:// |
- | * デフォルトはmozilla.orgからインポートしている日本の祝日 | + | |
- | + | ||
- | === GCalHolidays.maxResults === | + | |
- | * 取得するデータの最大件数を指定するプロパティ | + | |
- | * デフォルトは30 | + | |
===== さらに進んだ使い方 ===== | ===== さらに進んだ使い方 ===== | ||
- | GCalHolidaysのプロパティを変更すれば、他の国の祝日や祝日以外のデータ(Googleカレンダーで公開されているイベントのデータ)も取得できます。 | + | GCalendar-Holidays.phpで指定するGoogleカレンダーのIDを変更すれば、他の国の祝日や祝日以外のデータ(Googleカレンダーで公開されているイベントのデータ)も取得できます。 |
- | + | ||
- | 例:サッカーの日本代表のスケジュールを取得する場合 | + | |
- | <code javascript> | + | |
- | GCalHolidays.userId = " | + | |
- | GCalHolidays.max = 50; | + | |
- | GCalHolidays.get(callback, | + | |
- | </ | + | |
行 63: | 行 75: | ||
<code javascript> | <code javascript> | ||
/** | /** | ||
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
*/ | */ | ||
var GCalHolidays = { | var GCalHolidays = { | ||
- | //userId: " | + | /** Google Calendarから情報を取得するAPIのURL */ |
- | | + | |
- | userId: " | + | |
- | , visibility: | + | |
- | | + | |
- | , maxResults: 30 | + | |
- | , holidays: {} | + | |
- | }; | + | |
+ | /** jQuery UI Datepicker用のstyle(Themeに合わせてお好みで上書きして使う) */ | ||
+ | datepickerStyles: | ||
+ | sunday: | ||
+ | saturday: " | ||
+ | holiday: | ||
+ | } | ||
+ | }; | ||
/** | /** | ||
- | | + | |
- | | + | |
- | | + | |
+ | | ||
*/ | */ | ||
GCalHolidays.get = function(callback, | GCalHolidays.get = function(callback, | ||
// | // | ||
- | var padZero = function(value) { return (" | + | var padZero = function(value) { return (" |
var y = year || new Date().getFullYear(); | var y = year || new Date().getFullYear(); | ||
var start = [y, padZero(month || 1), " | var start = [y, padZero(month || 1), " | ||
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(" | ||
- | | + | |
- | | + | |
- | var cache = this.holidays[start + " | + | this._userCallback = callback; |
- | if (cache) { | + | |
- | callback(cache); | + | var cache = this._caches[start + " |
+ | |||
+ | if (cache) { // | ||
+ | callback(cache, 0); | ||
return; | return; | ||
} | } | ||
- | this.userCallback = callback; | ||
- | | ||
//URL作成 | //URL作成 | ||
- | var url = " | + | var url = GCalHolidays.apiUrl |
- | url += this.userId + "/" | + | |
- | url += "?alt=json-in-script& | + | |
- | url += "& | + | |
// | // | ||
行 113: | 行 125: | ||
script.charset = " | script.charset = " | ||
document.body.appendChild(script); | document.body.appendChild(script); | ||
- | } | + | }; |
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GCalHolidays.decode = function(gdata, | ||
+ | var days = GCalHolidays._entries2days(gdata.items); | ||
+ | // | ||
+ | this._caches[start + " | ||
+ | |||
+ | // | ||
+ | this._userCallback(days, | ||
+ | }; | ||
/** | /** | ||
- | | + | |
+ | | ||
+ | | ||
*/ | */ | ||
- | GCalHolidays.decode | + | GCalHolidays._entries2days |
- | var entries = gdata.feed.entry; | + | |
var days = []; | var days = []; | ||
- | + | | |
- | if (entries) { | + | |
- | | + | if (!entries) { |
- | entries.sort(function(a, | + | return days; |
- | | + | |
- | }); | + | |
- | + | ||
- | // | + | |
- | for (var i in entries) { | + | |
- | var arr = entries[i].gd$when[0].startTime.split(" | + | |
- | for (var j in arr) { | + | |
- | arr[j] *= 1; // | + | |
- | } | + | |
- | | + | |
- | } | + | |
} | } | ||
- | | + | |
- | //日付範囲を取得 | + | //シンプルな器に移す |
- | | + | |
- | | + | var entry = entries[i]; |
- | for (var i in feedParts) { | + | var ymd = entry.start.date.split(" |
- | var params | + | |
- | | + | |
- | | + | |
- | | + | |
- | } | + | date: ymd[2] * 1, |
+ | title: entry.summary | ||
+ | }; | ||
+ | cnt++; | ||
} | } | ||
- | | + | |
- | | + | |
- | + | }; | |
- | | + | |
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GCalHolidays.datepicker = function(year, | ||
+ | setTimeout(function() { // | ||
+ | for (var i = 0, len = (inst.settings.numberOfMonths || 1); i < len; i++) { | ||
+ | GCalHolidays.get(function(holidays) { | ||
+ | for (var j = 0, len2 = holidays.length; | ||
+ | var h = holidays[j]; | ||
+ | var s = " | ||
+ | |||
+ | inst.dpDiv.find(s).each(function() { | ||
+ | if ($(this).text() == h.date) { | ||
+ | $(this).addClass("gcal-holiday" | ||
+ | return false; | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | }, year, month); | ||
+ | |||
+ | month++; | ||
+ | |||
+ | if (month > 12) { | ||
+ | year++; | ||
+ | month = 1; | ||
+ | } | ||
+ | } | ||
+ | }, 1); | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | */ | ||
+ | if (window.$ && $.datepicker && $.datepicker.setDefaults) { | ||
+ | | ||
+ | beforeShow: function(input, | ||
+ | var date = $(input).datepicker(" | ||
+ | GCalHolidays.datepicker(date.getFullYear(), | ||
+ | }, | ||
+ | beforeShowDay: | ||
+ | return [true, { 0: " | ||
+ | }, | ||
+ | onChangeMonthYear: | ||
+ | }); | ||
+ | |||
+ | $(function() { | ||
+ | var styles = GCalHolidays.datepickerStyles; | ||
+ | var css = ""; | ||
+ | css += " | ||
+ | css += " | ||
+ | css += " | ||
+ | $(" | ||
+ | }); | ||
} | } | ||
</ | </ | ||
+ | ==== GCalendar-Holidays.php ==== | ||
+ | <code php> | ||
+ | <?php | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
- | ===== 参考サイト ===== | + | // Google |
- | * [[http://code.google.com/ | + | $googleApiKey = 'set your google |
- | * [[http:// | + | |
+ | // GoogleカレンダーのID | ||
+ | $calendarId = ' | ||
+ | |||
+ | // 日付範囲 | ||
+ | $timeMin = $_GET[' | ||
+ | $timeMax = $_GET[' | ||
+ | validate($timeMin); | ||
+ | validate($timeMax); | ||
+ | |||
+ | // Google Calendar API V3のパラメータ | ||
+ | $params = array( | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ); | ||
+ | |||
+ | // Google Calendar API V3のURL | ||
+ | $apiUrl = ' | ||
+ | $apiUrl .= rawUrlEncode($calendarId) . '/ | ||
+ | $apiUrl .= http_build_query($params); | ||
+ | |||
+ | // 取得&出力 | ||
+ | header(' | ||
+ | echo ' | ||
+ | |||
+ | // 不正文字列は弾く | ||
+ | function validate($date) { | ||
+ | if (!preg_match('/ | ||
+ | throw new Exception($date); | ||
+ | } | ||
+ | } | ||
+ | </ |
javascript/google-calendar-holidays.1204294337.txt.gz · 最終更新: 2008/02/29 23:12 by dgbadmin