カレンダーダイアリー
ver.2.1
　
　◆サンプル

　サンプルページはこちらをクリックしてください。
 
　 　 ＜機能と特徴＞
　
　・カレンダー表示機能付きの日記帳です。
　
　・日付をクリックするとその日の日記だけが表示されます。
 



 


公開日 2002.7.25
最終更新日 2003.7.20
バージョン ver.2.1
動作確認 IE6.0,NN4.7,NN7.1,Opera7.2
cookie 不使用
CSS 使用
更新履歴 2003.7.20 ver2.0 スクリプトの簡略化(変更点：ソース全般)
2003.8.12 ver2.1 NN4での動作を修正
設定の間違いを修正(変更点：ソース１)
2004.2.10 ver2.2 NN6以上での動作を修正(変更点：ソース１)
 

☆★☆使い方☆★☆
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．カスタマイズフォームを使って設定をしてください。

２．ソース１を<head>〜</head>の間に書き込んでください。

３．ソース２を<body>〜</body>の間の
　　日記とカレンダーを表示したい位置に書き込んでください。

４．ソース２の下から６行目の<div>〜</div>の間に
　　適当な文字を書き込んでください。

５．ブラウザでテストしてみてください。
　　正常に動作すれば設置は完了です。
　　日記の書き方は下記の補足説明を見てください。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．ソース１を<head>〜</head>の間に書き込んでください

２．ソース２を<body>〜</body>の間の
　　日記とカレンダーを表示したい場所に書き込んでください。

３．ソース２の下から６行目の<div>〜</div>の間に
　　適当な文字を書き込んでください。

４．ブラウザでテストしてみてください。
　　正常に動作すれば設置は完了です。
　　日記の書き方は下記の補足説明を見てください。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 
 
■ダウンロードする形式を選択してください。

  【スクリプトを１つのページに組み込む】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押してファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は一括)】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押して外部ファイルをダウンロードしてください。
 
３．保存した外部ファイルのファイル名を入力してください。
　　 (ファイルのパスでも可)
 
４．右のボタンを押してHTMLファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は各ページ毎)】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。
 
２．右のボタンを押して外部ファイルをダウンロードしてください。
 
３．保存した外部ファイルのファイル名を入力してください。
　　 (ファイルのパスでも可)
 
４．右のボタンを押してHTMLファイルをダウンロードしてください。
 
５．複数のページが必要な場合は、カスタマイズフォームで設定をし
　　再度HTMLファイルのみダウンロードしてください。
 

 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
*カレンダー部の各部の呼び方
　設置後の日記の書き方などは補足説明をご覧ください。
年(西暦)： (半角数字：正の整数)
月：
カレンダー上部の背景色： (RGB値,色名)
カレンダー下部の背景色： (RGB値,色名)
今日の日付の背景色： (RGB値,色名)
年月表示の左側： (タグ可)
年月表示の右側： (タグ可)
カレンダー下部の文字： (タグ可)
カレンダーの表示位置： 　
カレンダーの表示位置調節(横方向)： (半角数字：整数)
カレンダーの表示位置調節(縦方向)： (半角数字：整数)
日記の表示位置調節(横方向)： (半角数字：整数)
日記の表示位置調節(縦方向)： (半角数字：整数)
祝日の数：
祝日の日付(日)：
曜日表示(日)：
曜日表示(月)：
曜日表示(火)：
曜日表示(水)：
曜日表示(木)：
曜日表示(金)：
曜日表示(土)：
 【カレンダー部色設定】 
カレンダー上部の年月： (RGB値,色名)
日曜の曜日表示： (RGB値,色名)
土曜の曜日表示： (RGB値,色名)
平日の曜日表示： (RGB値,色名)
日曜日の日付： (RGB値,色名)
土曜日の日付： (RGB値,色名)
平日の日付： (RGB値,色名)
祝日： (RGB値,色名)
カレンダー下部： (RGB値,色名)
 【カレンダー部サイズ設定】 
