車輪の再発明 - 月別カレンダーを生成するJavascript2009年10月20日 22:43
空気を読まずに月別カレンダーを生成するJavascriptを書いたのでご紹介です。
jQueryなどのライブラリは使ってないので好きなものと組み合わせて使えます。
sampleページにしてみました。
使い方は簡単
デザインはCSSでやるからデザイン要素入れないで！っていうこういうシンプルなライブラリが好きです。
ソースコードは続きから。ご自由にどうぞ。不具合はご報告いただけると勉強になります！
（ただし、このコードを利用して起こったいかなることにも責任は持ちません。）
jQueryなどのライブラリは使ってないので好きなものと組み合わせて使えます。
sampleページにしてみました。
使い方は簡単
1.newしてやりつつコンストラクタに値を渡して
- config.caption
- キャプションの有無 (true | false),デフォルトはfalse
- config.className
- カレンダーのテーブルやセルに付くクラス名やIDの接頭値,デフォルトは'calender'
- config.daynames
- デフォルトは['日','月','火','水','木','金','土']曜日ラベルを配列で
- config.dayclass
- デフォルトは['sun','mon','tue','wed','thu','fri','sat']曜日のクラス名を配列で
2.メソッドを呼ぶ
- calenderClass.make_cal_today()：今日を基準に今月のカレンダー
- calenderClass.make_cal_today(-1,2)：今日を基準に引数1を年に、引数2を月に足したカレンダー（例:去年の再来月）
- calenderClass.make_cal_monthly(2009,12)：指定年,月のカレンダー
3.戻り値
戻り値はテーブルタグのHTMLオブジェクト形式です。なのでそのまま`innerHTMLはできません。appendChildとかでお願いします。4.こんなんになる
- th、tdには曜日のクラス名とconfig.className+"Date"+${date}がIDにセットされる
- 当日のセルにはrel="today"がセットされる
デザインはCSSでやるからデザイン要素入れないで！っていうこういうシンプルなライブラリが好きです。
ソースコードは続きから。ご自由にどうぞ。不具合はご報告いただけると勉強になります！
（ただし、このコードを利用して起こったいかなることにも責任は持ちません。）
var _calenderClass = function(config){
//set default vlues
if(!config) var config = {};
this.iscaption = (typeof config.caption != "undefined") ? config.caption : false;
this.className = (typeof config.className != "undefined") ? config.className : 'calender';
this.daynames = (typeof config.daynames != "undefined") ? config.daynames : ['日','月','火','水','木','金','土'];
this.dayclass = (typeof config.dayclass != "undefined") ? config.dayclass : ['sun','mon','tue','wed','thu','fri','sat'];
var DateObj = new Date();
this.today = [DateObj.getDate(),DateObj.getMonth(),DateObj.getFullYear()];
return this;
};
_calenderClass.prototype = {
leap: function(year){
return year % 4 ? 0 : year % 100 ? 1 : year % 400 ? 0 : 1;
},
make_cal_array: function(year,monthly){//1year days
var months = [31, 28 + this.leap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var result = [];
for (var month = 0; month < 12; month++){
result[month] = [];
var date1day = (new Date(year, month, 1, 0, 0, 0)).getDay();
var dateLastDay = (new Date(year, month, months[month], 0, 0, 0)).getDay();
for (var date = 1; date <= months[month]+(6-dateLastDay); date++){
if(date <= months[month] && monthly) {
result[month][date + date1day - 1] = date;
}else if(date <= months[month]){
result[month][date - 1] = date;
}else if(monthly) {//to table cell remainder
result[month][date + date1day - 1] = false;
}
}
}
return result;
},
make_cal_monthly: function(year, month){//make calender
var monthLabel = month - 1;//to Array label
var cal = this.make_cal_array(year,true);
var table = document.createElement('table');
// header
var tr = document.createElement('tr');
for (var day = 0; day < 7; day++){//label of day
var th = document.createElement('th');
th.innerHTML = this.daynames[day];
th.className = this.dayclass[day];
tr.appendChild(th);
}
var thead = document.createElement('thead');
thead.appendChild(tr);
table.appendChild(thead);
// body;
var tbody = document.createElement('tbody');
for (var date = 0, fullday = cal[monthLabel].length; date < fullday; date++){
if (date % 7 == 0) tr = document.createElement('tr');
var td = document.createElement('td');
if(this.today[0] == date && this.today[1] == monthLabel && this.today[2] == year) {
td.setAttribute("rel","today");//today attribute
}
td.id = (typeof cal[monthLabel][date] != "undefined") ? this.className + "Date" + cal[monthLabel][date] : "";//set id name for date
if (cal[monthLabel][date]){
td.innerHTML = cal[monthLabel][date];
td.className = this.dayclass[date % 7];//add class
}else {
td.className = "nodate";//add class nodate
td.innerHTML = " ";
}
tr.appendChild(td);
if (date % 7 == 6) tbody.appendChild(tr);
}
tbody.appendChild(tr);
table.className = this.className;//add id for table
table.id = this.className + year + "-" + month;//add id for table
table.setAttribute("rel",(year +"-"+ (month)));
if(this.iscaption) {//is caption
var caption = document.createElement('caption');
caption.innerHTML = year + '-' + (month)+' JAPAN';
table.appendChild(caption);
}
table.appendChild(tbody);
return table;
},
make_cal_today: function(yearPlus,monthPlus){
var monthPlus = (typeof monthPlus != "undefined") ? monthPlus : 0;
var yearPlus = (typeof yearPlus != "undefined") ? yearPlus : 0;
return this.make_cal_monthly(this.today[2] + yearPlus , this.today[1] + monthPlus);
}
};
