JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年04月 / 03月<< 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 >>05月

アクセスランキング

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

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

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    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

この記事へのトラックバック:

プロフィール

JDB Luigi

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

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