JavaScript【 サンプル 】11 ~ カレンダー

colmun_main8955

JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript を使用してカレンダーを表示させるサンプルを紹介します。

目次

 
1.カレンダー
2.祝日処理

1.カレンダー

 
ページを開いた時点の当月カレンダーを表示します。

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--

window.onload = function() {

    // ***********************	
    //  データの取得	
    // ***********************

    // システム日付データ取得
    var wkDate = new Date();
    // 曜日テーブル定義
    var wkWeekTbl = new Array("日","月","火","水","木","金","土");
    // 月テーブル定義
    var wkMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);
    // 年を取得
    var wkYear = wkDate.getFullYear();
    //うるう年処理
    if (((wkYear%4)==0 && (wkYear%100)!=0) || (wkYear%400)==0){
        wkMonthTbl[1] = 29;
    }

    // 月を取得( 0 ~ 11 )
    var wkMonth = wkDate.getMonth();
    // 今日の日付を取得
    var wkToday = wkDate.getDate();
    // 日付を 1 日にセット
    wkDate.setDate(1);
    // 1 日の曜日を取得
    var wkWeek = wkDate.getDay();
    // カレンダーの行数
    var wkTblLine = Math.ceil((wkWeek+wkMonthTbl[wkMonth])/7);
    // 表のセル数分の配列を定義
    var wkTable = new Array(7*wkTblLine);
    // wkTableに空白をセット( 第1週と最終週の空白セル対策 )
    for(i=0; i<*wkTblLine; i++) wkTable[i]=" ";
    // wkTableに日付をセット
    for(i=0; i<wkMonthTbl[wkMonth]; i++)wkTable[i+wkWeek]=i+1;


    // ***********************	
    // カレンダーの表示
    // ***********************	
 
    // カレンダーの年月表示
    document.getElementById("dat").innerHTML = wkYear + "年" + (wkMonth+1) + "月";	

    var str;
    // 表の開始
    str = "\<table border='1'\>";

    // 曜日見出し
    str += "\<tr\>";

    // 曜日見出し( 1 週間 1 行のみループ )
    for(i=0; i<7; i++){
        str += "\<td align='center' ";
        // (日)のセルの色
        if(i==0) str += "bgcolor='salmon'>";
        // (土)のセルの色
        else if(i==6) str += "bgcolor='lightskyblue'>";
        // (月)~(金)のセルの色
        else str += "bgcolor='palegreen'>";
        // 曜日の表示
        str += "\<strong\>";
        str += wkWeekTbl[i];
        str += "\</strong\>";
        str += "\</td\>";	
    }	
    str += "\</tr\>";	
 	
    // 日付( 1 週間毎にループ )
    for(i=0; i<wkTblLine; i++){
        // 行の開始
        str += "\<tr\>";
        // 列のループ
        for(j=0; j<7; j++){
            // 列の開始
            str += "\<td align='center' ";
            // 日付取得
            wkDat = wkTable[j+(i*7)];
            // 今日のセルの色
            if (wkDat==wkToday) str += "bgcolor='plum'>";
            // (日)のセルの色
            else if(j==0) str += "bgcolor='mistyrose'>";
            // (土)のセルの色
            else if(j==6) str += "bgcolor='lavender'>";
            // (月)~(金)のセルの色
            else str += "bgcolor='whitesmoke'>";
            // 日付セット
            str += wkDat;
            // 列の終了
            str += "\</td\>";
        }
        // 行の終了
        str += "\</tr\>"
    }

    // 表の終了
    str += "\</table\>";

    // 表示場所へ出力
    document.getElementById("dat").innerHTML += str;
}

//-->
</script>

<div style="background-color : #CCC; padding : 10px 20px 1px;">
    <div id="dat"></div>
</div>

 
カレンダーの内容をテーブル構造にして 文字列変数 str に格納しています。
HTMLのタブで使用する「 < 」と「 > 」の前にバックスラッシュ「 / 」を付けてエスケープしています。

▲目次へ戻る

 

2.祝日処理

 
祝日には規則性のようなものがないため、カレンダーに祝日を組み込む場合は、祝日処理のための関数を定義する必要があります。

次のような順序で条件分岐を行い、ある日付が祝日かどうかを判定する関数を作成します。

1.固定祝日に該当するかどうかを判定
2.ハッピーマンデーの祝日に該当するかどうかを判定
3.春分の日と秋分の日に該当するかどうかを判定
4.振替休日に該当するかどうかを判定
5.国民の休日に該当するかどうかを判定

