JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2013年05月 / 04月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>06月

アクセスランキング

[ジャンルランキング]
コンピュータ
394位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
44位
アクセスランキングを見る>>

JavaScriptで簡易カレンダーを作ってみた

久々に技術系の記事です。

今制作しているWEBアプリで簡単なカレンダーが必要になったのですが、閏年の計算やら年ごとの曜日の移動やら処理が面倒だなあと考えていたところ、すべてJavaScript標準の機能で実装できるということに気づき、思ったよりシンプルに書くことができたので公開しておきます。
(表示は表を利用しています)

簡易カレンダー

var createCalendar = function(elem,isMonStart){
    //elem 対象のテーブル(tbody)
    //isMonStart 月曜日スタートか(指定がない場合日曜日スタート)
    
    var c,i,j,curRow,fstDay,eTd;
    var nDObj = new Date();
    var calTbl = elem;
    
    //今月 - 1
    var nMon = nDObj.getMonth();
    
    //今日
    var nDate = nDObj.getDate();
    
    //今月は何日まで?(閏年・2月なら28日まで)
    for(c=28;(new Date(nDObj.getFullYear(),nMon,c)).getMonth() == nMon;c++);
    
    //今月の1日の曜日
    fstDay = (new Date(nDObj.getFullYear(),nMon,1)).getDay();
    j = isMonStart ? (fstDay - 1 < 0 ? 6 : fstDay - 1) : fstDay;
    
    //セル挿入用のメソッド
    calTbl.createCell = function(value){
        var td = curRow.insertCell(-1);
        td.innerHTML = value;
        return td;
    }
    
    curRow = calTbl.insertRow(-1);
    for(i=1;i<=j;i++){
        calTbl.createCell("&nbsp;");
    }
    
    for(i=1;i<c;i++){
        if (j > 6){
            j = 0;
            curRow = calTbl.insertRow(-1);
        }
        eTd = calTbl.createCell(i);
        
        if (i == nDate){
            //今日は太字
            eTd.style.fontWeight = "bold";
        }
        
        switch(j){
            case (isMonStart ? 6 : 0):
                //日曜は赤字
                eTd.style.color = "#f00";
                break;
            case (isMonStart ? 5 : 6):
                //土曜は青字
                eTd.style.color = "#00f";
                break;
        }
        
        j++;
    }
}

window.onload = function(){
    createCalendar(document.getElementById("cal_table"),true);
    createCalendar(document.getElementById("cal_table2"),false);
}



カレンダーの表示等は一部のブラウザではまだ実装されていませんが、このようなシンプルなものでも、あると便利ですね。
スポンサーサイト
   JavaScript    TB(0)    CM(0)    EDIT    ページ↑

Picture of the day: 法事と観光


3日からの五日間、九州へ法事と観光に行ってきました。
祖母の三回忌です。

熊本では有名らしい
P5030266_R130506.jpg

親戚宅の近所の猫
P5050284_R130506.jpg

今年も阿蘇山へ行きました。正式には阿蘇五岳というそうです。
P5050292_R130506.jpg

去年は風向きの関係で見ることができなかった火口(第一火口)も、今年は見ることができました。
P5050302_stitch_sq_R130506.jpg

P5050298_R130506.jpg

フェリーから見た夕景
P5050340_R130506.jpg

高速道路で名古屋へ向かう途中、法隆寺に寄ってみようという話になり…
P5060344_R130506.jpg

五重の塔
P5060353_R130506.jpg

奈良公園の鹿
P5060382_R130506.jpg


一か月ぶりの更新ですね…
また技術系の記事を書いていこうと思います。

   Photo    TB(0)    CM(1)    EDIT    ページ↑

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。