カレンダー上部の年月： (半角数字：正の整数)
曜日表示： (半角数字：正の整数)
日付： (半角数字：正の整数)
カレンダー下部： (半角数字：正の整数)
　
 カスタマイズフォーム   補足説明   改造方法 
 
■カレンダーの各部の呼び方

 
■日記の書き方

　日記を書く時はソース２の１０行目〜４１行目までの
　<div>〜</div>の間に書いてください。
　具体的には<div>のid属性の数字を見て
　書きたい日付のところに書いてください。
　例えば１日の日記を書きたいなら<div id="d_nikki1">〜</div>の間、
　２日の日記を書きたいなら<div id="d_nikki2">〜</div>の間に書きこむといった要領です。 
<div id="d_nikki3">
７月３日(木)<br><br>
今日も暑い日だった。
</div>
 
 カスタマイズフォーム   補足説明   改造方法 
 

■日記を書く年月を設定する。(半角数字：正の整数)

　//設定〜//ここまでの１〜２行目を変更してください。
　１行目が年(西暦で)、２行目が月になります。
　基本的に１月単位でページを作ってください。
d_nen      = 2003;
d_tuki     = 7;
■カレンダーの各部の背景色を変更する。(RGB値,色名)

　//設定〜//ここまでの３〜５行目を変更してください。
　３行目がカレンダー上部、４行目がその下、
　５行目が今日の日付の背景色になります。
d_iro      = '#c39855';
d_iro2     = '#e1c193';
d_iro3     = '#b08340';
■カレンダーの年月表示の両端の文字を変更する。(タグ可)

　//設定〜//ここまでの６〜７行目を変更してください。
　６行目が左側、７行目が右側の文字です。
　前の月や次の月に移動するリンクを張るのも１つの方法ですね。 
d_mae      = '■';
d_tugi     = '■';
■カレンダーの下に表示される文字を変更する。(タグ可)

　//設定〜//ここまでの８行目を変更してください。
d_link     = 'ダイアリー';
■カレンダーの表示位置を変更する。

　//設定〜//ここまでの９行目を変更してください。
　ここでは右側に表示するか左側に表示するかを指定します。
　右ならright、左ならleftを書き込んでください。 
d_iti      = 'left';
■カレンダーの表示位置を調節する。(CSS構文)

　//設定〜//ここまでの１０〜１１行目を変更してください。
　カレンダーの上及び右(もしくは左)の余白を指定します。
　単位はスタイルシートで使えるものにしてください。 
d_iti_x    = '20px'= '
  ■日記の表示位置を調節する。(CSS構文)


  　//設定〜//ここまでの１２〜１３行目を変更してください。

  　日記の上及び右(もしくは左)の余白を指定します。

  　単位はスタイルシートで使えるものにしてください。

d_diary_x    = '20px';
d_diary_y    = '20px';

  ■祝日を設定する。(半角数字：正の整数)


  　//設定〜//ここまでの１６行目を変更してください。

  　祝日の日付を書き込んでください。

d_shu[1] = '21';

  ■曜日表示を設定する。


  　//設定〜//ここまでの１９行目〜２５行目を変更してください。

  　上から順に日、月、火、水、木、金、土と並んでいます。

d_days[0] = 'sun';
d_days[1] = 'mon';
d_days[2] = 'tue';
d_days[3] = 'wed';
d_days[4] = 'thu';
d_days[5] = 'fri';
d_days[6] = 'sat';

  ■カレンダー部の各文字色を変更する。(RGB値,色名)


  　//設定〜//ここまでの２８行目〜３６行目を変更してください。

  　上から順にカレンダー上部の年月、日曜の曜日表示、土曜の曜日表示、平日の曜日表示、

  　日曜日の日付、土曜日の日付、平日の日付、祝日、カレンダー下部と並んでいます。


