Develop and Download Open Source Software

Browse Subversion Repository

Contents of /js/jkl-calendar_20070204_SSL.js

Parent Directory Parent Directory | Revision Log Revision Log


Revision 4 - (show annotations) (download) (as text)
Fri Dec 4 12:17:36 2009 UTC (14 years, 5 months ago) by berupon
File MIME type: application/x-javascript
File size: 27026 byte(s)
まだ完成していないけど途中経過の記録というか…backupとしてcommit
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+'">&nbsp;</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;

Back to OSDN">Back to OSDN
ViewVC Help
Powered by ViewVC 1.1.26