More than 5 years have passed since last update.

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

Last updated at 2017-12-08Posted at 2017-12-07

##完成イメージ

##フォルダ構成

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;	// うるう年だったら...
    // ２月を２９日とする
    var myMonth = myDate.getMonth();	// 月を取得(0月～11月)
    myDate.setDate(1);	// 日付を'１日'に変えて、
    var myWeek = myDate.getDay() - 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で直接書いています。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up