ソースコードで記述すると、次のようになります。

// ***********************	
// 変数設定
// ***********************	

// 祝日名
var holidayName;

// システム日付データ
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var weekday = date.getDay();

// 固定祝日
var fixHolidayList = [
    {"name": "元日", "mon": 1, "day": 1},
    {"name": "建国記念の日", "mon": 2, "day": 11},
    {"name": "昭和の日", "mon": 4, "day": 29},
    {"name": "憲法記念日", "mon": 5, "day": 3},
    {"name": "みどりの日", "mon": 5, "day": 4},
    {"name": "こどもの日", "mon": 5, "day": 5},
    {"name": "山の日", "mon": 8, "day": 11},
    {"name": "文化の日", "mon": 11, "day": 3},
    {"name": "勤労感謝の日", "mon": 11, "day": 23},
    {"name": "天皇誕生日", "mon": 12, "day": 23}
];

// ハッピーマンデー
var happyMondayList = [
    {"name": "成人の日", "mon": 1, "weekNum": 2},
    {"name": "海の日", "mon": 7, "weekNum": 3},
    {"name": "敬老の日", "mon": 9, "weekNum": 3},
    {"name": "体育の日", "mon": 10, "weekNum": 2}
];


// ***********************	
// 祝日判定
// (返り値:祝日名 or 空文字)
// ***********************	

unction getHolidayName(date) {

    // 祝日取得
    if (_getHolidayName(date) !== "") {
        return holidayName;
    }


    // 振替休日取得
    var wkDate = date.getTime();
    // 前日
    var preDate = new Date(wkDate);
    preDate.setDate(date.getDate() - 1);
    // 前日(ループ処理で使用)
    var preDateLoop = new Date(wkDate);
    preDateLoop.setDate(date.getDate() - 1);

    // 前日が(日)かつ祝日の場合に振替休日設定
    while (true) {
        if (_getHolidayName(preDateLoop) == "") {
            // 前日が祝日でない場合は終了
            break;
        }
        if (preDateLoop.getDay() == 0) {
            // 前日が日曜の場合は終了
            holidayName = "振替休日";
            break;
        }
        preDateLoop.setDate(preDateLoop.getDate() - 1);
    }
    if (holidayName !== "") {
        return holidayName;
    }


    // 国民の休日(前後が国民の祝日である平日)取得

    // 次の日
    var nextDate = new Date(wkDate);
    nextDate.setDate(date.getDate() + 1);

    if (_getHolidayName(preDate) !== ""
        && _getHolidayName(nextDate) !== ""
        && weekday >= 2
        && weekday <= 6) {

        holidayName = "国民の休日";
    }

    return holidayName;
}


// **************************	
// 祝日取得
// (返り値:祝日名 or 空文字)
// **************************	

function _getHolidayName(date) {

    // 週数
    var weekNum = null;
    if (day % 7 == 0) {
        weekNum = day / 7;
    } else {
        weekNum = parseInt(day / 7, 10) + 1;
    }

    // 固定祝日
    fixHolidayList.forEach(function (object) {
        if (month == object.mon && day == object.day) {
            holidayName = object.name;
        }
    });
    if (holidayName !== "") {
        return holidayName;
    }

    // ハッピーマンデー
    happyMondayList.forEach(function (object) {
        // (月)以外は終了
        if (weekday !== 1) {
            return;
        }
        if (month == object.mon && weekNum == object.weekNum) {
            holidayName = object.name;
        }
    });
    if (holidayName !== "") {
        return holidayName;
    }

    // 春分の日・秋分の日
    if (month == 3) {
        if (day == parseInt(20.8431 + 0.242194 * ( year - 1980), 10) - parseInt((year - 1980) / 4, 10)) {
            holidayName = "春分の日";
        }
    }
    if (month == 9) {
        if (day == parseInt(23.2488 + 0.242194 * ( year - 1980), 10) - parseInt((year - 1980) / 4, 10)) {
            holidayName = "秋分の日";
        }
    }

    return holidayName;
}

 
祝日を 変数 fixHolidayList( 固定祝日 )と happyMondayList( ハッピーマンデー )に格納しているので、新しく祝日が制定された場合は、該当する変数に追加設定します。

また、上のサンプルは 現時点での祝日を取得していますが、過去のカレンダーにも対応するためには、祝日の開始年と終了年の確認などが必要です。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です