TOP
| <html lang="ja"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> | |
| <meta http-equiv="Content-Style-Type" content="text/css"> | |
| <meta http-equiv="Content-Script-Type" content="text/javascript"> | |
| <title>JavaScript カレンダー型スケジュール帳</title> | |
| <style type="text/css"> | |
| <!-- | |
| --> | |
| </style> | |
| <script type="text/javascript"> | |
| <!-- | |
| /* 2007～2099年対応 JavaScriptカレンダー予定帳 ver. 1.5 | |
| Copyright (c) Kumiko Maeda 2004 - 2008/09/05 */ | |
| MAXEVENT = 50; //祝日＋予定最大数 | |
| SHOWWEEK = 6; //何週表示するか | |
| //表示スタイルオプション | |
| WIDTH = "80px"; //１マスの幅 <td width="***"> | |
| HEIGHT = "60px"; //１マスの高さ <tr height="***"> | |
| DEFAULT = "bordercolor='#cc8066' bgcolor='#fff9f6' style='font-size:9pt; color:#993333;'"; | |
| //枠線の色とフォントサイズ．デフォルトの背景色と文字色とかも<table ***> | |
| TODAY = "bgcolor='#e6fff6'"; //今日のセルオプション<td ***> | |
| HOLIDAY = "bgcolor='#ffe6e6'"; //日曜・祝日のセルオプション | |
| SATURDAY = "bgcolor='#e6e6ff'"; //土曜のセルオプション | |
| USUALDAY = ""; //なんでもない日のセルオプション | |
| SUN = "bgcolor='#f9d9c3' style='color:#ff0000;'"; //１列目日曜のセルオプション | |
| SAT = "bgcolor='#f9d9c3' style='color:#0000ff;'"; //１列目土曜のセルオプション | |
| MON = "bgcolor='#f9d9c3'"; //１列目月曜～金曜のセルオプション | |
| weekTable = new Array("sun","mon","tue","wed","thu","fri","sat"); //1列目 | |
| monthTable= new Array(31,28,31,30,31,30,31,31,30,31,30,31); //いじるな危険 | |
| // | |
| /*** スケジュール登録 notice *** | |
| 予定はsetSchedules()に書く． | |
| newSchedule( 年，月, 日，"td セルオプション", "予定" ); | |
| ・日 | |
| －calDate( 年, 月, 週, 曜日0(sun)..6(sat))を使えば， | |
| 第n×曜日 形式の指定も可能です． | |
| ・td セルオプション <td ここ> | |
| －指定なしは""で． | |
| －悪いがフォントカラーはスタイルシート("style='color:white'")で指定してくれ． | |
| －同じ日に複数登録したりすると効かない事があるから注意． | |
| ・"予定" | |
| －HTMLタグ使えます． | |
| ・祝日とあわせてMAXEVENT件までスケジュールを設定可能 | |
| *** notice スケジュール登録 ***/ | |
| function setSchedules(){ | |
| //サンプル予定 | |
| newSchedule( 2009, 3, 6, "", "飲み会<br>" ); | |
| newSchedule( 2009, 3, 8, "", "<div align='center' style='background-color:#ff99cc;'><font color='#660000'>映画<\/font><\/div>" ); | |
| newSchedule( 2009, 3, 24, "", "<span style='background-color:#00ffff; color:blue'>卒業式<\/span><br>" ); | |
| newSchedule( 2009, 3, calDate(2009, 3, 3, 0), "", "<font color='green'>掃除当番<\/font>" ); //4月第3日曜日 | |
| newSchedule( 2009, 3, 16, "bgcolor='#ff6699' style='color:white'", "ちーちゃん誕生日<br>" ); | |
| } | |
| //祝日いじるときはフォーマットは以下のような感じで | |
| //case 月-1: | |
| // Holiday( year, 月, 日, "祝日名<br>" ); | |
| // Holiday( year, 月, calDate( 年, 月, 週, 曜日0(sun)..6(sat)), "祝日名<br>" ); | |
| // break; | |
| function setHolliday( year, month, len ){ | |
| var i, tmp; | |
| //振替休日，国民の休日計算用領域確保 | |
| holDate = new Array(MAXEVENT); | |
| hi = 0; | |
| for(i=0; i<=len; i++){ | |
| switch( month ){ | |
| case 0: | |
| Holiday( year, 1, 1, "元日<br>" ); | |
| Holiday( year, 1, calDate(year, 1, 2, 1), "成人の日<br>" ); //1月第2月曜日 | |
| break; | |
| case 1: | |
| Holiday( year, 2, 11, "建国記念の日<br>" ); | |
| break; | |
| case 2: | |
| Holiday( year, 3, vernal(year), "春分の日<br>" ); | |
| break; | |
| case 3: | |
| Holiday( year, 4, 29, "昭和の日<br>" ); | |
| break; | |
| case 4: | |
| Holiday( year, 5, 3, "憲法記念日<br>" ); | |
| Holiday( year, 5, 4, "みどりの日<br>" ); | |
| Holiday( year, 5, 5, "こどもの日<br>" ); | |
| break; | |
| case 6: | |
| Holiday( year, 7, calDate(year, 7, 3, 1), "海の日<br>" ); //7月第3月曜日 | |
| break; | |
| case 8: | |
| Holiday( year, 9, calDate(year, 9, 3, 1), "敬老の日<br>" ); //9月第3月曜日 | |
| Holiday( year, 9, autumn(year), "秋分の日<br>" ); | |
| break; | |
| case 9: | |
| Holiday( year, 10, calDate(year, 10, 2, 1), "体育の日<br>" ); //10月第2月曜日 | |
| break; | |
| case 10: | |
| Holiday( year, 11, 3, "文化の日<br>" ); | |
| Holiday( year, 11, 23, "勤労感謝の日<br>" ); | |
| break; | |
| case 11: | |
| Holiday( year, 12, 23, "天皇誕生日<br>" ); | |
| break; | |
| } | |
| year = year + Math.floor((month+1)/12); | |
| month = (month+1)%12; | |
| } | |
| for(i=0; i<hi; i++){ | |
| if( holDate[i].getDay() == 0 ){ | |
| tmp = moveDate(holDate[i],1); | |
| i++; | |
| while( i<hi && | |
| tmp.getDate() == holDate[i].getDate() && | |
| tmp.getMonth() == holDate[i].getMonth() && | |
| tmp.getYear() == holDate[i].getYear() ){ | |
| tmp = moveDate(tmp,1); | |
| i++; | |
| } | |
| newEvent( tmp, HOLIDAY, "振替休日<br>" ); | |
| i--; | |
| } | |
| } | |
| for(i=1; i<hi; i++){ | |
| tmp = moveDate(holDate[i-1], 2); | |
| if( tmp.getDate() == holDate[i].getDate() && | |
| tmp.getMonth() == holDate[i].getMonth() && | |
| tmp.getYear() == holDate[i].getYear() ){ | |
| tmp = tmp.getDay(); | |
| if( tmp!=1 && tmp!=2 ){ | |
| tmp = moveDate(holDate[i-1], 1); | |
| newEvent( tmp, HOLIDAY, "国民の休日<br>" ); | |
| } | |
| } | |
| } | |
| } | |
| //year年month月 第week day曜日の計算 | |
| function calDate( year, month, week, day ){ | |
| var tmp, day1; | |
| tmp = new Date(year, month-1, 1); | |
| day1 = tmp.getDay(); | |
| tmp = 1 + day - day1 + week*7; | |
| if( day - day1 >= 0 ) tmp = tmp - 7; | |
| return tmp; | |
| } | |
| // 春分の日を求める(2000～2099) 確実である保証はないと思う | |
| function vernal( year ){ | |
| var tmp = Math.floor( 20.69115 + 0.242194 * (year - 2000) | |
| - Math.floor((year - 2000)/4) ); | |
| return tmp; | |
| } | |
| // 秋分の日を求める(2000～2099) 確実である保証はないと思う | |
| function autumn( year ){ | |
| var tmp = Math.floor( 23.09 + 0.242194 * (year - 2000) | |
| - Math.floor((year - 2000)/4) ); | |
| return tmp; | |
| } | |
| function newEvent( date, sel, name ){ | |
| if( si >= MAXEVENT ) return; | |
| sdlDate[si] = date; | |
| sdlSel[si] = sel; | |
| sdlName[si] = name; | |
| si++; | |
| } | |
| function newSchedule( year, month, date, sel, name ){ | |
| newEvent( new Date( year, month-1, date ), sel, name ); | |
| } | |
| function Holiday( year, month, date, name ){ | |
| var i, tmp; | |
| month--; | |
| tmp = new Date( year, month, date ); | |
| newEvent( tmp, HOLIDAY, name ); | |
| //振替休日、国民の休日計算用データ登録 | |
| if( hi >= MAXEVENT ) return; | |
| //インサーションソート | |
| for( i=hi-1; | |
| i>=0 && holDate[i].getMonth() == month && holDate[i].getDate() > date; | |
| i-- ){ | |
| holDate[i+1] = holDate[i]; | |
| } | |
| holDate[i+1] = tmp; | |
| hi++; | |
| } | |
| //dateを基準にdis日動かした日を返す | |
| function moveDate( date, dis ){ | |
| var d, m, y; | |
| d = date.getDate(); | |
| m = date.getMonth(); | |
| y = date.getFullYear(); | |
| if ( ((y%4)==0 && (y%100)!=0) || (y%400)==0 ) //うるうの判定(2000～) | |
| monthTable[1] = 29; | |
| else monthTable[1] = 28; | |
| d = d + dis; | |
| while( d > monthTable[m]){ | |
| d = d - monthTable[m]; | |
| m++; | |
| if( m > 11 ){ | |
| m=0; | |
| y++; | |
| if ( ((y%4)==0 && (y%100)!=0) || (y%400)==0 ) //うるうの判定(2000～) | |
| monthTable[1] = 29; | |
| else monthTable[1] = 28; | |
| } | |
| } | |
| while( d < 0 ){ | |
| m--; | |
| if( m < 0 ){ | |
| m=11; | |
| y--; | |
| if ( ((y%4)==0 && (y%100)!=0) || (y%400)==0 ) //うるうの判定(2000～) | |
| monthTable[1] = 29; | |
| else monthTable[1] = 28; | |
| } | |
| d = d + monthTable[m]; | |
| } | |
| return (new Date(y,m,d)); | |
| } | |
| //Main関数 | |
| function showCalendar( argDate ){ | |
| var i, j, k, tmpDate; | |
| tmp = argDate.getMonth() + 1; | |
| document.formSdlCal.dateInput.value = argDate.getFullYear() + "/" + tmp + "/" + argDate.getDate(); | |
| //スケジュール登録用領域確保 | |
| sdlDate = new Array(MAXEVENT); | |
| sdlSel = new Array(MAXEVENT); | |
| sdlName = new Array(MAXEVENT); | |
| si = 0; | |
| //覚えとく | |
| gBaseDate = argDate; | |
| //argDateの週の日曜日から表示する | |
| tmpDate = moveDate( argDate, -argDate.getDay() ); | |
| //"今日"を記憶 | |
| toDate = new Date(); | |
| //表示する可能性のある (SHOWWEEK/4)+2ヶ月先まで祝日を登録 | |
| setHolliday( tmpDate.getFullYear(), tmpDate.getMonth(), Math.floor(SHOWWEEK/4)+2 ); | |
| //スケジュールを登録 | |
| setSchedules(); | |
| //描画用コード開始 | |
| docubuf = "<table border='3' cellspacing='0' " + DEFAULT + ">"; | |
| //曜日 | |
| docubuf += "<tr>"; | |
| for(i=0; i<7; i++){ | |
| docubuf += "<td align='center' "; | |
| if(i==0) docubuf += SUN + "><strong>" + weekTable[i] + "<\/strong>"; | |
| else if(i==6) docubuf += SAT + "><strong>" + weekTable[i] + "<\/strong>"; | |
| else docubuf += MON + "><strong>" + weekTable[i] + "<\/strong>"; | |
| docubuf += "<\/td>"; | |
| } | |
| docubuf += "<\/tr>"; | |
| //日付 | |
| for(i=0; i<SHOWWEEK; i++){ | |
| docubuf += "<tr valign='top' height='" + HEIGHT + "'>"; | |
| for(j=0; j<7; j++){ | |
| docubuf += "<td width='" + WIDTH + "' "; | |
| //セル色は最後に登録したの優先． | |
| for(k=si-1; k>=0; k--) | |
| if( sdlDate[k].getDate() == tmpDate.getDate() && | |
| sdlDate[k].getMonth() == tmpDate.getMonth() && | |
| sdlDate[k].getYear() == tmpDate.getYear() && | |
| sdlSel[k] != "" | |
| ) | |
| break; | |
| //セル色設定 | |
| if( tmpDate.getDate() == toDate.getDate() && | |
| tmpDate.getMonth() == toDate.getMonth() ) | |
| docubuf += TODAY + ">"; | |
| //別に１年前の今日に色付けてもいいか | |
| else if( k >= 0 ) docubuf += sdlSel[k] + ">"; | |
| else if(j==0) docubuf += HOLIDAY + ">"; | |
| else if(j==6) docubuf += SATURDAY + ">"; | |
| else docubuf += USUALDAY + ">"; | |
| //日付表示 | |
| docubuf += "<strong>"; | |
| //年初めは年から表示 | |
| if( tmpDate.getDate()==1 && tmpDate.getMonth()==0 ) | |
| docubuf += tmpDate.getFullYear() + "/"; | |
| //最初と月初めは月から表示 | |
| if( tmpDate.getDate()==1 || (i==0 && j==0) ) | |
| docubuf += tmpDate.getMonth()+1 + "/"; | |
| //普通は日だけ表示 | |
| docubuf += tmpDate.getDate() + "<\/strong><br>"; | |
| //スケジュール埋め込み．複数あったら全部．登録順． | |
| for(k=0; k<si; k++) | |
| if( sdlDate[k].getDate() == tmpDate.getDate() | |
| && sdlDate[k].getMonth() == tmpDate.getMonth() | |
| && sdlDate[k].getYear() == tmpDate.getYear() | |
| ) | |
| docubuf += sdlName[k]; | |
| //日を進める | |
| tmpDate = moveDate( tmpDate, 1 ); | |
| docubuf += "<\/td>"; | |
| } | |
| docubuf += "<\/tr>"; | |
| } | |
| docubuf += "<\/table>"; | |
| divSdlCal.innerHTML = docubuf; | |
| } | |
| // --> | |
| </script> | |
| </head> | |
| <body bgcolor="#ffffff"> | |
| <table width="80%" align="center"><tr><td> | |
| <font size="+1"><strong>JavaScript カレンダー型スケジュール帳</strong></font><br> | |
| <br> | |
| </td></tr></table> | |
| <div align="center"> | |
| <!-- ここからカレンダー --> | |
| <div id="divSdlCal"></div> | |
| <form name="formSdlCal" action="javascript:showCalendar(new Date(document.formSdlCal.dateInput.value));"> | |
| <input type="button" value="＜＜" onclick="showCalendar(moveDate(gBaseDate,-7*(SHOWWEEK-1)))"> | |
| <input type="button" value=" ＜ " onclick="showCalendar(moveDate(gBaseDate,-7))"> | |
| <input type="button" value="今日" onclick="showCalendar(new Date())"> | |
| <input type="button" value=" ＞ " onclick="showCalendar(moveDate(gBaseDate,7))"> | |
| <input type="button" value="＞＞" onclick="showCalendar(moveDate(gBaseDate,7*(SHOWWEEK-1)))"> | |
| <br> | |
| date | |
| <input type="text" name="dateInput" value=""> | |
| <input type="button" value="表示" onclick="showCalendar(new Date(document.formSdlCal.dateInput.value))"> | |
| </form> | |
| <script type="text/javascript"><!-- | |
| // showCalendar(dateクラス 引数の例) | |
| // 今週から表示 new Date() | |
| // 2004/1/24の週から表示 new Date(2004,0,24) 月は１引く事． | |
| // 7日前の週から表示 moveDate(new Date(), -7) | |
| // 今週が最後になる moveDate(new Date(), -7*(SHOWWEEK-1)) | |
| // showCalendar(dateクラス 引数の例) | |
| showCalendar(new Date(2009,2,1)); ////スケジュール表示デモ用 | |
| //showCalendar(new Date()); ////起動時にこれで表示（1個上のかわりにこっちを使ってね） | |
| // --></script> |
このページはあなたのWikiのトップページです。自由に編集してください。
メニューの【編集】をクリックしていただき編集ができます。
管理者ログインは右上メニュー【ログイン】をクリックしていただき編集ができます。
※このページの内容はすべて削除しても問題ありません。
エディターの基本的な使い方
－ 文字を太字にできます
－ 文字を斜体文にできます
－ 文字を下線を引く事ができます
－ 文字を打ち消し文にする事ができます
－ 文字を添え字にする事ができます
－ 文字を上付き文字にする事ができます
コメント
最新を表示する
NG表示方式
NGID一覧