JavaScript
jQuery
カレンダー

jQueryでカレンダーを作ってみた

More than 1 year has passed since last update.

完成イメージ

スクリーンショット (5)(1).png

フォルダ構成

calendar
 |ー calendar.html
 |
 |ー js
 | |ーcalendar.js
 |
 |ーcss
   |-calendar.css

GitHubに公開しました。
Calendar : https://github.com/NakajimaShunsuke/calendar

ファイルの詳細

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- calendar.css読み込み -->
    <link rel="stylesheet" href="./css/calendar.css">
    <!-- jquery1.7.1 を読み込む -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- calendar.js読み込み -->
    <script type="text/javascript" src="./js/calendar.js"></script>

    <title>カレンダー</title>

</head>
<body  style="background-color: #f8f8f8;">

    <!-- メインコンテンツ -->
    <div class="ui main text container">
        <h1>スケジュール</h1>

        <div id="calendar">
        </div>

        <div style="margin-top: 20px;">
            <button class="buck" type="button"></button>
            <button class="next" type="button"></button>
        </div>

    </div><!-- メインコンテンツ閉じ -->

</body>
<script type="text/javascript">
    $(function(){
        var myDate = new Date();
        var myYear = myDate.getFullYear();  // 年を取得    
        var MyMonth = myDate.getMonth();    // 月を取得(0月~11月)
        setCalender(myYear,MyMonth);

        $('.next').click(function(){

            MyMonth++;
            if(MyMonth == 12){
                MyMonth = 0;
                myYear++;
            }
            $('#calendar').empty();
            $('#calendar').text(setCalender(myYear,MyMonth));
        });

        $('.buck').click(function(){

            MyMonth--;
            if(MyMonth == -1){
                MyMonth = 11;
                myYear--;
            }
            $('#calendar').empty();
            $('#calendar').text(setCalender(myYear,MyMonth));
        });
    });
</script>
</html>

こちらで書いてある”style”は消しても影響がないものになります。
またカレンダーの描画は「calendar.js」で行っています。
jQueryはver1.7.1を使用
最初の描画は現在の日付になっています。
"next"ボタンを押下でカレンダーをめくる
"buck"ボタンを押下で戻る

JS

function setCalender(y,l){
    'use strict';
    var myDate = new Date();
    var myToday = myDate.getDate(); // 今日の'日'を退避
    var todayMyMonth = myDate.getMonth();   // 月を取得(0月~11月)
    var $calendar = $('#calendar');
    var myWeekTbl = new Array('月','火','水','木','金','土','日');   // 曜日テーブル定義
    var myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31); // 月テーブル定義
    var myYear = y;
    myDate = new Date(myYear,l);    // 今日の日付データ取得

    ((myYear % 4)===0 && (myYear % 100) !==0) || (myYear % 400)===0 ? myMonthTbl[1] = 29: 28;   // うるう年だったら...
    // 2月を29日とする
    var myMonth = myDate.getMonth();    // 月を取得(0月~11月)
    myDate.setDate(1);  // 日付を'1日'に変えて、
    var myWeek = myDate.getDay() - 1;   // '1日'の曜日を取得
    var myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7);  // カレンダーの行数
    var myTable = new Array(7*myTblLine);   // 表のセル数を用意
    for(var i=0; i<7*myTblLine; i++){
        myTable[i]=' '; // セルを全て空にする
    }
    for(i=0; i<myMonthTbl[myMonth]; i++){
       myTable[i+myWeek]=i+1;   // 日付を埋め込む
    }

    var source = '';
    var td = '<td>';
    var tdC = '</td>';
    var tr = '<tr>';
    var trC = '</tr>';

    for(i=0; i<myTblLine; i++){ // 表の「行」のループ
        source += tr;
        for (var j = 0; j < 7; j++) {
            var mydat = myTable[j+(i*7)];
            if(todayMyMonth === myMonth && mydat === myToday){
                source += '<td class="today">' + mydat + tdC;
            }else if(j === 5){
                source += '<td class="sat">' + mydat + tdC;
            }else if(j === 6){
                source += '<td class="sun">' + mydat + tdC;
            }else{
                source += td + mydat + tdC;
            }
        }
        source += trC;
    }
    var week = '';
    for(var k=0; k<7; k++){ // 曜日
        if(k === 5){
            week += '<td class="sat">' + myWeekTbl[k] + tdC;
        }else if(k === 6){
            week += '<td class="sun">' + myWeekTbl[k] + tdC;
        }else{
            week += td + myWeekTbl[k] + tdC;
        }
    }
    var weekTr = tr + week + trC;
    var tableSource = '<table>' +
        '<tr><td colspan="7">' +
            myYear + '年' + (myMonth+1) + '月' +
            '</td></tr>' + weekTr + source + '</table>';

    $calendar.append(tableSource);  // 表の作成開始
}


カレンダーのプログラムは
2017年カレンダーをJavascriptで生成の記事と
イヌでもわかるJavaScript講座 - カレンダーの記事
を参考にさせてもらいました。
引き数に描画したい年と月を渡しています。

CSS

#calendar:after {
    clear: both;
    display: block;
    content: "";
}
#calendar table {
    border-collapse: collapse;
    text-align: center;
    width: 100%;
    line-height: 1.5;
    float: left;
    margin: 10px 10px 0 0;
}
#calendar thead {
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    background: #04162e;
}
#calendar thead th {
    padding: 10px;
    font-weight: bold;
    vertical-align: top;
    color: #fff;
}
#calendar tbody th {
    width: 150px;
    padding: 10px;
    font-weight: bold;
    vertical-align: top;
    border-bottom: 1px solid #ccc;
    background: #efefef;
}
#calendar td {
    padding: 10px;
    vertical-align: top;
    border-bottom: 1px solid #ccc;
    text-align: center;
}
#calendar .today{
    background: #ccc;
}
#calendar .sat {
    color: blue;
}
#calendar .sun {
    color: red;
}

土曜日、日曜日、現在の日付などのカレンダーに関わるデザインの変更を行っている。

あとがき

なるべくいじりやすいように、デザインは必要最低限にしてあります。またこちらで変更したデザインはHTMLのstyleで直接書いています。