Edited at

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で直接書いています。