Javascriptで指定月の情報を取得して、それを毎度毎度、組み立てていくのが手間なので、オブジェクトっぽく引き出せるようにJSファイルを作りました。
MonthObj.js
/**
* MonthObj.js
* Month Object
**/
/* MonthObjクラス
================================================== */
function MonthObj(dateObj) {
var y = dateObj.getFullYear();
var m = dateObj.getMonth();
// Paramater
this.monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
this.classes = {
month: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],
week: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
}
// Today Info
this.today = new Date();
this.todaysYear = this.today.getFullYear();
this.todaysMonth = this.today.getMonth();
this.todaysDate = this.today.getDate();
this.isTodayThisMonth = (this.todaysYear == y && this.todaysMonth == m) ? true : false;
// 指定月 Info
this.Year = y;
this.Month = m;
if ( ((y % 4) == 0 && (y % 100) != 0) || (y % 400) == 0 ) this.monthDays[1] = 29;
this.days = this.getObjArray()
this.firstday = this.getFirstDay();
this.lastday = this.getLastDay();
return this;
}
/* 日の情報を月単位オブジェクトで返す
================================================== */
MonthObj.prototype.getObjArray = function() {
var arr = [];
for (var i = 1, len = this.monthDays[this.Month]; i <= len; i++) {
var o = {
year : this.Year,
month : this.Month,
date : i,
day : new Date(this.Year, this.Month, i).getDay(),
css_month : this.classes.month[this.Month],
css_week : null,
past_weeks_m: this.getWeeksOfMonth(i),
past_weeks_y: this.getWeeksOfYear(i),
today : false
};
o.css_week = this.classes.week[o.day];
if (this.isTodayThisMonth && this.todaysDate == i) o.today = true;
arr[i - 1] = o;
}
return arr;
}
/* 最初の曜日
================================================== */
MonthObj.prototype.getFirstDay = function() {
return new Date(this.Year, this.Month, 1).getDay();
}
/* 最後の曜日
================================================== */
MonthObj.prototype.getLastDay = function() {
return new Date(this.Year, this.Month, this.monthDays[this.Month]).getDay();
}
/* 始めの空白数
================================================== */
MonthObj.prototype.getCountBeforeDays = function() {
return this.getFirstDay();
}
/* 最後の空白数
================================================== */
MonthObj.prototype.getCountAfterDays = function() {
return (6 - this.getLastDay());
}
/* 月で何週目か
================================================== */
MonthObj.prototype.getWeeksOfMonth = function(d) {
var t = new Date(this.Year, this.Month, d);
var pastWeeks = Math.floor((t.getDate() - t.getDay() + 12) / 7);
//console.log('-----');
//console.log(m + ' 月\t第 ' + pastWeeks + ' 週目');
return pastWeeks;
}
/* 1年で何週目か
================================================== */
MonthObj.prototype.getWeeksOfYear = function(d) {
var t = new Date(this.Year, this.Month, d);
var firstday = new Date(this.Year, 0, 1);// その年の1月1日
var pastDays = Math.floor((t.getTime() - firstday.getTime()) / (1000 * 60 * 60 * 24));
var pastWeeks = Math.floor((pastDays - t.getDay() + 12) / 7);
//console.log(pastDays + ' 日目\t第 ' + pastWeeks + ' 週目');
return pastWeeks;
}
使用例
MonthObj.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>MonthObj Sample</title>
<style type="text/css" media="screen">
*,
*:after,
*:before {
margin: 0;
padding: 0;
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing : border-box;
box-sizing : border-box;
}
html,
body {}
html {
font-family: sans-serif;
font-size: 62.5%;
line-height: 1.5em;
}
body {
font-size: 16px;
font-size: 1.6rem;
}
.container {
position: absolute;
left: 50%;
top: 50%;
width: 480px;
padding: 30px;
transform: translate(-50%, -50%);
background: #f0f0f0;
}
.container h3 {
text-align: center;
margin: 0 auto 1em;
}
.monthContainer {}
.monthMain {
display: table;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
width: 100%;
background: #fff;
font-family: monospace;
text-align: center;
}
.monthMain > ul {
display: table-row;
list-style: none;
}
.monthMain > ul.monthHeader {
font-weight: bold;
background: #999;
color: #fff;
}
.monthMain > ul > li {
display: table-cell;
vertical-align: middle;
border: 1px solid #ccc;
}
.monthMain > ul > li > span,
.monthMain > ul > li > a {
display: block;
padding: 1em 0.25em;
}
.monthMain .today {
background: #f7fdb0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" charset="utf-8"></script>
<script src="MonthObj.js" charset="utf-8"></script>
<script>
$(function() {
_langs = {
en: {
month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
month_s: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
week: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
week_s: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
ja: {
month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
month_s: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
week: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
week_s: ['日', '月', '火', '水', '木', '金', '土']
}
};
var t = new Date('2015-11-01');//Dateを生成
var mm = new MonthObj(t);//オブジェクトを作成
$('.monthTitle').html((t.getMonth() + 1) + '月');//月を表示
createMonthView();//カレンダーを作成
function createMonthView() {
var tags = '';
tags += '<div class="monthMain">';
// ヘッダー（曜日）
tags += '<ul class="monthHeader">';
for (var i = 0; i < 7; i++) {
tags += '<li><span>' + _langs.ja.week_s[i] + '</span></li>';
}
tags += '</ul>';
tags += '<ul class="monthRow">';
// 始めの空白表示 getCountBeforeDays()でいくつか空白かを取得できる
for (var i = 0, len = mm.getCountBeforeDays(); i < len; i++) {
tags += '<li class="empty"><span>empty</span></li>';
}
// 日数ループ days配列から情報を引き出す
for (var i = 0, len = mm.days.length; i < len; i++) {
var D = mm.days[i];
console.log('==================================================');
console.log(D);
for (key in D) {
console.log(key+':\t',D[key]);
}
if (D.day == 0) tags += '</ul><ul class="monthRow">';//週の終わりと初め
tags += '<li class="';
tags += D.css_month;
tags += ' ';
tags += D.css_week;
if (D.today) {
tags += ' today';
}
tags += '" data-year="' + D.year;
tags += '" data-month="' + D.month;
tags += '" data-date="' + D.date;
tags += '"><span>'+ D.date +'</span></li>';
}
// 最後の空白表示 getCountAfterDaysでいくつか空白かを取得できる
for (var i = 0, len = mm.getCountAfterDays(); i < len; i++) {
tags += '<li class="empty"><span>empty</span></li>';
}
tags += '</ul></div>';
$('.monthContainer').html(tags);
}
});
</script>
</head>
<body>
<div class="container">
<h3 class="monthTitle"></h3>
<div class="monthContainer"></div>
</div>
</body>
</html>
以上です。