ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール


javascript:yahho-calendar

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
javascript:yahho-calendar [2010/05/14 06:48] – ダウンロード元変更 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|GCalendar Holidays]]を使うと祝日の表示もできます。\\+ 
 +カレンダーは[[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/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/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版の場合あり
行 23: 行 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|GCalendar Holidaysのライセンス]])+また、祝日を表示する場合は[[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.googlecode.com/svn/yahho-calendar.js|yahho-calendar.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-)\\
行 89: 行 93:
   * 概要   * 概要
     * 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]] 
   * パラメータ   * パラメータ
     * yuiBase : 省略可。省略すると、GoogleのサーバからYUIをロードする。自分のサーバからYUIをロードする場合、YUIへのURLのベースとなる部分を渡す     * yuiBase : 省略可。省略すると、GoogleのサーバからYUIをロードする。自分のサーバからYUIをロードする場合、YUIへのURLのベースとなる部分を渡す
行 149: 行 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.4 +  @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)
  *  *
行 164: 行 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/en/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.8.0r4",+        VERSION: "2",   //2.x系の最新を使う
         DIR: "/build/"         DIR: "/build/"
     },     },
行 180: 行 183:
         //土曜日         //土曜日
         "td.wd6 a": "background-color: #cff",         "td.wd6 a": "background-color: #cff",
-        //祝日(要 GCalHolidays.js+        //祝日(要 GCalendar Holidays
         "td.holiday0 a": "background-color: #f9f",         "td.holiday0 a": "background-color: #f9f",
         //今日(デフォルトではa要素の周り1pxに背景色が見えるので黒い枠線になる)         //今日(デフォルトではa要素の周り1pxに背景色が見えるので黒い枠線になる)
行 217: 行 220:
             ]             ]
         },         },
-        //中国語+        //中国語(繁体字も簡体字も同じ)
         zh: {         zh: {
             my_label_year_position: 1,             my_label_year_position: 1,
行 277: 行 280:
     //アダプタを取得     //アダプタを取得
     this._adapters = (this._adapters || []);     this._adapters = (this._adapters || []);
 +
     if (!this._adapters[insertId]) {     if (!this._adapters[insertId]) {
         this._adapters[insertId] = this._createAdapter(inputId, monthId, dateId);         this._adapters[insertId] = this._createAdapter(inputId, monthId, dateId);
     }     }
-    var adapter = this._adapters[insertId]; 
  
     var cal = this._cal;     var cal = this._cal;
 +
     if (cal) {  //再表示の場合     if (cal) {  //再表示の場合
         cal.hide();         cal.hide();
行 291: 行 295:
         cal = (this._cal = this._createCalendar(insertId));         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)) {
         //日付として正しい場合         //日付として正しい場合
行 306: 行 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);  //選択状態の日付
行 312: 行 319:
  
     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;
 }; };
行 331: 行 338:
  
     if (!monthId) {     //テキストボックス1つの場合     if (!monthId) {     //テキストボックス1つの場合
-        var ymd = document.getElementById(inputId);+        var input = document.getElementById(inputId);
         var delimiter = YahhoCal.format.delimiter;         var delimiter = YahhoCal.format.delimiter;
 +
         adapter.getDate = function() {         adapter.getDate = function() {
             if (delimiter) {             if (delimiter) {
-                return ymd.value.split(delimiter);+                return input.value.split(delimiter);
             } else {             } else {
-                var val = ymd.value;+                var val = input.value;
                 return [val.substr(0, 4), val.substr(4, 2), val.substr(6)];                 return [val.substr(0, 4), val.substr(4, 2), val.substr(6)];
             }             }
         };         };
 +
         adapter.setDate = function(y, m, d) {         adapter.setDate = function(y, m, d) {
             if (YahhoCal.format.padZero) {             if (YahhoCal.format.padZero) {
行 346: 行 355:
                 d = ("0" + d).slice(-2);                 d = ("0" + d).slice(-2);
             }             }
-            ymd.value = y + delimiter + m + delimiter + d;+ 
 +            input.value = y + delimiter + m + delimiter + d;
         };         };
 +
         return adapter;         return adapter;
     }     }
行 359: 行 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+/, ""); };
行 373: 行 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;
 }; };
行 382: 行 396:
 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] + "} ";
     }     }
  