d_title = '#ffffff';
d_sun2  = '#ff0000';
d_sat2  = '#0000ff';
d_week2 = '#000000';
d_sun   = '#ff0000';
d_sat   = '#0000ff';
d_week  = '#fdf7ef';
d_shuku = '#ff0000';
d_copy  = '#000000';

  ■カレンダー部の文字サイズを変更する。(CSS構文)


  　//設定〜//ここまでの３９行目〜４２行目を変更してください。

  　上から順にカレンダー上部の年月、曜日表示、日付、カレンダー下部と並んでいます。


d_title_s = '100%';
d_day_s   = '86%';
d_date_s  = '100%';
d_copy_s  = '86%';
 
 
  

■ソース１(以下のソースを<head>〜</head>の間に書き込んでください)  
  
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
    //ver.2.1


d_days = new Array();
d_shu = new Array();


//設定
d_nen      = 2004;         //カレンダー年(西暦)
d_tuki     = 1;            //カレンダー月
d_iro      = '#c39855';    //カレンダーの上部の色
d_iro2     = '#e1c193';    //カレンダーの下部の色
d_iro3     = '#b08340';    //今日の日付の色
d_mae      = '■';         //年月表示の左側
d_tugi     = '■';         //年月表示の右側
d_link     = 'ダイアリー'; //カレンダー下部
d_iti      = 'right';      //カレンダーの表示位置
d_iti_x    = '20px';       //カレンダーの表示位置調節(横方向)
d_iti_y    = '20px';       //カレンダーの表示位置調節(縦方向)
d_diary_x  = '20px';       //日記の表示位置調節(横方向)
d_diary_y  = '20px';       //日記の表示位置調節(縦方向)


//祝日
d_shu[1] = '';


//曜日表示(上から日〜土)
d_days[0] = 'sun';
d_days[1] = 'mon';
d_days[2] = 'tue';
d_days[3] = 'wed';
d_days[4] = 'thu';
d_days[5] = 'fri';
d_days[6] = 'sat';


//カレンダー部色設定
d_title = '#ffffff'; //カレンダー上部の年月
d_sun2  = '#ff0000'; //日曜の曜日表示
d_sat2  = '#0000ff'; //土曜の曜日表示
d_week2 = '#000000'; //平日の曜日表示
d_sun   = '#ff0000'; //日曜日の日付
d_sat   = '#0000ff'; //土曜日の日付
d_week  = '#fdf7ef'; //平日の日付
d_shuku = '#ff0000'; //祝日
d_copy  = '#000000'; //カレンダー下部


//カレンダー部サイズ設定
d_title_s = '100%'; //カレンダー上部の年月
d_day_s   = '86%';  //曜日表示
d_date_s  = '100%'; //日付
d_copy_s  = '86%';  //カレンダー下部
//ここまで


