| 1 |
// ======================================================== |
| 2 |
// jkl-calendar.js ---- ポップアップカレンダー表示クラス |
| 3 |
// Copyright 2005-2006 Kawasaki Yusuke <u-suke [at] kawa.net> |
| 4 |
// Thanks to 2tak <info [at] code-hour.com> |
| 5 |
// http://www.kawa.net/works/js/jkl/calender.html |
| 6 |
// 2005/04/06 - 最初のバージョン |
| 7 |
// 2005/04/10 - 外部スタイルシートを使用しない、JKL.Opacity はオプション |
| 8 |
// 2006/10/22 - typo修正、spliter/min_date/max_dateプロパティ、×ボタン追加 |
| 9 |
// 2006/10/23 - prototype.js併用時は、Event.observe()でイベント登録 |
| 10 |
// 2006/10/24 - max_date 範囲バグ修正 |
| 11 |
// 2006/10/25 - フォームに初期値があれば、カレンダーの初期値に採用する |
| 12 |
// 2006/11/15 - MOM Update 週の初めの曜日を変更できるように修正 |
| 13 |
// 2006/11/23 - MOM Update 今日日付の文字色を指定できるように修正、あと枠線も描画してみる |
| 14 |
// 邪魔な<select>への応急処置を書いてみた |
| 15 |
// 2006/11/27 - MOM Update 邪魔な<select>への応急処置を修正、描画領域の高さを取得する |
| 16 |
// 2006/11/30 - MOM Update 選択可能な曜日をプロパティに追加、今日日付と選択不可能な日付の背景色をスタイルに追加 |
| 17 |
// カレンダーのz-indexをプロパティに追加 |
| 18 |
// 2006/12/04 - ksuzu Update 選択可能日がない月には移動できないように変更 |
| 19 |
// カレンダーの表示月をクリックすると現在の月に移動できるよう変更 |
| 20 |
// 閉じるボタンにてカレンダーを閉じたとき、カレンダーの初期表示を戻すよう変更 |
| 21 |
// 2006/12/30 - MOM IFRAMEのSRC属性にdummy.htmlを挿入 |
| 22 |
// 2007/02/04 - MOM setDateYMDのバグを修正 |
| 23 |
// TDタグのスタイルに背景色を指定するよう修正 |
| 24 |
// ======================================================== |
| 25 |
|
| 26 |
/*********************************************************** |
| 27 |
// (サンプル)ポップアップするカレンダー |
| 28 |
|
| 29 |
<html> |
| 30 |
<head> |
| 31 |
<script type="text/javascript" src="jkl-calendar_IF.js" charset="Shift_JIS"></script> |
| 32 |
<script> |
| 33 |
var cal1 = new JKL.Calendar("calid","formid","colname"); |
| 34 |
</script> |
| 35 |
</head> |
| 36 |
<body> |
| 37 |
<form id="formid" action=""> |
| 38 |
<input type="text" name="colname" onClick="cal1.write();" onChange="cal1.getFormValue(); cal1.hide();"><br> |
| 39 |
<div id="calid"></div> |
| 40 |
</form> |
| 41 |
</body> |
| 42 |
</html> |
| 43 |
|
| 44 |
**********************************************************/ |
| 45 |
|
| 46 |
// 親クラス |
| 47 |
|
| 48 |
if ( typeof(JKL) == 'undefined' ) JKL = function() {}; |
| 49 |
|
| 50 |
// JKL.Calendar コンストラクタの定義 |
| 51 |
|
| 52 |
JKL.Calendar = function ( eid, fid, valname ) { |
| 53 |
this.eid = eid; |
| 54 |
this.formid = fid; |
| 55 |
this.valname = valname; |
| 56 |
this.__dispelem = null; // カレンダー表示欄エレメント |
| 57 |
this.__textelem = null; // テキスト入力欄エレメント |
| 58 |
this.__opaciobj = null; // JKL.Opacity オブジェクト |
| 59 |
this.style = new JKL.Calendar.Style(); |
| 60 |
return this; |
| 61 |
}; |
| 62 |
|
| 63 |
// バージョン番号 |
| 64 |
|
| 65 |
JKL.Calendar.VERSION = "0.13"; |
| 66 |
|
| 67 |
// デフォルトのプロパティ |
| 68 |
|
| 69 |
JKL.Calendar.prototype.spliter = "/"; |
| 70 |
JKL.Calendar.prototype.date = null; |
| 71 |
JKL.Calendar.prototype.min_date = null; |
| 72 |
JKL.Calendar.prototype.max_date = null; |
| 73 |
|
| 74 |
// 2006.11.15 MOM 表示開始曜日をプロパティに追加(デフォルトは日曜日=0) |
| 75 |
JKL.Calendar.prototype.start_day = 0; |
| 76 |
|
| 77 |
// 2006.11.23 MOM カレンダー内の日付を枠線で区切るかどうかのプロパティ(デフォルトはtrue) |
| 78 |
JKL.Calendar.prototype.draw_border = true; |
| 79 |
|
| 80 |
// 2006.11.30 MOM 各曜日の選択可否をプロパティに追加(デフォルトは全てtrue) |
| 81 |
// 配列の添え字で曜日を指定(0〜6 = 日曜〜土曜)、選択可否をboolean値で代入する、という使い方 |
| 82 |
JKL.Calendar.prototype.selectable_days = new Array(true,true,true,true,true,true,true); |
| 83 |
|
| 84 |
// 2006.11.30 MOM カレンダーのz-indexをプロパティに追加 |
| 85 |
JKL.Calendar.prototype.zindex = 10; |
| 86 |
|
| 87 |
// JKL.Calendar.Style |
| 88 |
|
| 89 |
JKL.Calendar.Style = function() { |
| 90 |
return this; |
| 91 |
}; |
| 92 |
|
| 93 |
// デフォルトのスタイル |
| 94 |
|
| 95 |
JKL.Calendar.Style.prototype.frame_width = "150px"; // フレーム横幅 |
| 96 |
JKL.Calendar.Style.prototype.frame_color = "#006000"; // フレーム枠の色 |
| 97 |
JKL.Calendar.Style.prototype.font_size = "12px"; // 文字サイズ |
| 98 |
JKL.Calendar.Style.prototype.day_bgcolor = "#F0F0F0"; // カレンダーの背景色 |
| 99 |
JKL.Calendar.Style.prototype.month_color = "#FFFFFF"; // ○年○月部分の背景色 |
| 100 |
JKL.Calendar.Style.prototype.month_hover_color = "#009900"; // マウスオーバー時の≪≫文字色 |
| 101 |
JKL.Calendar.Style.prototype.month_hover_bgcolor= "#FFFFCC"; // マウスオーバー時の≪≫背景色 |
| 102 |
JKL.Calendar.Style.prototype.weekday_color = "#404040"; // 月曜〜金曜日セルの文字色 |
| 103 |
JKL.Calendar.Style.prototype.saturday_color = "#0040D0"; // 土曜日セルの文字色 |
| 104 |
JKL.Calendar.Style.prototype.sunday_color = "#D00000"; // 日曜日セルの文字色 |
| 105 |
JKL.Calendar.Style.prototype.others_color = "#999999"; // 他の月の日セルの文字色 |
| 106 |
JKL.Calendar.Style.prototype.day_hover_bgcolor = "#FF9933"; // マウスオーバー時の日セルの背景 |
| 107 |
JKL.Calendar.Style.prototype.cursor = "pointer"; // マウスオーバー時のカーソル形状 |
| 108 |
|
| 109 |
// 2006.11.23 MOM 今日日付の文字色をプロパティに追加 |
| 110 |
JKL.Calendar.Style.prototype.today_color = "#008000"; // 今日日付セルの文字色 |
| 111 |
// 2006.11.23 MOM 枠線もつけてみる |
| 112 |
JKL.Calendar.Style.prototype.today_border_color = "#00A000"; // 今日日付セルの枠線の色 |
| 113 |
JKL.Calendar.Style.prototype.others_border_color= "#E0E0E0"; // 他の日セルの枠線の色 |
| 114 |
|
| 115 |
// 2006.11.30 MOM 今日日付の背景色を忘れてたので追加してみる |
| 116 |
JKL.Calendar.Style.prototype.today_bgcolor = "#D0FFD0"; // 今日日付セルの背景色 |
| 117 |
// 2006.11.30 MOM 選択不可能な日付の背景色を追加 |
| 118 |
JKL.Calendar.Style.prototype.unselectable_day_bgcolor = "#D0D0D0"; // 選択不可能な日付の背景色 |
| 119 |
|
| 120 |
// メソッド |
| 121 |
|
| 122 |
JKL.Calendar.Style.prototype.set = function(key,val) { this[key] = val; } |
| 123 |
JKL.Calendar.Style.prototype.get = function(key) { return this[key]; } |
| 124 |
JKL.Calendar.prototype.setStyle = function(key,val) { this.style.set(key,val); }; |
| 125 |
JKL.Calendar.prototype.getStyle = function(key) { return this.style.get(key); }; |
| 126 |
|
| 127 |
// 日付を初期化する |
| 128 |
|
| 129 |
JKL.Calendar.prototype.initDate = function ( dd ) { |
| 130 |
if ( ! dd ) dd = new Date(); |
| 131 |
var year = dd.getFullYear(); |
| 132 |
var mon = dd.getMonth(); |
| 133 |
var date = dd.getDate(); |
| 134 |
this.date = new Date( year, mon, date ); |
| 135 |
this.getFormValue(); |
| 136 |
return this.date; |
| 137 |
} |
| 138 |
|
| 139 |
// 透明度設定のオブジェクトを返す |
| 140 |
|
| 141 |
JKL.Calendar.prototype.getOpacityObject = function () { |
| 142 |
if ( this.__opaciobj ) return this.__opaciobj; |
| 143 |
var cal = this.getCalendarElement(); |
| 144 |
if ( ! JKL.Opacity ) return; |
| 145 |
this.__opaciobj = new JKL.Opacity( cal ); |
| 146 |
return this.__opaciobj; |
| 147 |
}; |
| 148 |
|
| 149 |
// カレンダー表示欄のエレメントを返す |
| 150 |
|
| 151 |
JKL.Calendar.prototype.getCalendarElement = function () { |
| 152 |
if ( this.__dispelem ) return this.__dispelem; |
| 153 |
this.__dispelem = document.getElementById( this.eid ) |
| 154 |
return this.__dispelem; |
| 155 |
}; |
| 156 |
|
| 157 |
// テキスト入力欄のエレメントを返す |
| 158 |
|
| 159 |
JKL.Calendar.prototype.getFormElement = function () { |
| 160 |
if ( this.__textelem ) return this.__textelem; |
| 161 |
var frmelms = document.getElementById( this.formid ); |
| 162 |
if ( ! frmelms ) return; |
| 163 |
for( var i=0; i < frmelms.elements.length; i++ ) { |
| 164 |
if ( frmelms.elements[i].name == this.valname ) { |
| 165 |
this.__textelem = frmelms.elements[i]; |
| 166 |
} |
| 167 |
} |
| 168 |
return this.__textelem; |
| 169 |
}; |
| 170 |
|
| 171 |
// オブジェクトに日付を記憶する(YYYY/MM/DD形式で指定する) |
| 172 |
|
| 173 |
JKL.Calendar.prototype.setDateYMD = function (ymd) { |
| 174 |
var splt = ymd.split( this.spliter ); |
| 175 |
if ( splt[0]-0 > 0 && |
| 176 |
splt[1]-0 >= 1 && splt[1]-0 <= 12 && // bug fix 2006/03/03 thanks to ucb |
| 177 |
splt[2]-0 >= 1 && splt[2]-0 <= 31 ) { |
| 178 |
if ( ! this.date ) this.initDate(); |
| 179 |
/* 2007.02.04 MOM 画面表示時、既に日付がセットされている場合に発生するバグを修正 |
| 180 |
this.date.setFullYear( splt[0] ); |
| 181 |
this.date.setMonth( splt[1]-1 ); |
| 182 |
this.date.setDate( splt[2] ); |
| 183 |
*/ |
| 184 |
this.date.setDate( splt[2] ); |
| 185 |
this.date.setMonth( splt[1]-1 ); |
| 186 |
this.date.setFullYear( splt[0] ); |
| 187 |
} else { |
| 188 |
ymd = ""; |
| 189 |
} |
| 190 |
return ymd; |
| 191 |
}; |
| 192 |
|
| 193 |
// オブジェクトから日付を取り出す(YYYY/MM/DD形式で返る) |
| 194 |
// 引数に Date オブジェクトの指定があれば、 |
| 195 |
// オブジェクトは無視して、引数の日付を使用する(単なるfprint機能) |
| 196 |
|
| 197 |
JKL.Calendar.prototype.getDateYMD = function ( dd ) { |
| 198 |
if ( ! dd ) { |
| 199 |
if ( ! this.date ) this.initDate(); |
| 200 |
dd = this.date; |
| 201 |
} |
| 202 |
var mm = "" + (dd.getMonth()+1); |
| 203 |
var aa = "" + dd.getDate(); |
| 204 |
if ( mm.length == 1 ) mm = "" + "0" + mm; |
| 205 |
if ( aa.length == 1 ) aa = "" + "0" + aa; |
| 206 |
return dd.getFullYear() + this.spliter + mm + this.spliter + aa; |
| 207 |
}; |
| 208 |
|
| 209 |
// テキスト入力欄の値を返す(ついでにオブジェクトも更新する) |
| 210 |
|
| 211 |
JKL.Calendar.prototype.getFormValue = function () { |
| 212 |
var form1 = this.getFormElement(); |
| 213 |
if ( ! form1 ) return ""; |
| 214 |
var date1 = this.setDateYMD( form1.value ); |
| 215 |
return date1; |
| 216 |
}; |
| 217 |
|
| 218 |
// フォーム入力欄に指定した値を書き込む |
| 219 |
|
| 220 |
JKL.Calendar.prototype.setFormValue = function (ymd) { |
| 221 |
if ( ! ymd ) ymd = this.getDateYMD(); // 無指定時はオブジェクトから? |
| 222 |
var form1 = this.getFormElement(); |
| 223 |
if ( form1 ) form1.value = ymd; |
| 224 |
}; |
| 225 |
|
| 226 |
// カレンダー表示欄を表示する |
| 227 |
|
| 228 |
JKL.Calendar.prototype.show = function () { |
| 229 |
this.getCalendarElement().style.display = ""; |
| 230 |
}; |
| 231 |
|
| 232 |
// カレンダー表示欄を即座に隠す |
| 233 |
|
| 234 |
JKL.Calendar.prototype.hide = function () { |
| 235 |
this.getCalendarElement().style.display = "none"; |
| 236 |
}; |
| 237 |
|
| 238 |
// カレンダー表示欄をフェードアウトする |
| 239 |
|
| 240 |
JKL.Calendar.prototype.fadeOut = function (s) { |
| 241 |
if ( JKL.Opacity ) { |
| 242 |
this.getOpacityObject().fadeOut(s); |
| 243 |
} else { |
| 244 |
this.hide(); |
| 245 |
} |
| 246 |
}; |
| 247 |
|
| 248 |
// 月単位で移動する |
| 249 |
|
| 250 |
JKL.Calendar.prototype.moveMonth = function ( mon ) { |
| 251 |
// 前へ移動 |
| 252 |
if ( ! this.date ) this.initDate(); |
| 253 |
for( ; mon<0; mon++ ) { |
| 254 |
this.date.setDate(1); // 毎月1日の1日前は必ず前の月 |
| 255 |
this.date.setTime( this.date.getTime() - (24*3600*1000) ); |
| 256 |
} |
| 257 |
// 後へ移動 |
| 258 |
for( ; mon>0; mon-- ) { |
| 259 |
this.date.setDate(1); // 毎月1日の32日後は必ず次の月 |
| 260 |
this.date.setTime( this.date.getTime() + (24*3600*1000)*32 ); |
| 261 |
} |
| 262 |
this.date.setDate(1); // 当月の1日に戻す |
| 263 |
this.write(); // 描画する |
| 264 |
}; |
| 265 |
|
| 266 |
// イベントを登録する |
| 267 |
|
| 268 |
JKL.Calendar.prototype.addEvent = function ( elem, ev, func ) { |
| 269 |
// prototype.js があれば利用する(IEメモリリーク回避) |
| 270 |
if ( window.Event && Event.observe ) { |
| 271 |
Event.observe( elem, ev, func, false ); |
| 272 |
} else { |
| 273 |
elem["on"+ev] = func; |
| 274 |
} |
| 275 |
} |
| 276 |
|
| 277 |
// カレンダーを描画する |
| 278 |
|
| 279 |
JKL.Calendar.prototype.write = function () { |
| 280 |
var date = new Date(); |
| 281 |
if ( ! this.date ) this.initDate(); |
| 282 |
date.setTime( this.date.getTime() ); |
| 283 |
|
| 284 |
var year = date.getFullYear(); // 指定年 |
| 285 |
var mon = date.getMonth(); // 指定月 |
| 286 |
var today = date.getDate(); // 指定日 |
| 287 |
var form1 = this.getFormElement(); |
| 288 |
|
| 289 |
// 選択可能な日付範囲 |
| 290 |
var min; |
| 291 |
if ( this.min_date ) { |
| 292 |
var tmp = new Date( this.min_date.getFullYear(), |
| 293 |
this.min_date.getMonth(), this.min_date.getDate() ); |
| 294 |
min = tmp.getTime(); |
| 295 |
} |
| 296 |
var max; |
| 297 |
if ( this.max_date ) { |
| 298 |
var tmp = new Date( this.max_date.getFullYear(), |
| 299 |
this.max_date.getMonth(), this.max_date.getDate() ); |
| 300 |
max = tmp.getTime(); |
| 301 |
} |
| 302 |
|
| 303 |
// 直前の月曜日まで戻す |
| 304 |
date.setDate(1); // 1日に戻す |
| 305 |
var wday = date.getDay(); // 曜日 日曜(0)〜土曜(6) |
| 306 |
|
| 307 |
// 2006.11.15 MOM 表示開始曜日を可変にしたので、ロジックちょっといじりますよ |
| 308 |
if ( wday != this.start_day ) { |
| 309 |
date.setTime( date.getTime() - (24*3600*1000)*((wday-this.start_day+7)%7) ); |
| 310 |
} |
| 311 |
/* |
| 312 |
if ( wday != 1 ) { |
| 313 |
if ( wday == 0 ) wday = 7; |
| 314 |
date.setTime( date.getTime() - (24*3600*1000)*(wday-1) ); |
| 315 |
} |
| 316 |
*/ |
| 317 |
|
| 318 |
// 最大で7日×6週間=42日分のループ |
| 319 |
var list = new Array(); |
| 320 |
for( var i=0; i<42; i++ ) { |
| 321 |
var tmp = new Date(); |
| 322 |
tmp.setTime( date.getTime() + (24*3600*1000)*i ); |
| 323 |
if ( i && i%7==0 && tmp.getMonth() != mon ) break; |
| 324 |
list[list.length] = tmp; |
| 325 |
} |
| 326 |
|
| 327 |
// スタイルシートを生成する |
| 328 |
var month_table_style = 'width: 100%; '; |
| 329 |
month_table_style += 'background: '+this.style.frame_color+'; '; |
| 330 |
month_table_style += 'border: 1px solid '+this.style.frame_color+';'; |
| 331 |
|
| 332 |
var week_table_style = 'width: 100%; '; |
| 333 |
week_table_style += 'background: '+this.style.day_bgcolor+'; '; |
| 334 |
week_table_style += 'border-left: 1px solid '+this.style.frame_color+'; '; |
| 335 |
week_table_style += 'border-right: 1px solid '+this.style.frame_color+'; '; |
| 336 |
|
| 337 |
var days_table_style = 'width: 100%; '; |
| 338 |
days_table_style += 'background: '+this.style.day_bgcolor+'; '; |
| 339 |
days_table_style += 'border: 1px solid '+this.style.frame_color+'; '; |
| 340 |
|
| 341 |
var month_td_style = ""; |
| 342 |
// 2007.02.04 MOM TDタグも背景色のスタイルを明示的に指定する |
| 343 |
month_td_style += 'background: '+this.style.frame_color+'; '; |
| 344 |
month_td_style += 'font-size: '+this.style.font_size+'; '; |
| 345 |
month_td_style += 'color: '+this.style.month_color+'; '; |
| 346 |
month_td_style += 'padding: 4px 0px 2px 0px; '; |
| 347 |
month_td_style += 'text-align: center; '; |
| 348 |
month_td_style += 'font-weight: bold;'; |
| 349 |
|
| 350 |
var week_td_style = ""; |
| 351 |
// 2007.02.04 MOM TDタグも背景色のスタイルを明示的に指定する |
| 352 |
week_td_style += 'background: '+this.style.day_bgcolor+'; '; |
| 353 |
week_td_style += 'font-size: '+this.style.font_size+'; '; |
| 354 |
week_td_style += 'padding: 2px 0px 2px 0px; '; |
| 355 |
week_td_style += 'font-weight: bold;'; |
| 356 |
week_td_style += 'text-align: center;'; |
| 357 |
|
| 358 |
var days_td_style = ""; |
| 359 |
// 2007.02.04 MOM TDタグも背景色のスタイルを明示的に指定する |
| 360 |
days_td_style += 'background: '+this.style.day_bgcolor+'; '; |
| 361 |
days_td_style += 'font-size: '+this.style.font_size+'; '; |
| 362 |
days_td_style += 'padding: 1px; '; |
| 363 |
days_td_style += 'text-align: center; '; |
| 364 |
days_td_style += 'font-weight: bold;'; |
| 365 |
|
| 366 |
var days_unselectable = "font-weight: normal;"; |
| 367 |
|
| 368 |
// HTMLソースを生成する |
| 369 |
var src1 = ""; |
| 370 |
|
| 371 |
// 2006.11.23 MOM 邪魔な<select>への応急処置その1 |
| 372 |
// テーブルをdivで囲んで上位レイヤに設定(z-indexの値を大きくしておく) |
| 373 |
// 2006.11.27 MOM 描画フィールドの高さを取得するため、idをセットしておく |
| 374 |
src1 += '<div id="'+this.eid+'_screen" style="position:relative;z-index:'+(this.zindex+1)+';">\n'; |
| 375 |
|
| 376 |
src1 += '<table border="0" cellpadding="0" cellspacing="0" style="'+month_table_style+'"><tr>'; |
| 377 |
src1 += '<td id="__'+this.eid+'_btn_prev" title="前の月へ" style="'+month_td_style+'">≪</td>'; |
| 378 |
src1 += '<td style="'+month_td_style+'"> </td>'; |
| 379 |
// 2006.12.04 ksuzu 表示月をクリックすると現在の月に移動 |
| 380 |
src1 += '<td id="__'+this.eid+'_btn_today" style="'+month_td_style+'">'+(year)+'年 '+(mon+1)+'月</td>'; |
| 381 |
// src1 += '<td style="'+month_td_style+'">'+(year)+'年 '+(mon+1)+'月</td>'; |
| 382 |
src1 += '<td id="__'+this.eid+'_btn_close" title="閉じる" style="'+month_td_style+'">×</td>'; |
| 383 |
src1 += '<td id="__'+this.eid+'_btn_next" title="次の月へ" style="'+month_td_style+'">≫</td>'; |
| 384 |
src1 += "</tr></table>\n"; |
| 385 |
src1 += '<table border="0" cellpadding="0" cellspacing="0" style="'+week_table_style+'"><tr>'; |
| 386 |
|
| 387 |
// 2006.11.15 MOM 表示開始曜日start_dayから順に一週間分表示する |
| 388 |
for(var i = this.start_day; i < this.start_day + 7; i++){ |
| 389 |
var _wday = i%7; |
| 390 |
if(_wday == 0){ |
| 391 |
src1 += '<td style="color: '+this.style.sunday_color+'; '+week_td_style+'">日</td>'; |
| 392 |
}else if(_wday == 6){ |
| 393 |
src1 += '<td style="color: '+this.style.saturday_color+'; '+week_td_style+'">土</td>'; |
| 394 |
}else{ |
| 395 |
src1 += '<td style="color: '+this.style.weekday_color+'; '+week_td_style+'">'; |
| 396 |
if(_wday == 1) src1 += '月</td>'; |
| 397 |
else if(_wday == 2) src1 += '火</td>'; |
| 398 |
else if(_wday == 3) src1 += '水</td>'; |
| 399 |
else if(_wday == 4) src1 += '木</td>'; |
| 400 |
else if(_wday == 5) src1 += '金</td>'; |
| 401 |
} |
| 402 |
} |
| 403 |
/* |
| 404 |
src1 += '<td style="color: '+this.style.weekday_color+'; '+week_td_style+'">月</td>'; |
| 405 |
src1 += '<td style="color: '+this.style.weekday_color+'; '+week_td_style+'">火</td>'; |
| 406 |
src1 += '<td style="color: '+this.style.weekday_color+'; '+week_td_style+'">水</td>'; |
| 407 |
src1 += '<td style="color: '+this.style.weekday_color+'; '+week_td_style+'">木</td>'; |
| 408 |
src1 += '<td style="color: '+this.style.weekday_color+'; '+week_td_style+'">金</td>'; |
| 409 |
src1 += '<td style="color: '+this.style.saturday_color+'; '+week_td_style+'">土</td>'; |
| 410 |
src1 += '<td style="color: '+this.style.sunday_color+'; '+week_td_style+'">日</td>'; |
| 411 |
*/ |
| 412 |
|
| 413 |
src1 += "</tr></table>\n"; |
| 414 |
src1 += '<table border="0" cellpadding="0" cellspacing="0" style="'+days_table_style+'">'; |
| 415 |
|
| 416 |
var curutc; |
| 417 |
if ( form1 && form1.value ) { |
| 418 |
var splt = form1.value.split(this.spliter); |
| 419 |
if ( splt[0] > 0 && splt[2] > 0 ) { |
| 420 |
var curdd = new Date( splt[0]-0, splt[1]-1, splt[2]-0 ); |
| 421 |
curutc = curdd.getTime(); // フォーム上の当日 |
| 422 |
} |
| 423 |
} |
| 424 |
|
| 425 |
//2006.11.23 MOM 今日日付を取得し、時分秒を切り捨てる |
| 426 |
var realdd = new Date(); |
| 427 |
var realutc = (new Date(realdd.getFullYear(),realdd.getMonth(),realdd.getDate())).getTime(); |
| 428 |
|
| 429 |
for ( var i=0; i<list.length; i++ ) { |
| 430 |
var dd = list[i]; |
| 431 |
var ww = dd.getDay(); |
| 432 |
var mm = dd.getMonth(); |
| 433 |
|
| 434 |
if ( ww == this.start_day ) { |
| 435 |
src1 += "<tr>"; // 表示開始曜日の前に行頭 |
| 436 |
} |
| 437 |
/* |
| 438 |
if ( ww == 1 ) { |
| 439 |
src1 += "<tr>"; // 月曜日の前に行頭 |
| 440 |
} |
| 441 |
*/ |
| 442 |
|
| 443 |
var cc = days_td_style; |
| 444 |
var utc = dd.getTime(); |
| 445 |
|
| 446 |
if ( mon == mm ) { |
| 447 |
|
| 448 |
//2006.11.23 MOM 最初に今日日付かどうかをチェックする |
| 449 |
//※当月でない場合にも色変えると選択できそうに見えて紛らわしいので、当月かつ今日日付の場合のみ色を変える |
| 450 |
if ( utc == realutc ){ |
| 451 |
cc += "color: "+this.style.today_color+";"; // 今日日付 |
| 452 |
} else |
| 453 |
|
| 454 |
if ( ww == 0 ) { |
| 455 |
cc += "color: "+this.style.sunday_color+";"; // 当月の日曜日 |
| 456 |
} else if ( ww == 6 ) { |
| 457 |
cc += "color: "+this.style.saturday_color+";"; // 当月の土曜日 |
| 458 |
} else { |
| 459 |
cc += "color: "+this.style.weekday_color+";"; // 当月の平日 |
| 460 |
} |
| 461 |
} else { |
| 462 |
cc += "color: "+this.style.others_color+";"; // 前月末と翌月初の日付 |
| 463 |
} |
| 464 |
|
| 465 |
//2006.11.23 MOM utcの変数宣言を↑に移動 |
| 466 |
// var utc = dd.getTime(); |
| 467 |
|
| 468 |
// 2006.11.30 MOM 選択可能な曜日指定の条件追加 |
| 469 |
// if (( min && min > utc ) || ( max && max < utc )) { |
| 470 |
if (( min && min > utc ) || ( max && max < utc ) || ( !this.selectable_days[dd.getDay()] )) { |
| 471 |
cc += days_unselectable; |
| 472 |
} |
| 473 |
if ( utc == curutc ) { // フォーム上の当日 |
| 474 |
cc += "background: "+this.style.day_hover_bgcolor+";"; |
| 475 |
} |
| 476 |
// 2006.11.30 MOM 今日日付の背景色 |
| 477 |
else if ( mon == mm && utc == realutc ) { |
| 478 |
cc += "background: "+this.style.today_bgcolor+";"; |
| 479 |
} |
| 480 |
// 2006.11.30 MOM 選択不可能な日付の背景色 |
| 481 |
else if (( min && min > utc ) || ( max && max < utc ) || ( !this.selectable_days[dd.getDay()] )) { |
| 482 |
cc += 'background: '+this.style.unselectable_day_bgcolor+';'; |
| 483 |
} |
| 484 |
|
| 485 |
//2006.11.23 MOM 枠線描画を追加 |
| 486 |
if ( this.draw_border ){ |
| 487 |
if ( mon == mm && utc == realutc ){ |
| 488 |
cc += "border:solid 1px "+this.style.today_border_color+";"; // 当月かつ今日日付 |
| 489 |
} else { |
| 490 |
cc += "border:solid 1px "+this.style.others_border_color+";"; // その他 |
| 491 |
} |
| 492 |
} |
| 493 |
|
| 494 |
var ss = this.getDateYMD(dd); |
| 495 |
var tt = dd.getDate(); |
| 496 |
|
| 497 |
src1 += '<td style="'+cc+'" title='+ss+' id="__'+this.eid+'_td_'+ss+'">'+tt+'</td>'; |
| 498 |
|
| 499 |
if ( ww == (this.start_day+6)%7 ) { |
| 500 |
src1 += "</tr>\n"; // 表示開始曜日の1つ手前で行末 |
| 501 |
} |
| 502 |
/* |
| 503 |
if ( ww == 7 ) { |
| 504 |
src1 += "</tr>\n"; // 土曜日の後に行末 |
| 505 |
} |
| 506 |
*/ |
| 507 |
} |
| 508 |
src1 += "</table>\n"; |
| 509 |
|
| 510 |
src1 += '</div>\n'; |
| 511 |
|
| 512 |
// カレンダーを書き換える |
| 513 |
var cal1 = this.getCalendarElement(); |
| 514 |
if ( ! cal1 ) return; |
| 515 |
cal1.style.width = this.style.frame_width; |
| 516 |
cal1.style.position = "absolute"; |
| 517 |
cal1.innerHTML = src1; |
| 518 |
|
| 519 |
|
| 520 |
// 2006.11.23 MOM 邪魔な<select>への応急処置その2 |
| 521 |
// カレンダーと全く同じサイズのIFRAMEを生成し、座標を一致させて下位レイヤに描画する |
| 522 |
|
| 523 |
// IFRAME対応が可能なバージョンのみ処置を施す |
| 524 |
var ua = navigator.userAgent; |
| 525 |
if( ua.indexOf("MSIE 5.5") >= 0 || ua.indexOf("MSIE 6") >= 0 ){ |
| 526 |
|
| 527 |
// 2006.11.27 MOM 先にinnerHTMLにカレンダーの実体を渡しておいて、描画フィールドの高さを取得する |
| 528 |
// ※hide()が呼ばれた直後だと、offsetHeightが0になってしまうので、一時的にshowを呼ぶ |
| 529 |
this.show(); |
| 530 |
var screenHeight = cal1.document.getElementById(this.eid+"_screen").offsetHeight; |
| 531 |
this.hide(); |
| 532 |
|
| 533 |
src1 += '<div style="position:absolute;z-index:'+this.zindex+';top:0px;left:0px;">'; |
| 534 |
src1 += '<iframe /?scid="dummy.htm" frameborder=0 scrolling=no width='+this.style.frame_width+' height='+screenHeight+'></iframe>'; |
| 535 |
src1 += '</div>\n'; |
| 536 |
|
| 537 |
//改めてinnerHTMLにセット |
| 538 |
cal1.innerHTML = src1; |
| 539 |
} |
| 540 |
|
| 541 |
|
| 542 |
|
| 543 |
// イベントを登録する |
| 544 |
var __this = this; |
| 545 |
var get_src = function (ev) { |
| 546 |
ev = ev || window.event; |
| 547 |
var src = ev.target || ev.srcElement; |
| 548 |
return src; |
| 549 |
}; |
| 550 |
var month_onmouseover = function (ev) { |
| 551 |
var src = get_src(ev); |
| 552 |
src.style.color = __this.style.month_hover_color; |
| 553 |
src.style.background = __this.style.month_hover_bgcolor; |
| 554 |
}; |
| 555 |
var month_onmouseout = function (ev) { |
| 556 |
var src = get_src(ev); |
| 557 |
src.style.color = __this.style.month_color; |
| 558 |
src.style.background = __this.style.frame_color; |
| 559 |
}; |
| 560 |
var day_onmouseover = function (ev) { |
| 561 |
var src = get_src(ev); |
| 562 |
src.style.background = __this.style.day_hover_bgcolor; |
| 563 |
}; |
| 564 |
var day_onmouseout = function (ev) { |
| 565 |
var src = get_src(ev); |
| 566 |
// 2006.11.30 MOM 当月かつ今日日付であれば、今日日付用の背景色を適用 |
| 567 |
var today = new Date(); |
| 568 |
if( today.getMonth() == __this.date.getMonth() && src.id == '__'+__this.eid+'_td_'+__this.getDateYMD(today) ){ |
| 569 |
src.style.background = __this.style.today_bgcolor; |
| 570 |
}else{ |
| 571 |
src.style.background = __this.style.day_bgcolor; |
| 572 |
} |
| 573 |
}; |
| 574 |
var day_onclick = function (ev) { |
| 575 |
var src = get_src(ev); |
| 576 |
var srcday = src.id.substr(src.id.length-10); |
| 577 |
__this.setFormValue( srcday ); |
| 578 |
__this.fadeOut( 1.0 ); |
| 579 |
}; |
| 580 |
|
| 581 |
// |
| 582 |
// 2006.12.04 ksuzu 選択できない月へのリンクは作成しない |
| 583 |
// |
| 584 |
// 前の月へボタン |
| 585 |
var tdprev = document.getElementById( "__"+this.eid+"_btn_prev" ); |
| 586 |
//前の月の最終日 |
| 587 |
var tmpDate = new Date(year,mon,1); |
| 588 |
tmpDate.setTime( tmpDate.getTime() - (24*3600*1000) ); |
| 589 |
//選択可能な日がある? |
| 590 |
if ( !min || this.min_date <= tmpDate ){ |
| 591 |
tdprev.style.cursor = this.style.cursor; |
| 592 |
this.addEvent( tdprev, "mouseover", month_onmouseover ); |
| 593 |
this.addEvent( tdprev, "mouseout", month_onmouseout ); |
| 594 |
this.addEvent( tdprev, "click", function(){ __this.moveMonth( -1 ); }); |
| 595 |
} |
| 596 |
//選択不可能 |
| 597 |
else{ |
| 598 |
tdprev.title = "前の月は選択できません"; |
| 599 |
} |
| 600 |
/* |
| 601 |
tdprev.style.cursor = this.style.cursor; |
| 602 |
this.addEvent( tdprev, "mouseover", month_onmouseover ); |
| 603 |
this.addEvent( tdprev, "mouseout", month_onmouseout ); |
| 604 |
this.addEvent( tdprev, "click", function(){ __this.moveMonth( -1 ); }); |
| 605 |
2006.12.04 ksuzu */ |
| 606 |
|
| 607 |
// |
| 608 |
// 2006.12.04 ksuzu 表示月をクリックすると現在の月に移動 |
| 609 |
// |
| 610 |
var nMov = (realdd.getFullYear() - year) * 12 + (realdd.getMonth() - mon); |
| 611 |
if ( nMov != 0 ){ |
| 612 |
// 現在の月へボタン |
| 613 |
var tdtoday = document.getElementById( "__"+this.eid+"_btn_today" ); |
| 614 |
tdtoday.style.cursor = this.style.cursor; |
| 615 |
tdtoday.title = "現在の月へ"; |
| 616 |
this.addEvent( tdtoday, "mouseover", month_onmouseover ); |
| 617 |
this.addEvent( tdtoday, "mouseout", month_onmouseout ); |
| 618 |
this.addEvent( tdtoday, "click", function(){ __this.moveMonth( nMov ); }); |
| 619 |
} |
| 620 |
|
| 621 |
// 閉じるボタン |
| 622 |
var tdclose = document.getElementById( "__"+this.eid+"_btn_close" ); |
| 623 |
tdclose.style.cursor = this.style.cursor; |
| 624 |
this.addEvent( tdclose, "mouseover", month_onmouseover ); |
| 625 |
this.addEvent( tdclose, "mouseout", month_onmouseout ); |
| 626 |
|
| 627 |
// |
| 628 |
// 2006.12.04 ksuzu カレンダーの初期表示を戻す |
| 629 |
// |
| 630 |
this.addEvent( tdclose, "click", function(){ __this.getFormValue(); __this.hide(); }); |
| 631 |
// this.addEvent( tdclose, "click", function(){ __this.hide(); }); |
| 632 |
|
| 633 |
// |
| 634 |
// 2006.12.04 ksuzu 選択できない月へのリンクは作成しない |
| 635 |
// |
| 636 |
// 次の月へボタン |
| 637 |
var tdnext = document.getElementById( "__"+this.eid+"_btn_next" ); |
| 638 |
//次の月の初日 |
| 639 |
var tmpDate = new Date(year,mon,1); |
| 640 |
tmpDate.setTime( tmpDate.getTime() + (24*3600*1000)*32 ); |
| 641 |
tmpDate.setDate(1); |
| 642 |
//選択可能な日がある? |
| 643 |
if ( !max || this.max_date >= tmpDate ){ |
| 644 |
tdnext.style.cursor = this.style.cursor; |
| 645 |
this.addEvent( tdnext, "mouseover", month_onmouseover ); |
| 646 |
this.addEvent( tdnext, "mouseout", month_onmouseout ); |
| 647 |
this.addEvent( tdnext, "click", function(){ __this.moveMonth( +1 ); }); |
| 648 |
} |
| 649 |
//選択不可能 |
| 650 |
else{ |
| 651 |
tdnext.title = "次の月は選択できません"; |
| 652 |
} |
| 653 |
/* |
| 654 |
tdnext.style.cursor = this.style.cursor; |
| 655 |
this.addEvent( tdnext, "mouseover", month_onmouseover ); |
| 656 |
this.addEvent( tdnext, "mouseout", month_onmouseout ); |
| 657 |
this.addEvent( tdnext, "click", function(){ __this.moveMonth( +1 ); }); |
| 658 |
2006.12.04 ksuzu */ |
| 659 |
|
| 660 |
// セルごとのイベントを登録する |
| 661 |
for ( var i=0; i<list.length; i++ ) { |
| 662 |
var dd = list[i]; |
| 663 |
if ( mon != dd.getMonth() ) continue; // 今月のセルにのみ設定する |
| 664 |
|
| 665 |
var utc = dd.getTime(); |
| 666 |
if ( min && min > utc ) continue; // 昔過ぎる |
| 667 |
if ( max && max < utc ) continue; // 未来過ぎる |
| 668 |
if ( utc == curutc ) continue; // フォーム上の当日 |
| 669 |
// 2006.11.30 MOM 選択可能な曜日指定対応 |
| 670 |
if ( !this.selectable_days[dd.getDay()] ) continue; |
| 671 |
|
| 672 |
var ss = this.getDateYMD(dd); |
| 673 |
var cc = document.getElementById( "__"+this.eid+"_td_"+ss ); |
| 674 |
if ( ! cc ) continue; |
| 675 |
|
| 676 |
cc.style.cursor = this.style.cursor; |
| 677 |
this.addEvent( cc, "mouseover", day_onmouseover ); |
| 678 |
this.addEvent( cc, "mouseout", day_onmouseout ); |
| 679 |
this.addEvent( cc, "click", day_onclick ); |
| 680 |
} |
| 681 |
|
| 682 |
// 表示する |
| 683 |
this.show(); |
| 684 |
}; |
| 685 |
|
| 686 |
// 旧バージョン互換(typo) |
| 687 |
JKL.Calendar.prototype.getCalenderElement = JKL.Calendar.prototype.getCalendarElement; |
| 688 |
JKL.Calender = JKL.Calendar; |