Develop and Download Open Source Software

Browse Subversion Repository

Annotation of /js/jkl-calendar_20070204_SSL.js

Parent Directory Parent Directory | Revision Log Revision Log


Revision 4 - (hide 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 berupon 4 // ========================================================
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