function calender_diary()
{d_now   = new Date();
 d_year  = d_now.getYear();
 d_month = d_now.getMonth()+1;
 d_date  = d_now.getDate();
 d_links = 0;


 if(d_year < 2000)
 {d_year += 1900;}


 d_day = new Date(d_nen+"/"+d_tuki+"/1");
 d_day = 0-d_day.getDay()+1;


 for(i=31;i>=28;i--)
 {d_misoka = new Date(d_nen+"/"+d_tuki+"/"+i);
  if(d_misoka.getDate()==i)
  {d_misoka=i;break;}}


 d_cal  = '<br><table border="0" cellspacing="0" cellpadding="0" align="'+d_iti+'">\n<tr>\n<td width="15"></td>\n';
 d_cal += '<td><table border="0" cellspacing="0" cellpadding="2">\n<tr>\n';
 d_cal += '<td bgcolor="'+d_iro+'" colspan="7" align="center" class="d_title">'+d_mae+' '+d_nen+'年'+d_tuki+'月 '+d_tugi+'</td>\n</tr><tr>\n';
 for(i=0;i<7;i++)
 {if(i==0)
  {d_cal += '<td bgcolor="'+d_iro+'" width="18" align="center" class="d_sun2">'+d_days[i]+'</td>\n';}
  else if(i>=1 && i<=5)
  {d_cal += '<td bgcolor="'+d_iro+'" width="18" align="center" class="d_week2">'+d_days[i]+'</td>\n';}
  else if(i==6)
  {d_cal += '<td bgcolor="'+d_iro+'" width="18" align="center" class="d_sat2">'+d_days[i]+'</td>\n';}}
 d_cal += '\n</tr>';


 while(d_day <=d_misoka)
 {d_cal += '<tr>\n';
  for(i=0;i<7;i++)
  {if(d_day >= 1 && d_day <=d_misoka)
   {d_cal += '<td valign="bottom" align="center" bgcolor="';
    if(d_day == d_date && d_nen == d_year && d_tuki==d_month)
    {d_cal += d_iro3;}
    else
    {d_cal += d_iro2;}
    d_cal += '" width="18" height="12"';
    if(document.all)
    {if(document.all("d_nikki"+d_day))
     {d_nikki=document.all("d_nikki"+d_day).innerHTML;
      if(d_nikki)
      {d_cal += '><a href="#'+d_day+'" onClick="return diary_chenge('+d_day+')"';
       d_links = 1;}}}
    else if(document.getElementById)
    {if(document.getElementById("d_nikki"+d_day))
     {d_nikki=document.getElementById("d_nikki"+d_day).innerHTML;
      if(d_nikki)
      {d_cal += '><a href="#'+d_day+'" onClick="return diary_chenge('+d_day+')"';
       d_links = 1;}}}
    else if(document.layers)
    {if(document.layers["d_nikki"+d_day])
     {d_nikki = document.layers["d_nikki"+d_day].clip.height;
      if(d_nikki != 0)
      {d_cal += '>';
       d_cal += '<a href="#'+d_day+'" onClick="return diary_chenge('+d_day+')"';
       d_links = 1;}}}
    if(i==0)
    {d_cal +=' class="d_sun" id="d_shu'+d_day+'">';}
    else if(i==6)
    {d_cal +=' class="d_sat" id="d_shu'+d_day+'">';}
    else
    {d_cal +=' class="d_week" id="d_shu'+d_day+'">';}
    d_cal += d_day;
    if(d_links == 1)
    {d_cal += '</a>';}
    d_cal += '</td>\n';
    d_day++;
    d_links = 0;}
   else
   {d_cal +='<td bgcolor="'+d_iro2+'" class="week">　</td>\n';
    d_day++;}}
  d_cal += '</tr>';}
 d_cal += '<tr><td class="d_copy" align="center" bgcolor="'+d_iro2+'" colspan="7">'+d_link+'</td></tr>\n';
 d_cal += '</table>\n</td>\n</tr><tr>\n<td colspan="2" height="15"></td>\n</tr></table>\n';


 with(document)
 {if(document.all)
  {all("d_calender").innerHTML = d_cal;}
  else if(document.getElementById)
  {getElementById("d_calender").innerHTML = d_cal;}
  else if(document.layers)
  {layers["d_calender"].document.open();
   layers["d_calender"].document.write(d_cal);
   layers["d_calender"].document.close();
   layers["d_calender"].top += d_iti_y;
   if(d_iti == "right")
   {layers["d_calender"].left -= d_iti_x;}
   else if(d_iti == "left")
   {layers["d_calender"].left += d_iti_x;}}}}


function diary_load()
{d_temp = 0;
 with(document)
 {if(document.all)
  {for(i=36;i>0;i--)
   {if(all("d_nikki"+i))
    {if(all("d_nikki"+i).innerHTML)
     {all("d_diary").innerHTML = all("d_nikki"+i).innerHTML;
      d_temp = 1;
      break;}}}}
  else if(document.getElementById)
  {for(i=36;i>0;i--)
   {if(getElementById("d_nikki"+i))
    {if(getElementById("d_nikki"+i).innerHTML)
     {getElementById("d_diary").innerHTML = getElementById("d_nikki"+i).innerHTML;
      d_temp = 1;
      break;}}}}
  else if(document.layers)
  {for(i=36;i>0;i--)
   {if(layers["d_nikki"+i])
    {if(layers["d_nikki"+i].clip.height)
     {layers["d_nikki"+i].visibility = "visible";
      d_temp = 1;
      break;}}}}
  if(d_temp == 0)
  {setTimeout('diary_load()',300);}}}


