トップページ

ページ名：トップページ

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のトップページです。自由に編集してください。
メニューの【編集】をクリックしていただき編集ができます。

管理者ログインは右上メニュー【ログイン】をクリックしていただき編集ができます。

※このページの内容はすべて削除しても問題ありません。 

 

エディターの基本的な使い方

 太字　　　　－　文字を太字にできます
 斜体　　　　－　文字を斜体文にできます
 下線　　　　－　文字を下線を引く事ができます
 打ち消し　　－　文字を打ち消し文にする事ができます
 添字　　　　－　文字を添え字にする事ができます
 上付き文字　－　文字を上付き文字にする事ができます

ページの編集の仕方はこちら

シェアボタン： このページをSNSに投稿するのに便利です。

コメント

返信元（返信をやめる）

※ 悪質なユーザーの書き込みは制限します。
最新を表示する
NGIDの確認

NG表示方式

NGID一覧