「jsでのカレンダーオブジェクト」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

jsでのカレンダーオブジェクト

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jsでのカレンダーオブジェクト</title>
<script type="text/javascript">
/* ==============================================================
カレンダークラス
============================================================== */
var ClassCalendar = function(argY, argM, argD)
{
// ===========================================================
// メソッド：プライベート
// ===========================================================
// 指定がなければ今日
var now = new Date();
var year = argY || now.getFullYear();
var month = argM || now.getMonth() + 1;
var day = argD || now.getDate();
// 週単位で分割した日にち配列
var weekAry = new Array();
var fstWeek = 0; // 週初めの曜日（0：日曜～6：土曜）
var fill = ""; // 日にちの入っていないとこにいれる文字
// 曜日配列
var weekLabelAry = new Array("日", "月", "火", "水", "木", "金", "土");
// ===========================================================
// パブリックメソッド：プロパティを変更
// ===========================================================
/**
* 年月日をdate()からセット
* dateData 年月日
*/
this.setYMDForDate = function(dateData)
{
year = dateData.getFullYear();
month = dateData.getMonth() + 1;
day = dateData.getDate();
weekAry = new Array(); // 対象となる年月日が変わるなら配列は初期化
}
/**
* 年月日のセット
* argY, argM, argD 年月日
*/
this.setYMD = function(argY, argM, argD)
{
year = argY;
month = argM;
day = argD;
weekAry = new Array(); // 対象となる年月日が変わるなら配列は初期化
}
/**
* 指定数だけ前後する
* num nヶ月前 or 後ろ（負の値で前の月、正の値で次の月）
* target 対象を「y(=n年)、m(=nヶ月)、d(=n日)」
*/
this.setMoveYMD = function(num, target)
{
var target = target || "m";
var moveMonth = addDate(new Date(year, month-1, day), target, num);
year = moveMonth.getFullYear();
month = moveMonth.getMonth() + 1;
day = moveMonth.getDate();
weekAry = new Array(); // 対象となる年月日が変わるなら配列は初期化
}
/**
* 曜日をセット
* weekKindAry 曜日のラベル配列
*/
this.setWeekLabel = function(weekKindAry)
{
weekLabelAry = weekKindAry;
}
/**
* スタートなる曜日を決める
* start スタートとなる曜日を決める（0：日曜～6：土曜）
*/
this.setStartWeekDay = function(start)
{
start = start || 0;
if (0 <= parseFloat(start) && parseFloat(start) <= 6) {
fstWeek = start;
}
else {
// 曜日指定が0～6じゃないなら強制的に0
fstWeek = 0;
}
weekAry = new Array(); // スタートなる曜日が変わるなら配列は初期化
}
/**
* 空白日に埋める文字のセット
* start スタートとなる曜日を決める（0：日曜～6：土曜）
*/
this.setFill = function(addChar)
{
addChar = addChar || "";
fill = addChar;
weekAry = new Array(); // 区切り文字が変わるなら配列は初期化
}
// ===========================================================
// パブリックメソッド
// ===========================================================
/**
* 現在の年月日の各値を取得
* needVal 欲しい値（y,m,d）
*/
this.getValueForDate = function (needVal)
{
var tempVal = "";
if (needVal == "y") {
tempVal = year;
}
else if (needVal == "y") {
tempVal = month;
}
else {
tempVal = day;
}
return tempVal;
}
/**
* カレンダー用に変換した週の配列を取得：配列だけ欲しいとき用に。
* addChar 「1日まで」と「月末以降」を埋める文字
* start スタートとなる曜日を決める（0：日曜～6：土曜）
*/
this.getWeekAry = function (addChar, start)
{
if (weekAry.length == 0) {
this.setStartWeekDay(start);
this.setFill(addChar);
dayAryForCalendar();
}
return weekAry;
}
/**
* 年月日の書式（yyyy/mm/dd等）を整えて返す
* type 年月日の書式
*/
this.convertDateFormat = function(type)
{
type = type || "yyyy/mm/dd";
// いずれ各書式に対応させる予定
if (type == "yyyy/mm") {
tempM = convertNumberDigits(2, month);
convertDate = year + "/" + tempM;
}
else {
// 未対応記述とyyyy/mm/ddの場合
tempM = convertNumberDigits(2, month);
tempD = convertNumberDigits(2, day);
convertDate = year + "/" + tempM + "/" + tempD;
}
return convertDate;
}
/**
* カレンダー用の週配列をtableタグにする
* weekKindAry 週単位にした日にちの配列
*/
this.makeTableForCalendar = function(weekKindAry)
{
weekKindAry = weekKindAry || weekLabelAry;
if (weekAry.length == 0) {
dayAryForCalendar();
}
var tableTag = "";
tableTag += '<table class="calendarTable">';
// 年月
tableTag += '<caption>';
tableTag += year + "年" + month + "月";
tableTag += '</caption>';
// 曜日：指定された週初めから曜日を並び替え
useWeekAry = convertWeekLabelOfCalendar(weekKindAry);
tableTag += '<tr>';
for (var i=0; i<useWeekAry.length; i++) {
tableTag += '<th>';
tableTag += useWeekAry[i];
tableTag += '</th>';
}
tableTag += '</tr>';
// 日にち
var styleHol = "";
var styleTod = "";
for (var i=0; i<weekAry.length; i++) {
tableTag += '<tr>';
for (var j=0; j<weekAry[i].length; j++) {
calClass = "";
classHol = "";
classTod = "";
if (weekAry[i][j]["num"] == 0) {
// 日曜
classHol = 'calHol';
}
if (weekAry[i][j]["day"] == day) {
// 今日
classTod = ' calTod';
}
if (classHol != "" || classTod != "") {
calClass = ' class="' + classHol + classTod + '"';
}
tableTag += '<td' + calClass + '>';
tableTag += weekAry[i][j]["day"];
tableTag += '</td>';
}
tableTag += '</tr>';
}
tableTag += '</table>';
return tableTag;
}
// ===========================================================
// プライベートメソッド
// ===========================================================
/**
* カレンダー用の配列を返す
*/
var dayAryForCalendar = function()
{
// 「週初めから1日まで」と「月末から週末まで」を文字を埋める
var dayAry = convertDayOfCalendar();
// 1週ずつ分割していく
weekAry = convertWeekOfCalendar(dayAry);
}
// 桁数をそろえるために0を埋める
var convertNumberDigits = function(digit, num)
{
var src = new String(num);
var cnt = digit - src.length; // 桁数（digit）から足りない文字数を調査
if (0 < cnt) {
while (cnt-- > 0) {
src = "0" + src;
}
}
return src;
}
// 指定された曜日を週初めとして空白日を埋める
var convertDayOfCalendar = function ()
{
// 月初と月末のDate()
var startMonth = new Date(year, month-1, 1);
var endMonth = new Date(year, month, 0);
// 指定された週初めの曜日から週末の曜日を求めておく
endEeek = (fstWeek != 0) ? fstWeek - 1: 6;
// カレンダー用に日にちを配列化：
var DayArray = new Array();
// 日曜（指定された週初めの曜日）～1日の空白を埋める。
if (startMonth.getDay() < fstWeek) {
diffWeekToFst = 7 - Math.abs(startMonth.getDay() - fstWeek);
}
else {
diffWeekToFst = Math.abs(startMonth.getDay() - fstWeek);
}
for (i=0; i<diffWeekToFst; i++) {
DayArray.push(fill);
}
// 月初め（1日）～月末までを埋める
for (i=0; i<endMonth.getDate(); i++) {
DayArray.push(i+1);
}
// 月末～土曜（指定された週末の曜日）の空白を埋める
if (endMonth.getDay() != endEeek) {
// 週初めから何日目か
if (endMonth.getDay() < fstWeek) {
diffWeekForEnd = 7 - Math.abs(endMonth.getDay() - fstWeek);
}
else {
diffWeekForEnd = Math.abs(endMonth.getDay() - fstWeek);
}
// 週末まで何日あるか
diffWeekFromEnd = 6 - diffWeekForEnd;
for (i=0; i<diffWeekFromEnd; i++) {
DayArray.push(fill);
}
}
return DayArray;
}
// 年月日に指定された数値を足して返す
var addDate = function (ymd, target, add)
{
var addNum = parseFloat(add);
var addY = ymd.getFullYear();
var addM = ymd.getMonth() + 1;
var addD = ymd.getDate();
// ymdが月末のときに使う
var endMonthDay = new Date(addY , addM, 0).getDate();
var tempD = addD;
if(target == "y") {
addY += addNum;
}
else if(target == "m") {
addM += addNum;
}
else if(target == "d") {
addD += addNum;
}
// 月末で、年・月を足したとき：月初めに変更して足し、最後に月末をセットする
if ((target == "y" || target == "m") && tempD == endMonthDay) {
// 月初めで年月を移動
dateNoDay = new Date(addY, addM-1, 1);
// 移動した年月の月末を取得
var nextY = dateNoDay.getFullYear();
var nextM = dateNoDay.getMonth() + 1;
dateLast = new Date(nextY, nextM, 0).getDate();
// 移動した年月の月末でDate()に変換
tempDate = new Date(nextY, nextM-1, dateLast);
}
else {
tempDate = new Date(addY , addM-1, addD);
}
return tempDate;
}
// カレンダー用に週単位で配列にして返す
var convertWeekOfCalendar = function(dayAry)
{
var ary = new Array();
for (var i=0, j=0, k=fstWeek; i<dayAry.length; i++, k++) {
j = parseInt(i/7);
if (i%7 == 0) {
ary[j] = new Array();
}
if (6 < k) {
k = 0;
}
// kが曜日、dayが日にち
ary[j].push({"num": k, "day": dayAry[i]});
}
return ary;
}
// 指定されている週初めに合わせて曜日配列を入れ替える
var convertWeekLabelOfCalendar = function(weekKindAry)
{
var ary = new Array();
for (var i=0, j=fstWeek; i<7; i++, j++) {
if (6 < j) {
j = 0;
}
ary.push(weekKindAry[j]);
}
return ary;
}
}
</script>
<style type="text/css">
.calendarTable{
border-collapse:collapse;
margin:0;
}
.calendarTable caption{
text-align:left;
padding:3px 1px;
}
.calendarTable th{
background:#ffffcc;
padding:2px;
text-align:center;
border:1px solid #ccc;
}
.calendarTable td{
background:#fff;
padding:2px;
text-align:center;
border:1px solid #ccc;
}
.calendarTable .calHol{
color:#ff0000;
}
.calendarTable .calTod{
background:#ccffff;
font-weight:bold;
}
</style>
</head>
<body>
<h1>jsでのカレンダーオブジェクト</h1>
使ってるCSSのクラスはテーブルタグに「calendarTable」、日曜に「calHol」、指定日に「calTod」。<br />
<br />
<script type="text/javascript">
// デフォルト：インスタンス作成
var defaultCal = new ClassCalendar();
document.write("■デフォルトのまま単純に出力する<br />");
document.write(defaultCal.makeTableForCalendar() + "<br />");
document.write("<br />");
document.write("■空白日を「-」にして出力<br />");
defaultCal.setFill("-"); // 空白日の変更
tag = defaultCal.makeTableForCalendar(); // テーブルタグに変換したヤツが欲しいならコレ
document.write(tag + "<br />");
document.write("<br />");
defaultCal.setFill(""); // 空白日をもとに戻しておく。
// 配列だけが欲しいなら下記でOK
// ary = defaultCal.getWeekAry();
document.write("■第4週までしかない月（2012/2/1指定）：曜日を変更(以降、ずっと同じ記述にするならsetWeekLabel()で変更しておく)<br />");
defaultCal.setYMD(2015,2,1); // 年月を指定
document.write(defaultCal.makeTableForCalendar(new Array("sun", "mon", "tue", "wed", "thu", "fri", "sat")) + "<br />");
document.write("<br />");
document.write("■第6週まである月（2012/12/31指定）<br />");
defaultCal.setYMD(2012,12,31);
document.write(defaultCal.makeTableForCalendar() + "<br />");
document.write("<br />");
document.write("■最後に指定した年月日から1か月後<br />");
defaultCal.setMoveYMD(1); // nヶ月後、nヶ月前を指定
document.write(defaultCal.makeTableForCalendar() + "<br />");
document.write("<br />");
document.write("■2012/11/11から1か月後（年を超えない場合）<br />");
defaultCal.setYMD(2012,11,11);
defaultCal.setMoveYMD(1);
document.write(defaultCal.makeTableForCalendar() + "<br />");
document.write("<br />");
document.write("■最後に指定した年月日から2か月前<br />");
defaultCal.setMoveYMD(-2);
document.write(defaultCal.makeTableForCalendar() + "<br />");
document.write("<br />");
document.write("■最後に指定した年月日から3日後の月<br />");
defaultCal.setMoveYMD(3, "d");
document.write(defaultCal.makeTableForCalendar() + "<br />");
document.write("<br />");
document.write("■2012/3/2の3日前の月<br />");
defaultCal.setYMD(2012,3,2);
defaultCal.setMoveYMD(-3, "d");
document.write(defaultCal.makeTableForCalendar() + "<br />");
document.write("<br />");
document.write("■最後に指定した年月日で、月曜スタートで空白日を「-」にする<br />");
defaultCal.setFill("-"); // 空白日の変更
defaultCal.setStartWeekDay(1); // 月曜スタートに変更
document.write(defaultCal.makeTableForCalendar() + "<br />");
document.write("<br />");
defaultCal.setFill(""); // 空白日をもとに戻しておく。
defaultCal.setStartWeekDay(0); // 日曜スタートをもとに戻しておく。
document.write("■年月日を表示<br />");
document.write(defaultCal.convertDateFormat() + "<br />");
document.write("<br />");
</script>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>