function test_layer()
{if(!document.layers)
 {return;}
 d_cal  = '<div class="d_layer" id="d_test_layer">\n<table border="0" cellspacing="3" cellpadding="3"><tr>\n';
 d_cal += '<td class="d_sun2">'+d_days[0]+'</td>\n';
 for(i=1;i<6;i++)
 {d_cal += '<td class="d_week2">'+d_days[i]+'</td>\n';}
 d_cal += '<td class="d_sat2">'+d_days[6]+'</td>\n';
 d_cal += '</tr><tr>\n';
 for(i in d_days)
 {d_cal += '<td class="d_sun">28</td>\n';}
 d_cal += '</tr><tr>\n';
 d_cal += '<td colspan="7" class="d_copy">'+d_link+'</td>\n';
 d_cal += '</tr></table>\n</div>';
 with(document)
 {open();
  write(d_cal);
  close();
 d_width = layers["d_test_layer"].clip.width+d_iti_x;}}


function d_spacer_write()
{with(document)
 {if(document.layers)
  {open();
   write('<table border="0" cellspacing="0" cellpadding="0" align="'+d_iti+'"><tr>\n');
   write('<td width="'+d_width+'"></td>\n</tr></table>\n');
   close();}}}


function d_spacer_write2()
{with(document)
 {if(document.layers)
  {d_temp1 = 0;
   d_temp2 = 0;
   for(i=1;i<=36;i++)
   {if(layers["d_nikki"+i])
    {if(d_temp1 < layers["d_nikki"+i].clip.height)
     {d_temp1 = layers["d_nikki"+i].clip.height;}
     if(d_temp2 < layers["d_nikki"+i].clip.width)
     {d_temp2 = layers["d_nikki"+i].clip.width;}}}
   open();
   write('<table border="0" cellspacing="0" cellpadding="0"><tr>\n');
   write('<td width="'+d_temp2+'" height="'+d_temp1+'"></td>\n</tr></table>\n');
   close();}}}


function diary_chenge(ii)
{with(document)
 {if(document.all)
  {all("d_diary").innerHTML = document.all("d_nikki"+ii).innerHTML;}
  else if(document.getElementById)
  {getElementById("d_diary").innerHTML=document.getElementById("d_nikki"+ii).innerHTML;}
  else if(document.layers)
  {for(i=0;i<=33;i++)
   {if(layers["d_nikki"+i])
    {layers["d_nikki"+i].visibility="hidden";}
    if(layers["d_nikki"+ii])
    {layers["d_nikki"+ii].visibility="visible";}}}
 return false;}}


