ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール


javascript:yahho-calendar

文書の過去の版を表示しています。


YUIのJavaScriptカレンダーを日本語化&ポップアップ対応&祝日も表示 - Yahho Calendar

コメントと更新履歴の参照はゼロと無限の間のログ » Yahho Calendarでどうぞ。

YUIカレンダーを日本語化してポップアップ対応にしたJavaScriptカレンダーです。別Windowで開くのではなく、JavaScriptでページ上に表示します。
合わせてGCalHolidaysを使うと祝日の表示もできます。

Yahoo!の日本版ということでヤッホーという名前にしました。(昔、Yahho!てサイトありましたね。)

サンプル

Yahho Calendarのサンプル

※サンプルで使っているのは最新のBeta版の場合あり

ライセンス

Yahho CalendarはMITライセンスで。
内部的に使っているYUI(Yahoo! UI Library)はBSDライセンスです。
YahhoCal.loadYUI()を使うと、デフォルトではGoogleによってホスティングされているYUIのファイルがロードされます。これを使う場合はGoogle AJAX Libraries APIの利用規約もご確認ください。)
また、祝日を表示する場合はGoogleカレンダーの利用規約もご確認ください。(参考:GCalHolidaysのライセンス

ダウンロード

YahhoCal.js

YahhoCal.css バージョン0.3.0からCSSは不要(JavaScript内で設定)になりました。8-)

また、祝日を表示する場合はGCalHolidays.jsも必要です。

※ダウンロードのリンク先が最新のBeta版の場合あり

Yahho Calendarの使い方の例

  1. まずは、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>
  2. 次に、YUIのJavaScriptとCSSをロードします。
    <script type="text/javascript">
    YahhoCal.loadYUI(); //Googleのサーバから読み込む場合
     
    //YahhoCal.loadYUI("/path/to/your/yui/dir/"); //自分のサーバから読み込む場合。パスは環境に合わせて変更してください
    </script>
  3. あとは、onClickやonFocusなどのトリガーからYahhoCal.render()を呼べば、カレンダーを表示できます。パラメータとして、日付を入力する要素のid属性を渡してください。
    • 例1:日付をテキストボックス1つに入力する場合の例。(日付の表示形式は“yyyy/m/d”です。)
      <input type="text" id="inputId" name="inputDate" onclick="YahhoCal.render(this.id);" />
    • 例2:日付をテキストボックス3つ(年・月・日)に入力する場合の例。
      <input type="text" id="inputY" name="y" /><input type="text" id="inputM" name="m" /><input type="text" id="inputD" name="d" /><input type="button" value="カレンダーを表示する" onclick="YahhoCal.render('inputY', 'inputM', 'inputD');" />
    • 例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)

  • 概要
  • パラメータ
    • 省略可。省略すると、米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: "&#xb144; ",
            my_label_month_suffix: "&#xc6d4;",
            months_long: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
            weekdays_short: ["&#xc77c;", "&#xc6d4;", "&#xd654;", "&#xc218;", "&#xbaa9;",
                             "&#xae08;", "&#xd1a0;"]
        },
        //中国語
        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

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki