javascript:yahho-calendar
文書の過去の版を表示しています。
目次
YUIのJavaScriptカレンダーを日本語化&ポップアップ対応&祝日も表示 - Yahho Calendar
コメントと更新履歴の参照はゼロと無限の間のログ » Yahho Calendarでどうぞ。
YUIカレンダーを日本語化してポップアップ対応にしたJavaScriptカレンダーです。別Windowで開くのではなく、JavaScriptでページ上に表示します。
合わせてGCalHolidaysを使うと祝日の表示もできます。
Yahoo!の日本版ということでヤッホーという名前にしました。(昔、Yahho!てサイトありましたね。)
サンプル
※サンプルで使っているのは最新のBeta版の場合あり
ライセンス
Yahho CalendarはMITライセンスで。
内部的に使っているYUI(Yahoo! UI Library)はBSDライセンスです。
YahhoCal.loadYUI()を使うと、デフォルトではGoogleによってホスティングされているYUIのファイルがロードされます。これを使う場合はGoogle AJAX Libraries APIの利用規約もご確認ください。)
また、祝日を表示する場合はGoogleカレンダーの利用規約もご確認ください。(参考:GCalHolidaysのライセンス)
ダウンロード
YahhoCal.css バージョン0.3.0からCSSは不要(JavaScript内で設定)になりました。
また、祝日を表示する場合はGCalHolidays.jsも必要です。
※ダウンロードのリンク先が最新のBeta版の場合あり
Yahho Calendarの使い方の例
- まずは、Yahho CalendarのJavaScriptファイルを読み込みます。祝日も表示するなら一緒にGCalHolidaysも読み込んでください。(パスは環境に合わせて変えてください。)
<script type="text/javascript" src="/path/to/your/YahhoCal.js"></script> <script type="text/javascript" src="/path/to/your/GCalHolidays.js"></script>
- 次に、YUIのJavaScriptとCSSをロードします。
<script type="text/javascript"> YahhoCal.loadYUI(); //Googleのサーバから読み込む場合 //YahhoCal.loadYUI("/path/to/your/yui/dir/"); //自分のサーバから読み込む場合。パスは環境に合わせて変更してください </script>
- あとは、onClickやonFocusなどのトリガーからYahhoCal.render()を呼べば、カレンダーを表示できます。パラメータとして、日付を入力する要素のid属性を渡してください。
- 例1:日付をテキストボックス1つに入力する場合の例。(日付の表示形式は“yyyy/m/d”です。)
<input type="text" id="inputId" name="inputDate" onclick="YahhoCal.render(this.id);" />
- 例3:日付を選択リスト3つ(年・月・日)で選択する場合の例。
<select id="selY" name="y"><option>2006</option><option>2007</option><option>2008</option></select>年 <select id="selM" name="m"><option>1</option> (中略) <option>12</option></select>月 <select id="selD" name="d"><option>1</option> (中略) <option>31</option></select>日 <input type="button" value="表示" onclick="YahhoCal.render('selY', 'selM', 'selD');" />
Yahho Calendar API リファレンス
YahhoCal.render(inputId, monthId, dateId)
- 概要
- カレンダーを表示する。
- パラメータ
- 日付を1つのテキストボックスに入力する場合・・・inputIdにはテキストボックスのid属性を渡す。monthId・dateIdには何も渡さない。
- 日付を年・月・日に分けて3つのテキストボックスまたは選択リストに入力する場合・・・それぞれのテキストボックスまたは選択リストに対応させて、inputIdには年のid属性、monthIdには月のid属性、dateIdには日のid属性を渡す
- 戻り値
- 無し
YahhoCal.loadYUI(yuiBase)
- 概要
- Yahho Calendarで必要なYUIのファイル(JavaScriptとCSS)を米Yahoo!のWebサーバから読み込む。
- パラメータ
- 省略可。省略すると、米Yahoo!のサーバからYUIをロードする。自分のサーバからYUIをロードする場合、YUIへのURLのベースとなる部分を渡す
- 戻り値
- 無し
YahhoCal.setMondayAs1st()
- 概要
- 週の初めを月曜日にする。(デフォルトは日曜日。)
- 週の初めを月曜日にしたい場合、カレンダーを表示する前にこのfunctionを実行する必要がある。
- 戻り値
- 無し
ソースコード
/** * Yahho Calendar - Japanized Popup Calendar * @see http://0-oo.net/sbox/javascript/yahho-calendar * @version 0.3.2 * @copyright 2008-2009 dgbadmin@gmail.com * @license http://0-oo.net/pryn/MIT_license.txt (The MIT license) */ var YahhoCal = { /** * loadYUI()で読み込むYUIのURL * @see http://developer.yahoo.com/yui/articles/hosting/ * @see http://code.google.com/intl/ja/apis/ajaxlibs/documentation/ */ YUI_URL: { SERVER: location.protocol + "//ajax.googleapis.com/ajax/libs/yui/", VERSION: "2.6.0", DIR: "/build/" }, /** カレンダーの見た目の設定 */ CAL_STYLE: { //幅(IE6で縮まるのを防ぐ) "": "width: 13em", //日曜日 "td.calcell.wd0 a.selector": "background-color: #fcf", //土曜日 "td.calcell.wd6 a.selector": "background-color: #cff", //祝日(要 GCalHolidays) "td.calcell.holiday a.selector": "background-color: #f9f", //今日 "td.calcell.today a.selector": "", //選択された日 "td.calcell.selected a.selector": "background-color: #0f0" }, /** 地域(YUI_CAL_CONFIGのどれを使うかの指定) */ locale: "ja", /** YUIカレンダー設定 */ YUI_CAL_CONFIG: { //英語 en: {}, //日本語 ja: { my_label_year_position: 1, my_label_year_suffix: "年 ", my_label_month_suffix: "月", months_long: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], weekdays_short: ["日", "月", "火", "水", "木", "金", "土"] }, //韓国語 ko: { my_label_year_position: 1, my_label_year_suffix: "년 ", my_label_month_suffix: "월", months_long: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], weekdays_short: ["일", "월", "화", "수", "목", "금", "토"] }, //中国語 zh: { my_label_year_position: 1, my_label_year_suffix: "年 ", my_label_month_suffix: "月", months_long: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], weekdays_short: ["日", "一", "二", "三", "四", "五", "六"] }, //スペイン語 es: { months_long: ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"], weekdays_short: ["do", "lu", "ma", "mi", "ju", "vi", "sa"] }, //ポルトガル語 pt: { months_long: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"], weekdays_short: ["Do", "Se", "Te", "Qu", "Qu", "Se", "Sa"] } }, //入力要素をラップするアダプタ adapters: {} }; /** * カレンダーを表示する * @param String inputId 入力要素のid or 年の入力要素のid * @param String monthId (optional) 月の入力要素のid * @param String dateId (optional) 日の入力要素のid * @return Boolean カレンダーの表示ができたかどうか */ YahhoCal.render = function(inputId, monthId, dateId) { if (!window.YAHOO || !YAHOO.widget.Calendar) { //YUIを読み込んでいない場合 return false; } var currentId = (this.currentId = dateId || inputId); //入力要素を特定するID //アダプタを取得 if (!this.adapters[currentId]) { this.adapters[currentId] = this.createAdapter(inputId, monthId, dateId); } var adapter = this.adapters[currentId]; var cal = this.cal; if (cal) { //再表示の場合 YAHOO.util.Dom.insertAfter(this.place, currentId); cal.show(); } else { //初めて表示する場合 this.setStyle(); cal = this.cal = this.createCalendar(currentId); } //入力済みの日付を取得 var val = adapter.getDate(); var y = val[0], m = val[1], d = val[2]; var shown = new Date(y, m - 1, d); //表示設定 var pagedate = "", selected = ""; if ((shown.getFullYear() == y && shown.getMonth() + 1 == m && shown.getDate() == d)) { //日付として正しい場合 pagedate = m + "/" + y; selected = m + "/" + d + "/" + y; } else { shown = new Date(); } cal.cfg.setProperty("pagedate", pagedate); //表示する年月 cal.cfg.setProperty("selected", selected); //選択状態の日付 cal.render(); this.showHolidays(shown); return true; }; /** * 入力要素とカレンダーとのポリモフィズムなアダプタを生成する */ YahhoCal.createAdapter = function(inputId, monthId, dateId) { var adapter = {}; if (!monthId) { //テキストボックス1つの場合(YYYY/M/D) var ymd = document.getElementById(inputId); adapter.getDate = function() { return ymd.value.split("/"); }; adapter.setDate = function(y, m, d) { ymd.value = y + "/" + m + "/" + d; }; return adapter; } //年・月・日が分かれている場合 var ey = document.getElementById(inputId); var em = document.getElementById(monthId); var ed = document.getElementById(dateId); if (ey.tagName == "INPUT") { //テキストボックスの場合 adapter.getDate = function() { return [ey.value, em.value, ed.value]; }; adapter.setDate = function(y, m, d) { ey.value = y; em.value = m; ed.value = d; }; return adapter; } //選択リストの場合 var getNumber = function(opt) { return (opt.value || opt.text).replace(/^0+/, ""); }; var getValue = function(sel) { return getNumber(sel.options[sel.selectedIndex]); }; var setValue = function(sel, value) { for (var i = 0; i < sel.length; i++) { if (getNumber(sel.options[i]) == value) { sel.options[i].selected = true; return; } } }; adapter.getDate = function() { return [getValue(ey), getValue(em), getValue(ed)]; }; adapter.setDate = function(y, m, d) { setValue(ey, y); setValue(em, m); setValue(ed, d); }; return adapter; }; /** * styleを設定する */ YahhoCal.setStyle = function() { var css = ""; for (var target in this.CAL_STYLE) { css += ".yui-skin-sam table.yui-calendar " + target; css += "{" + this.CAL_STYLE[target] + "}"; } var tmp = document.createElement("div"); tmp.innerHTML = 'dummy<style type="text/css">' + css + "</style>"; document.getElementsByTagName("head")[0].appendChild(tmp.lastChild); }; /** * カレンダーを生成する */ YahhoCal.createCalendar = function(insertId) { //YUI skinを適用 YAHOO.util.Dom.addClass(document.getElementsByTagName("body")[0], "yui-skin-sam"); //カレンダーの場所を作る var place = (this.place = document.createElement("div")); YAHOO.util.Dom.setStyle(place, "position", "absolute"); YAHOO.util.Dom.setStyle(place, "z-index", 1); YAHOO.util.Dom.insertAfter(place, insertId); //カレンダー生成 var config = this.YUI_CAL_CONFIG[this.locale]; config.close = true; config.hide_blank_weeks = true; var cal = new YAHOO.widget.Calendar(place, config); //日付を選択された時のイベント cal.selectEvent.subscribe(function(eventName, date) { var dateStr = date[0][0]; YahhoCal.adapters[YahhoCal.currentId].setDate(dateStr[0], dateStr[1], dateStr[2]); cal.hide(); }, cal, true); //月を移動された時のイベント cal.changePageEvent.subscribe(function() { YahhoCal.showHolidays(cal.cfg.getProperty("pagedate")); }, cal, true); return cal; }; /** * 祝日を表示する */ YahhoCal.showHolidays = function(target) { if (!window.GCalHolidays) { //GCalHolidays.jsを読み込んでいない場合 return; } GCalHolidays.get(this.setHolidays, target.getFullYear(), target.getMonth() + 1); }; /** * 祝日表示を設定する */ YahhoCal.setHolidays = function(holidays) { if (holidays.length === 0) { return; } //該当年月のままか確認 var first = holidays[0]; var table = YAHOO.util.Dom.getElementsByClassName("y" + first.year, "table", this.place)[0]; var tbody = YAHOO.util.Dom.getElementsByClassName("m" + first.month, "tbody", table)[0]; if (!table || !tbody) { return; } //祝日設定 for (var i in holidays) { var h = holidays[i]; var td = YAHOO.util.Dom.getElementsByClassName("d" + h.date, "td", tbody)[0]; YAHOO.util.Dom.addClass(td, "holiday"); td.title = h.title; //マウスオーバーで祝日名を表示 } }; /** * 必要なYUIのJavaScriptとCSSを読み込む * @param String yuiBase (optional) yui.yahooapis.comを使わない場合、YUIのベースとなるURL */ YahhoCal.loadYUI = function(yuiBase) { if (!yuiBase) { yuiBase = this.YUI_URL.SERVER + this.YUI_URL.VERSION + this.YUI_URL.DIR; } //YUI Loaderをload var script = document.createElement("script"); script.type = "text/javascript"; script.src = yuiBase + "yuiloader-dom-event/yuiloader-dom-event.js"; document.getElementsByTagName("head")[0].appendChild(script); //YUI Loaderがloadされるまで待つ var limit = 5000, interval = 50, time = 0; var loadedId = setInterval(function(){ if (window.YAHOO) { clearInterval(loadedId); //YUI Calendarをload new YAHOO.util.YUILoader({ base: yuiBase, require: ["calendar"] }).insert(); } else if ((time += interval) > limit) { //タイムアウト clearInterval(loadedId); } }, interval); }; /** * 週の初めを月曜日にする */ YahhoCal.setMondayAs1st = function() { this.YUI_CAL_CONFIG[this.locale].start_weekday = 1; };
javascript/yahho-calendar.1233673477.txt.gz · 最終更新: 2009/02/04 00:04 by dgbadmin