with(document)
{open();
 write('<style type="text/css">\n<!-\-\n');
 write('.d_title {color:'+d_title+';font-size:'+d_title_s+';}\n');
 write('.d_sun2  {color:'+d_sun2+';font-size:'+d_day_s+';}\n');
 write('.d_sat2  {color:'+d_sat2+';font-size:'+d_day_s+';}\n');
 write('.d_week2 {color:'+d_week2+';font-size:'+d_day_s+';}\n');
 write('.d_sun   {color:'+d_sun+';font-size:'+d_date_s+';}\n');
 write('.d_sat   {color:'+d_sat+';font-size:'+d_date_s+';}\n');
 write('.d_week  {color:'+d_week+';font-size:'+d_date_s+';}\n');
 write('a.d_sun  {color:'+d_sun+';font-size:'+d_date_s+';text-decoration:underline;}\n');
 write('a.d_sat  {color:'+d_sat+';font-size:'+d_date_s+';text-decoration:underline;}\n');
 write('a.d_week {color:'+d_week+';font-size:'+d_date_s+';text-decoration:underline;}\n');
 for(i=1;d_shu[i];i++)
 {write('#d_shu'+d_shu[i]+'{color:'+d_shuku+';}\n');}
 write('.d_copy  {color:'+d_copy+';font-size:'+d_copy_s+';}\n');
 write('.d_layer {position:absolute;visibility:hidden;}');
 if(document.all || document.getElementById)
 {write('.d_diary div{display:none;}');
  write('#d_diary   {margin-top:'+d_diary_y+';margin-left:'+d_diary_x+';}')
  write('#d_calender{margin-top:'+d_iti_y+';margin-'+d_iti+':'+d_iti_x+';}');}
 else if(document.layers)
 {write('.d_diary div{position:absolute;visibility:hidden;margin-top:'+d_diary_y+';margin-left:'+d_diary_x+';}');
  write('#d_calender {position:absolute;}');}
 write('\n-\->\n<\/style>\n')
 close();}


if(document.layers)
{onload = calender_diary;}


d_iti_x   = d_iti_x.replace("%","").replace("px","").replace("pt","").replace("pc","").replace("cm","")
d_iti_x   = d_iti_x.replace("mm","").replace("in","").replace("ex","").replace("em","")-0;
d_iti_y   = d_iti_y.replace("%","").replace("px","").replace("pt","").replace("pc","").replace("cm","")
d_iti_y   = d_iti_y.replace("mm","").replace("in","").replace("ex","").replace("em","")-0;
d_diary_x = d_diary_x.replace("%","").replace("px","").replace("pt","").replace("pc","").replace("cm","")
d_diary_x = d_diary_x.replace("mm","").replace("in","").replace("ex","").replace("em","")-0;
d_diary_y = d_diary_y.replace("%","").replace("px","").replace("pt","").replace("pc","").replace("cm","")
d_diary_y = d_diary_y.replace("mm","").replace("in","").replace("ex","").replace("em","")-0;


// -->
</script>

■ソース２(以下のソースを<body>〜<body>の間に書き込んでください)  
  
<div id="d_calender"></div>
<div id="d_diary"></div>
<div class="d_diary">
<script language="JavaScript" type="text/javascript"><!--
test_layer();
d_spacer_write();
diary_load();
// --></script>


<div id="d_nikki31"></div>
<div id="d_nikki30"></div>
<div id="d_nikki29"></div>
<div id="d_nikki28"></div>
<div id="d_nikki27"></div>
<div id="d_nikki26"></div>
<div id="d_nikki25"></div>
<div id="d_nikki24"></div>
<div id="d_nikki23"></div>
<div id="d_nikki22"></div>
<div id="d_nikki21"></div>
<div id="d_nikki20"></div>
<div id="d_nikki19"></div>
<div id="d_nikki18"></div>
<div id="d_nikki17"></div>
<div id="d_nikki16"></div>
<div id="d_nikki15"></div>
<div id="d_nikki14"></div>
<div id="d_nikki13"></div>
<div id="d_nikki12"></div>
<div id="d_nikki11"></div>
<div id="d_nikki10"></div>
<div id="d_nikki9"></div>
<div id="d_nikki8"></div>
<div id="d_nikki7"></div>
<div id="d_nikki6"></div>
<div id="d_nikki5"></div>
<div id="d_nikki4"></div>
<div id="d_nikki3"></div>
<div id="d_nikki2"></div>
<div id="d_nikki1"></div>


<script language="JavaScript" type="text/javascript"><!--
d_spacer_write2();
if(document.all || document.getElementById)
{calender_diary();}
// --></script>
</div>


■スクリプト無効時には動作はしません。
　カレンダーは表示されませんが
　日記はすべて表示されるので閲覧は可能です。
　
　スクリプト無効時のサンプル

ウェブ木箱＞サンプル集
copyright(C) 2002-2004 あう