行 398: 行 413:
  */  */
 YahhoCal._createCalendar = function(insertId) { YahhoCal._createCalendar = function(insertId) {
-    var yDom = YAHOO.util.Dom;+    var yUtil = YAHOO.util, yDom = yUtil.Dom;   //ショートカット
  
     //YUI skinを適用     //YUI skinを適用
行 405: 行 420:
     //カレンダーの場所を作る     //カレンダーの場所を作る
     var place = (this._place = document.createElement("div"));     var place = (this._place = document.createElement("div"));
 +
     if (this.isPopup) {     if (this.isPopup) {
         yDom.setStyle(place, "position", "absolute");         yDom.setStyle(place, "position", "absolute");
         yDom.setStyle(place, "z-index", 1);         yDom.setStyle(place, "z-index", 1);
     }     }
 +
     yDom.insertBefore(place, insertId);     yDom.insertBefore(place, insertId);
  
-    //カレンダー生成+    //カレンダー設定
     var config = this.YUI_CAL_CONFIG[this.locale];     var config = this.YUI_CAL_CONFIG[this.locale];
     config.close = this.isPopup;     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);
  
行 421: 行 440:
         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]);
 +
         if (YahhoCal.isPopup) {         if (YahhoCal.isPopup) {
             cal.hide();             cal.hide();
行 433: 行 453:
     //閉じた時のイベント     //閉じた時のイベント
     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;
 }; };
 /** /**
-  祝日を表示する(要GCalHolidays.js+  祝日を表示する(要GCalendar Holidays
   @param  Date    target  表示対象の年月   @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()が呼ばれる     //CallbackでsetHolidays()が呼ばれる
     GCalHolidays.get(this.setHolidays, target.getFullYear(), target.getMonth() + 1);     GCalHolidays.get(this.setHolidays, target.getFullYear(), target.getMonth() + 1);
行 459: 行 484:
     }     }
  
-    var getEBCN = YAHOO.util.Dom.getElementsByClassName;+    var getEBCN = YAHOO.util.Dom.getElementsByClassName;    //ショートカット
          
     //取得した年月をまだ表示しているかチェック     //取得した年月をまだ表示しているかチェック
行 465: 行 490:
     var table = getEBCN("y" + first.year, "table", this._place)[0];     var table = getEBCN("y" + first.year, "table", this._place)[0];
     var tbody = getEBCN("m" + first.month, "tbody", table)[0];     var tbody = getEBCN("m" + first.month, "tbody", table)[0];
 +
     if (!table || !tbody) {     if (!table || !tbody) {
         return;         return;
行 471: 行 497:
     //祝日をツールチップで表示     //祝日をツールチップで表示
     var prefix = (YahhoCal.holidays.prefixes[calIdIndex] || "");     var prefix = (YahhoCal.holidays.prefixes[calIdIndex] || "");
 +
     for (var i = 0, len = holidays.length; i < len; i++) {     for (var i = 0, len = holidays.length; i < len; i++) {
         var td = getEBCN("d" + holidays[i].date, "td", tbody)[0];         var td = getEBCN("d" + holidays[i].date, "td", tbody)[0];
         YAHOO.util.Dom.addClass(td, "holiday" + calIdIndex);         YAHOO.util.Dom.addClass(td, "holiday" + calIdIndex);
 +
         if (td.title) {         if (td.title) {
             td.title += YahhoCal.holidays.delimiter;             td.title += YahhoCal.holidays.delimiter;
         }         }
 +
         td.title += prefix + holidays[i].title;         td.title += prefix + holidays[i].title;
     }     }
行 488: 行 517:
         return;         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();
行 502: 行 533:
  */  */
 YahhoCal.loadYUI = function(yuiBase, callback) { 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+
-    } +
- +
-    var options = { base: yuiBase, require: ["calendar"], onSuccess: callback || null };+
  
     //YUI Loaderをload     //YUI Loaderをload
行 514: 行 541:
     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 intervalId = setInterval(function(){ + 
-        if (window.YAHOO) {+    var intervalId = setInterval(function() { 
 +        if (window.YAHOO) { //YUI Loaderがloadされたら
             clearInterval(intervalId);             clearInterval(intervalId);
-            //YUI Calendarをload + 
-            (new YAHOO.util.YUILoader(options)).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(intervalId);             clearInterval(intervalId);
行 540: 行 571:
 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) {     if (this._cal) {
         this._cal.configMinDate(null, [date]);         this._cal.configMinDate(null, [date]);
行 554: 行 586:
 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) {     if (this._cal) {
         this._cal.configMaxDate(null, [date]);         this._cal.configMaxDate(null, [date]);
javascript/yahho-calendar.1273787320.txt.gz · 最終更新: 2010/05/14 06:48 by dgbadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki