ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール


javascript:yahho-calendar

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
javascript:yahho-calendar [2009/04/17 21:58] – 日付のフォーマットを変えるサンプル追加 dgbadminjavascript:yahho-calendar [2018/03/10 12:30] (現在) – [サンプル] サンプル7を追加 dgbadmin
行 5: 行 5:
 {{javascript:yahhocal.jpg|}} {{javascript:yahhocal.jpg|}}
  
-[[http://developer.yahoo.com/yui/calendar/|YUIYahoo! UI Libraryのカレンダー]]を日本語化してポップアップ対応にしたJavaScriptカレンダーです。別Windowで開くのではなく、JavaScriptでページ上に表示します。\\ +Webのformで日付を入力する際に日付の選択をしやすくするためのポップアップカレンダー(Datepikcer)を表示するJavaScriptライブラリです。別Windowで開くのではなく、form上に表示します。(サンプルを見てもらうと分かりやすいと思います。) 
-合わせて[[google-calendar-holidays|GCalHolidays]]を使うと祝日の表示もできます。\\+ 
 +カレンダーは[[http://yui.github.io/yui2/|YUI 2 (Yahoo! UI Library version 2)]]のカレンダーを日本語を含む多国語化してポップアップ対応にしたのです。\\ 
 +また、これと合わせて[[google-calendar-holidays|GCalendar Holidays]]を使うとカレンダー上に祝日の表示もできます。\\
  
 Yahoo!の日本版ということでヤッホーという名前にしました。(昔、Yahho!てサイトありましたね。) Yahoo!の日本版ということでヤッホーという名前にしました。(昔、Yahho!てサイトありましたね。)
行 13: 行 15:
 ===== サンプル ===== ===== サンプル =====
 [[http://0-oo.net/sam/yahho-calendar/|Yahho Calendarのサンプル]]\\ [[http://0-oo.net/sam/yahho-calendar/|Yahho Calendarのサンプル]]\\
-[[http://0-oo.net/sam/yahho-calendar/mindate.html|Yahho Calendarのサンプル その2(選択できる日を限定したりESCキーでカレンダーを閉じたり)]] +[[http://0-oo.net/sam/yahho-calendar/mindate.html|Yahho Calendarのサンプル その2(選択できる日を限定する)]]\\ 
-[[http://0-oo.net/sam/yahho-calendar/format.html|Yahho Calendarのサンプル その3(日付のフォーマットを変える)]]+[[http://0-oo.net/sam/yahho-calendar/format.html|Yahho Calendarのサンプル その3(日付のフォーマットを変える)]]\\ 
 +[[http://0-oo.net/sam/yahho-calendar/unselectable.php|Yahho Calendarのサンプル その4(表示するだけ(日付を選択しない))]]\\ 
 +[[http://0-oo.net/sam/yahho-calendar/multi-schedules.php|Yahho Calendarのサンプル その5(複数のGoogleカレンダーを表示)]]\\ 
 +[[http://0-oo.net/sam/yahho-calendar/calendars.php|Yahho Calendarのサンプル その6(複数の年月日入力を表示)]]\\ 
 +[[http://0-oo.net/sam/yahho-calendar/insert-id.php|Yahho Calendarのサンプル その7(テキストボックス1つで別の場所にカレンダーを表示)]]\\
  
 ※サンプルで使っているのは最新のBeta版の場合あり ※サンプルで使っているのは最新のBeta版の場合あり
行 21: 行 27:
 ===== ライセンス ===== ===== ライセンス =====
 Yahho Calendarは[[http://0-oo.net/pryn/MIT_license.txt|MITライセンス]]で。\\ Yahho Calendarは[[http://0-oo.net/pryn/MIT_license.txt|MITライセンス]]で。\\
-内部的に使っているYUIは[[http://developer.yahoo.com/yui/license.html|BSDライセンス]]です。\\+内部的に使っているYUIは[[https://github.com/yui/yui3/blob/master/LICENSE.md|BSDライセンス]]です。\\
  
-YahhoCal.loadYUI()を使うと、デフォルトではGoogleによってホスティングされているYUIのファイルがロードされます。これを使う場合は[[http://code.google.com/intl/ja/apis/ajaxlibs/terms.html|Google AJAX Libraries APIの利用規約]]もご確認ください。)\\+YahhoCal.loadYUI()を使うと、デフォルトではGoogleによってホスティングされているYUIのファイルがロードされます。これを使う場合は[[https://developers.google.com/speed/libraries/|Google Hosted Libraries]]もご確認ください。)\\
  
-また、祝日を表示する場合は[[http://www.google.com/googlecalendar/terms_of_use.html|Googleカレンダーの利用規約]]もご確認ください。(参考:[[google-calendar-holidays#%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9|GCalHolidaysのライセンス]])+また、祝日を表示する場合は[[https://developers.google.com/google-apps/calendar/terms|Google Calendar API Terms of Service]]もご確認ください。(参考:[[google-calendar-holidays#%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9|GCalendar Holidaysのライセンス]])
  
  
  
 ===== ダウンロード ===== ===== ダウンロード =====
-[[http://0-oo.net/js/YahhoCal.js|YahhoCal.js]]\\+[[http://g.0-oo.net/yahho-calendar.js|yahho-calendar.js]]\\
  
 <del>YahhoCal.css</del> バージョン0.3.0からCSSは不要(JavaScript内で設定)になりました。8-)\\ <del>YahhoCal.css</del> バージョン0.3.0からCSSは不要(JavaScript内で設定)になりました。8-)\\
  
-また、祝日を表示するには[[Google Calendar Holidays|GCalHolidays]]も必要です。+また、祝日を表示するには[[Google Calendar Holidays|GCalendar Holidays]]も必要です。
  
 ※ダウンロードのリンク先が最新のBeta版の場合あり ※ダウンロードのリンク先が最新のBeta版の場合あり
行 40: 行 46:
  
 ===== Yahho Calendarの使い方の例 ===== ===== Yahho Calendarの使い方の例 =====
-  - まずは、Yahho CalendarのJavaScriptファイルを読み込みます。祝日も表示するなら一緒に[[Google Calendar Holidays|GCalHolidays]]も読み込んでください。(パスは環境に合わせて変えてください。)<code html> +  - まずは、Yahho CalendarのJavaScriptファイルを読み込みます。祝日も表示するなら一緒に[[Google Calendar Holidays|GCalendar Holidays]]も読み込んでください。(パスは環境に合わせて変えてください。)<code html> 
-<script type="text/javascript" src="/path/to/your/YahhoCal.js"></script> +<script type="text/javascript" src="/path/to/your/yahho-calendar.js"></script> 
-<script type="text/javascript" src="/path/to/your/GCalHolidays.js"></script>+<script type="text/javascript" src="/path/to/your/gcalendar-holidays.js"></script>
 </code> </code>
   - 次に、YUIのJavaScriptとCSSをロードします。<code javascript>   - 次に、YUIのJavaScriptとCSSをロードします。<code javascript>
行 51: 行 57:
 </script> </script>
 </code> </code>
-  - あとは、onClickonFocusなどのトリガーからYahhoCal.render()を呼べば、カレンダーを表示できます。パラメータとして、日付を入力する要素のid属性を渡してください。+  - あとは、onclickonfocusなどのトリガーからYahhoCal.render()を呼べば、カレンダーを表示できます。パラメータとして、日付を入力する要素のid属性を渡してください。
     * 例1:日付をテキストボックス1つに入力する場合の例。(日付の表示形式は"yyyy/m/d"です。)<code html>     * 例1:日付をテキストボックス1つに入力する場合の例。(日付の表示形式は"yyyy/m/d"です。)<code html>
 <input type="text" id="inputId" name="inputDate" onclick="YahhoCal.render(this.id);" /> <input type="text" id="inputId" name="inputDate" onclick="YahhoCal.render(this.id);" />
行 71: 行 77:
 ===== Yahho Calendar API リファレンス ===== ===== Yahho Calendar API リファレンス =====
  
-==== YahhoCal.render(inputId, monthId, dateId) ====+==== YahhoCal.render(inputId, monthId, dateId, insertId) ====
   * 概要   * 概要
     * カレンダーを表示する。     * カレンダーを表示する。
   * パラメータ   * パラメータ
-    * 日付を1つのテキストボックスに入力する場合・・・inputIdにはテキストボックスのid属性を渡す。monthId・dateIdには何も渡さない。 +    * inputId, monthId, dateId : 
-    * 日付を年・月・日に分けて3つのテキストボックスまたは選択リストに入力する場合・・・それぞれのテキストボックスまたは選択リストに対応させて、inputIdには年のid属性、monthIdには月のid属性、dateIdには日のid属性を渡す+      * 日付を1つのテキストボックスに入力する場合 
 +        * inputIdにはテキストボックスのid属性を渡す。monthId・dateIdには何も渡さない。 
 +      * 日付を年・月・日に分けて3つのテキストボックスまたは選択リストに入力する場合 
 +        * それぞれのテキストボックスまたは選択リストに対応させて、inputIdには年のid属性、monthIdには月のid属性、dateIdには日のid属性を渡す 
 +    * insertId : 省略可。カレンダーを表示する場所のid属性。これを指定しない場合、inputIdの場所にカレンダーを表示する
   * 戻り値   * 戻り値
-    * 無し+    * カレンダーを表示できたかどうか(true or false)
  
-==== YahhoCal.loadYUI(yuiBase) ====+==== YahhoCal.loadYUI(yuiBase, callback) ====
   * 概要   * 概要
     * Yahho Calendarで必要なYUIのファイル(JavaScriptとCSS)をGoogleのWebサーバから読み込む。     * Yahho Calendarで必要なYUIのファイル(JavaScriptとCSS)をGoogleのWebサーバから読み込む。
-    * 参考:[[http://developer.yahoo.com/yui/articles/hosting/|Serving YUI Files from Yahoo! Servers]]、[[http://code.google.com/intl/ja/apis/ajaxlibs/documentation/|Developer's Guide - AJAX Libraries API - Google Code]] 
   * パラメータ   * パラメータ
-    * 省略可。省略すると、GoogleのサーバからYUIをロードする。自分のサーバからYUIをロードする場合、YUIへのURLのベースとなる部分を渡す+    * yuiBase : 省略可。省略すると、GoogleのサーバからYUIをロードする。自分のサーバからYUIをロードする場合、YUIへのURLのベースとなる部分を渡す 
 +    * callback : 省略可。YUIロード後に実行するコールバック関数
   * 戻り値   * 戻り値
     * 無し     * 無し
行 111: 行 121:
     * m : 月(1~12)     * m : 月(1~12)
     * d : 日     * d : 日
 +
 +==== YahhoCal.locale ====
 +  * 言語を指定するプロパティ
 +  * 下記の言語から選択できる
 +    * en (英語)
 +    * ja (日本語)
 +    * ko (韓国語)
 +    * zh (中国語。簡体字も繁体字も同じ)
 +    * es (スペイン語)
 +    * pt (ポルトガル語)
 +
 +==== YahhoCal.format ====
 +  * 選択された日付をテキストボックスに貼り付ける場合の日付表記の形式を設定するプロパティ
 +  * 子プロパティとして下記のプロパティがある
 +    * delimiter : 年月日の区切り文字
 +    * padZero : 月や日が1桁の場合に左側にゼロ埋めをするかどうか(true or false)
 +
 +==== YahhoCal.holidays ====
 +  * [[Google Calendar Holidays|GCalendar Holidays]]を使ってGoogleカレンダーの祝日(または他のスケジュール)を表示する場合の設定をするプロパティ
 +  * 子プロパティとして下記のプロパティがある
 +    * delimiter : 複数のスケジュールを表示する場合の区切り文字
 +    * prefixes : スケジュールの前に付ける文字列
 +
 +==== YahhoCal.isPopup ====
 +  * カレンダーをポップアップとして表示するかどうかを設定するプロパティ(true or false)
  
  
行 117: 行 152:
 <code javascript> <code javascript>
 /** /**
-  Yahho Calendar - Japanized Popup Calendar+  Yahho Calendar - Japanized (and actually multilingual) Datepicker
   @see       http://0-oo.net/sbox/javascript/yahho-calendar   @see       http://0-oo.net/sbox/javascript/yahho-calendar
-  @version   0.4.0 +  @version   0.4.6 
-  @copyright 2008-2009 dgbadmin@gmail.com+  @copyright 2008-2011 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)
  *  *
行 132: 行 167:
       loadYUI()で読み込むYUIのURL       loadYUI()で読み込むYUIのURL
       @see http://developer.yahoo.com/yui/articles/hosting/       @see http://developer.yahoo.com/yui/articles/hosting/
-      @see http://code.google.com/intl/ja/apis/ajaxlibs/documentation/#yui+      @see http://code.google.com/intl/en/apis/libraries/devguide.html#yui
      */      */
     YUI_URL: {     YUI_URL: {
         SERVER: location.protocol + "//ajax.googleapis.com/ajax/libs/yui/",         SERVER: location.protocol + "//ajax.googleapis.com/ajax/libs/yui/",
-        VERSION: "2.7.0",+        VERSION: "2",   //2.x系の最新を使う
         DIR: "/build/"         DIR: "/build/"
     },     },
-    +
     /** カレンダーの見た目の設定 */     /** カレンダーの見た目の設定 */
     CAL_STYLE: {     CAL_STYLE: {
行 145: 行 180:
         "": "width: 13em",         "": "width: 13em",
         //日曜日         //日曜日
-        "td.wd0 a.selector": "background-color: #fcf",+        "td.wd0 a": "background-color: #fcf",
         //土曜日         //土曜日
-        "td.wd6 a.selector": "background-color: #cff", +        "td.wd6 a": "background-color: #cff", 
-        //祝日(要 GCalHolidays) +        //祝日(要 GCalendar Holidays) 
-        "td.holiday a.selector": "background-color: #f9f", +        "td.holiday0 a": "background-color: #f9f", 
-        //今日 +        //今日(デフォルトではa要素の周り1pxに背景色が見えるので黒い枠線になる) 
-        "td.today a.selector": "",+        "td.today": "",     //デフォルトは背景色:黒 
 +        "td.today a": "",   //デフォルトは背景色:白(ただし土日祝日の背景色が優先)
         //選択された日         //選択された日
-        "td.selected a.selector": "background-color: #0f0",+        "td.selected a": "background-color: #0f0",
         //選択可能な日付の範囲外の日(今日が黒くなるのを防ぐ)         //選択可能な日付の範囲外の日(今日が黒くなるのを防ぐ)
         "td.previous": "background-color: #fff"         "td.previous": "background-color: #fff"
行 184: 行 220:
             ]             ]
         },         },
-        //中国語+        //中国語(繁体字も簡体字も同じ)
         zh: {         zh: {
             my_label_year_position: 1,             my_label_year_position: 1,
行 209: 行 245:
         }         }
     },     },
-     + 
-    //入力要素をラするダプ +    //テキストボクスでの日付フォーマット 
-    adapters: {}+    format: { 
 +        delimiter: "/", //区切り文字 
 +        padZero: false  //ゼロ埋めするかどうか 
 +    }, 
 + 
 +    //祝日(またはその他のGoogleカレンー)のツールチッ表示 
 +    holidays: { 
 +        //同じ日に複数の祝日がある場合の区切り文字(改行可能なのはIEのみ) 
 +        delimiter: ",\n", 
 +        //祝日名の前に付ける文字列(カレンダーごとに設定可能) 
 +        prefixes: [""
 +    }
 + 
 +    //ポップアップ表示かどうか 
 +    isPopup: true
 }; };
 /** /**
   カレンダーを表示する   カレンダーを表示する
-  @param  String  inputId 入力要素のid or 年の入力要素のid +  @param  String  inputId     入力要素のid or 年の入力要素のid 
-  @param  String  monthId (optional) 月の入力要素のid +  @param  String  monthId     (optional) 月の入力要素のid 
-  @param  String  dateId  (optional) 日の入力要素のid+  @param  String  dateId      (optional) 日の入力要素のid 
 +  @param  String  insertId    (optional) カレンダーを表示したい場所の要素のid
   @return Boolean カレンダーの表示ができたかどうか   @return Boolean カレンダーの表示ができたかどうか
  */  */
-YahhoCal.render = function(inputId, monthId, dateId) {+YahhoCal.render = function(inputId, monthId, dateId, insertId) {
     if (!window.YAHOO || !YAHOO.widget.Calendar) {  //YUIを読み込んでいない場合     if (!window.YAHOO || !YAHOO.widget.Calendar) {  //YUIを読み込んでいない場合
         return false;         return false;
     }     }
-     + 
-    var currentId = (this.currentId dateId || inputId);   //入力要素を特定するID+    this._currentId (insertId = (insertId || inputId));   //表示場所を特定するID
  
     //アダプタを取得     //アダプタを取得
-    if (!this.adapters[currentId]) { +    this._adapters = (this._adapters || []); 
-        this.adapters[currentId] = this.createAdapter(inputId, monthId, dateId);+ 
 +    if (!this._adapters[insertId]) { 
 +        this._adapters[insertId] = this._createAdapter(inputId, monthId, dateId);
     }     }
-    var adapter = this.adapters[currentId]; 
  
-    var cal = this.cal;+    var cal = this._cal; 
     if (cal) {  //再表示の場合     if (cal) {  //再表示の場合
         cal.hide();         cal.hide();
-        YAHOO.util.Dom.insertAfter(this.placecurrentId);+        YAHOO.util.Dom.insertBefore(this._placeinsertId);
         cal.show();         cal.show();
     } else {    //初めて表示する場合     } else {    //初めて表示する場合
-        this.setStyle(); +        this._setStyle(); 
-        cal = (this.cal = this.createCalendar(currentId));+        cal = (this._cal = this._createCalendar(insertId));
     }     }
 +
 +    this._place.focus();    //IEでテキストボックスのマウスカーソルが見えるのを回避
  
     //入力済みの日付を取得     //入力済みの日付を取得
-    var val = adapter.getDate();+    var val = this._adapters[insertId].getDate();
     var y = val[0], m = val[1], d = val[2];     var y = val[0], m = val[1], d = val[2];
     var shown = new Date(y, m - 1, d);     var shown = new Date(y, m - 1, d);
  
-    //表示設定 
     var pagedate = "", selected = "";     var pagedate = "", selected = "";
 +
     if ((shown.getFullYear() == y && shown.getMonth() + 1 == m && shown.getDate() == d)) {     if ((shown.getFullYear() == y && shown.getMonth() + 1 == m && shown.getDate() == d)) {
         //日付として正しい場合         //日付として正しい場合
行 257: 行 312:
         shown = new Date();         shown = new Date();
     }     }
 +
     cal.cfg.setProperty("pagedate", pagedate);  //表示する年月     cal.cfg.setProperty("pagedate", pagedate);  //表示する年月
     cal.cfg.setProperty("selected", selected);  //選択状態の日付     cal.cfg.setProperty("selected", selected);  //選択状態の日付
行 262: 行 318:
     cal.render();     cal.render();
  
-    this.showHolidays(shown); +    this._showHolidays(shown); 
-    +
     //カレンダーの表示が終わってからクリックイベントの捕捉を始める     //カレンダーの表示が終わってからクリックイベントの捕捉を始める
     setTimeout(function() {     setTimeout(function() {
         YAHOO.util.Event.addListener(document, "click", YahhoCal.clickListener);         YAHOO.util.Event.addListener(document, "click", YahhoCal.clickListener);
     }, 1);     }, 1);
-    +
     return true;     return true;
 }; };
 /** /**
   入力要素とカレンダーとのポリモフィズムなアダプタを生成する   入力要素とカレンダーとのポリモフィズムなアダプタを生成する
 +  @param  String  inputId 入力要素のid or 年の入力要素のid
 +  @param  String  monthId 月の入力要素のid
 +  @param  String  dateId  日の入力要素のid
 +  @return Object  アダプタ
  */  */
-YahhoCal.createAdapter = function(inputId, monthId, dateId) {+YahhoCal._createAdapter = function(inputId, monthId, dateId) {
     var adapter = {};     var adapter = {};
  
-    if (!monthId) {     //テキストボックス1つの場合(YYYY/M/D) +    if (!monthId) {     //テキストボックス1つの場合 
-        var ymd = document.getElementById(inputId); +        var input = document.getElementById(inputId); 
-        adapter.getDate = function() { return ymd.value.split("/"); }; +        var delimiter = YahhoCal.format.delimiter; 
-        adapter.setDate = function(y, m, d) { ymd.value y + "/" + m "/" + d; };+ 
 +        adapter.getDate = function() { 
 +            if (delimiter) { 
 +                return input.value.split(delimiter); 
 +            else { 
 +                var val = input.value; 
 +                return [val.substr(0, 4), val.substr(4, 2), val.substr(6)]; 
 +            } 
 +        }; 
 + 
 +        adapter.setDate = function(y, m, d) { 
 +            if (YahhoCal.format.padZero) { 
 +                m ("0" + m).slice(-2); 
 +                d = ("0" + d).slice(-2); 
 +            } 
 + 
 +            input.value = y + delimiter + m + delimiter + d; 
 +        }; 
         return adapter;         return adapter;
     }     }
-    +
     //年・月・日が分かれている場合     //年・月・日が分かれている場合
     var ey = document.getElementById(inputId);     var ey = document.getElementById(inputId);
行 292: 行 370:
         adapter.getDate = function() { return [ey.value, em.value, ed.value]; };         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; };         adapter.setDate = function(y, m, d) { ey.value = y; em.value = m; ed.value = d; };
 +
         return adapter;         return adapter;
     }     }
-    +
     //選択リストの場合     //選択リストの場合
     var getNumber = function(opt) { return (opt.value || opt.text).replace(/^0+/, ""); };     var getNumber = function(opt) { return (opt.value || opt.text).replace(/^0+/, ""); };
行 306: 行 385:
         }         }
     };     };
 +
     adapter.getDate = function() { return [get(ey), get(em), get(ed)]; };     adapter.getDate = function() { return [get(ey), get(em), get(ed)]; };
     adapter.setDate = function(y, m, d) { set(ey, y); set(em, m); set(ed, d); };     adapter.setDate = function(y, m, d) { set(ey, y); set(em, m); set(ed, d); };
 +
     return adapter;     return adapter;
 }; };
行 313: 行 394:
   styleを設定する   styleを設定する
  */  */
-YahhoCal.setStyle = function() {+YahhoCal._setStyle = function() {
     var css = "";     var css = "";
 +
     for (var target in this.CAL_STYLE) {     for (var target in this.CAL_STYLE) {
         css += ".yui-skin-sam .yui-calcontainer .yui-calendar " + target;         css += ".yui-skin-sam .yui-calcontainer .yui-calendar " + target;
-        css += "{" + this.CAL_STYLE[target] + "}";+        css += "{" + this.CAL_STYLE[target] + "} ";
     }     }
-    +
     var tmp = document.createElement("div");     var tmp = document.createElement("div");
     tmp.innerHTML = 'dummy<style type="text/css">' + css + "</style>";     tmp.innerHTML = 'dummy<style type="text/css">' + css + "</style>";
行 327: 行 409:
 /** /**
   カレンダーを生成する   カレンダーを生成する
 +  @param  String  insertId
 +  @return Calendar
  */  */
-YahhoCal.createCalendar = function(insertId) { +YahhoCal._createCalendar = function(insertId) { 
-    var yDom = YAHOO.util.Dom; +    var yUtil = YAHOO.util, yDom = yUtil.Dom;   //ショートカット 
-    +
     //YUI skinを適用     //YUI skinを適用
     yDom.addClass(document.body, "yui-skin-sam");     yDom.addClass(document.body, "yui-skin-sam");
  
     //カレンダーの場所を作る     //カレンダーの場所を作る
-    var place = (this.place = document.createElement("div")); +    var place = (this._place = document.createElement("div"));
-    yDom.setStyle(place, "position", "absolute"); +
-    yDom.setStyle(place, "z-index", 1); +
-    yDom.insertAfter(place, insertId);+
  
-    //カレンダー生成+    if (this.isPopup) { 
 +        yDom.setStyle(place, "position", "absolute"); 
 +        yDom.setStyle(place, "z-index", 1); 
 +    } 
 + 
 +    yDom.insertBefore(place, insertId); 
 + 
 +    //カレンダー設定
     var config = this.YUI_CAL_CONFIG[this.locale];     var config = this.YUI_CAL_CONFIG[this.locale];
-    config.close = true;+    config.close = this.isPopup;
     config.hide_blank_weeks = true;     config.hide_blank_weeks = true;
 +
 +    //カレンダー生成
     var cal = new YAHOO.widget.Calendar(place, config);     var cal = new YAHOO.widget.Calendar(place, config);
  
行 349: 行 439:
     cal.selectEvent.subscribe(function(eventName, selectedDate) {     cal.selectEvent.subscribe(function(eventName, selectedDate) {
         var date = selectedDate[0][0];         var date = selectedDate[0][0];
-        YahhoCal.adapters[YahhoCal.currentId].setDate(date[0], date[1], date[2]); +        YahhoCal._adapters[YahhoCal._currentId].setDate(date[0], date[1], date[2]); 
-        cal.hide();+ 
 +        if (YahhoCal.isPopup) { 
 +            cal.hide(); 
 +        }
     });     });
  
     //月を移動した時のイベント     //月を移動した時のイベント
     cal.changePageEvent.subscribe(function() {     cal.changePageEvent.subscribe(function() {
-        YahhoCal.showHolidays(cal.cfg.getProperty("pagedate"));+        YahhoCal._showHolidays(cal.cfg.getProperty("pagedate"));
     });     });
  
     //閉じた時のイベント     //閉じた時のイベント
     cal.hideEvent.subscribe(function() {     cal.hideEvent.subscribe(function() {
-        YAHOO.util.Event.removeListener(document, "click", YahhoCal.clickListener);+        yUtil.Event.removeListener(document, "click", YahhoCal.clickListener);
     });     });
-    + 
 +    //Escキーでも閉じる 
 +    (new yUtil.KeyListener(document, { keys: 27 }, function() { cal.hide(); })).enable(); 
     return cal;     return cal;
 }; };
 /** /**
-  祝日を表示する+  祝日を表示する(要GCalendar Holidays) 
 +  @param  Date    target  表示対象の年月 
 +  @see    http://0-oo.net/sbox/javascript/google-calendar-holidays
  */  */
-YahhoCal.showHolidays = function(target) { +YahhoCal._showHolidays = function(target) { 
-    if (!window.GCalHolidays) {     //GCalHolidays.jsを読み込んでいない場合+    if (!window.GCalHolidays) {     //GCalendar Holidaysを読み込んでいない場合
         return;         return;
     }     }
 +
 +    //CallbackでsetHolidays()が呼ばれる
     GCalHolidays.get(this.setHolidays, target.getFullYear(), target.getMonth() + 1);     GCalHolidays.get(this.setHolidays, target.getFullYear(), target.getMonth() + 1);
 }; };
 /** /**
   祝日表示を設定する   祝日表示を設定する
 +  @param  Array   holidays    祝日情報
 +  @param  Number  calIdIndex  GCalHolidays.userIds内の何番目かを示す数
  */  */
-YahhoCal.setHolidays = function(holidays) {+YahhoCal.setHolidays = function(holidays, calIdIndex) {
     if (holidays.length === 0) {     if (holidays.length === 0) {
         return;         return;
     }     }
-     + 
-    var yDom = YAHOO.util.Dom;+    var getEBCN = YAHOO.util.Dom.getElementsByClassName   //ショートカット
          
     //取得した年月をまだ表示しているかチェック     //取得した年月をまだ表示しているかチェック
     var first = holidays[0];     var first = holidays[0];
-    var table = yDom.getElementsByClassName("y" + first.year, "table", this.place)[0]; +    var table = getEBCN("y" + first.year, "table", this._place)[0]; 
-    var tbody = yDom.getElementsByClassName("m" + first.month, "tbody", table)[0];+    var tbody = getEBCN("m" + first.month, "tbody", table)[0]; 
     if (!table || !tbody) {     if (!table || !tbody) {
         return;         return;
     }     }
  
-    //祝日設定 +    //祝日をツールチップで表示 
-    for (var i in holidays) { +    var prefix = (YahhoCal.holidays.prefixes[calIdIndex] || ""); 
-        var = holidays[i]+ 
-        var td = yDom.getElementsByClassName("d"h.date, "td", tbody)[0]; +    for (var i = 0, len = holidays.length; < leni++) { 
-        yDom.addClass(td, "holiday"); +        var td = getEBCN("d"holidays[i].date, "td", tbody)[0]; 
-        td.title = h.title;     //マウスオーバーで祝日名を表示+        YAHOO.util.Dom.addClass(td, "holiday" + calIdIndex); 
 + 
 +        if (td.title) { 
 +            td.title +YahhoCal.holidays.delimiter; 
 +        } 
 + 
 +        td.title += prefix + holidays[i].title;
     }     }
 }; };
 /** /**
   カレンダーの外をクリックされたらカレンダーを閉じる   カレンダーの外をクリックされたらカレンダーを閉じる
 +  @param  Object  clickedPoint    クリックされた位置
  */  */
 YahhoCal.clickListener = function(clickedPoint) { YahhoCal.clickListener = function(clickedPoint) {
 +    if (!YahhoCal.isPopup) {
 +        return;
 +    }
 +
     var xy = YAHOO.util.Event.getXY(clickedPoint);     var xy = YAHOO.util.Event.getXY(clickedPoint);
     var x = xy[0], y = xy[1];     var x = xy[0], y = xy[1];
-    var r = YAHOO.util.Dom.getRegion(YahhoCal.cal.containerId);+    var r = YAHOO.util.Dom.getRegion(YahhoCal._cal.containerId); 
     if (x < r.left || x > r.right || y < r.top || y > r.bottom) {     if (x < r.left || x > r.right || y < r.top || y > r.bottom) {
-        YahhoCal.cal.hide();+        YahhoCal._cal.hide();
     }     }
 }; };
 /** /**
   必要なYUIのJavaScriptとCSSを読み込む   必要なYUIのJavaScriptとCSSを読み込む
-  @param  String  yuiBase (optional) YUIのベースとなるURL+  @param  String      yuiBase     (optional) YUIのベースとなるURL 
 +  @param  Function    callback    (optional) 読み込み完了時に実行する関数 
 +  @see http://developer.yahoo.com/yui/yuiloader/
  */  */
-YahhoCal.loadYUI = function(yuiBase) { +YahhoCal.loadYUI = function(yuiBase, callback) { 
-    if (!yuiBase) { +    yuiBase yuiBase || this.YUI_URL.SERVER + this.YUI_URL.VERSION + this.YUI_URL.DIR;
-        yuiBase this.YUI_URL.SERVER + this.YUI_URL.VERSION + this.YUI_URL.DIR; +
-    }+
  
     //YUI Loaderをload     //YUI Loaderをload
行 425: 行 540:
     script.src = yuiBase + "yuiloader-dom-event/yuiloader-dom-event.js";     script.src = yuiBase + "yuiloader-dom-event/yuiloader-dom-event.js";
     document.getElementsByTagName("head")[0].appendChild(script);     document.getElementsByTagName("head")[0].appendChild(script);
-     +
-    //YUI Loaderがloadされるまで待つ+
     var limit = 5000, interval = 50, time = 0;     var limit = 5000, interval = 50, time = 0;
-    var loadedId = setInterval(function(){ + 
-        if (window.YAHOO) { +    var intervalId = setInterval(function() { 
-            clearInterval(loadedId); +        if (window.YAHOO) { //YUI Loaderがloadされたら 
-            //YUI Calendarをload +            clearInterval(intervalId); 
-            (new YAHOO.util.YUILoader({ base: yuiBase, require: ["calendar"] })).insert();+ 
 +            (new YAHOO.util.YUILoader({ //YUI Calendarをload 
 +                base: yuiBase, 
 +                require: ["calendar"]
 +                onSuccess: callback || null 
 +            })).insert();
         } else if ((time += interval) > limit) {    //タイムアウト         } else if ((time += interval) > limit) {    //タイムアウト
-            clearInterval(loadedId);+            clearInterval(intervalId);
         }         }
     }, interval);     }, interval);
行 446: 行 565:
 /** /**
   選択可能な最初の日を指定する   選択可能な最初の日を指定する
-  @param  integer y   西暦4桁 +  @param  Number  y   西暦4桁 
-  @param  integer m   1~12月 +  @param  Number  m   1~12月 
-  @param  integer d+  @param  Number  d
  */  */
 YahhoCal.setMinDate = function(y, m, d) { YahhoCal.setMinDate = function(y, m, d) {
     var date = m + "/" + d + "/" + y;     var date = m + "/" + d + "/" + y;
-    if (this.cal) { + 
-        this.cal.configMinDate(null, [date]);+    if (this._cal) { 
 +        this._cal.configMinDate(null, [date]);
     } else {     } else {
         this.YUI_CAL_CONFIG[this.locale].mindate = date;         this.YUI_CAL_CONFIG[this.locale].mindate = date;
行 460: 行 580:
 /** /**
   選択可能な最後の日を指定する   選択可能な最後の日を指定する
-  @param  integer y   西暦4桁 +  @param  Number  y   西暦4桁 
-  @param  integer m   1~12月 +  @param  Number  m   1~12月 
-  @param  integer d+  @param  Number  d
  */  */
 YahhoCal.setMaxDate = function(y, m, d) { YahhoCal.setMaxDate = function(y, m, d) {
     var date = m + "/" + d + "/" + y;     var date = m + "/" + d + "/" + y;
-    if (this.cal) { + 
-        this.cal.configMaxDate(null, [date]);+    if (this._cal) { 
 +        this._cal.configMaxDate(null, [date]);
     } else {     } else {
         this.YUI_CAL_CONFIG[this.locale].maxdate = date;         this.YUI_CAL_CONFIG[this.locale].maxdate = date;
javascript/yahho-calendar.1239973125.txt.gz · 最終更新: 2009/04/17 21:58 by dgbadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki