掲示板/JavaScript質問板/過去ログ/一覧/ カレンダーの翌月以降・先月以前の表示

0 名前： 初心者JScripter ： 2006/05/20（土） 08:29: javascriptでカレンダーを作成しました。
ソースを書けば分かりやすいとは思うのですが質問欄に入りきらないと思うので省略させてください。
カレンダーは1～12月まで、1ヶ月間の日にちを定義して、7*6の表のなかに数字の配列を折り返す方法で作成しました。

カレンダー(当月)は作成できたのですが、表示内のボタンクリック等で、翌月以降・先月以前の表示に切り替えたいのですが、どうやっても上手くできません。

翌月以降・先月以前も表示させるのにはどうすればいいでしょうか？
どんなことでもいいので、アドバイスお願いします。

1 名前： 初心者JScripter ： 2006/05/20（土） 08:29 ID:i1W.qvQE

var Day = new Date();								//初期設定
var yy  = Day.getFullYear();
var mm  = Day.getMonth();

var daycnt = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
	yy = (yy<2000)?(yy+1900):(yy);
	if(((yy%4)==0 && (yy%100)!=0) || (yy%400)==0){
	daycnt[1]==29;
	}
var Week  = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var Month = new Array("January","February","March","April","May","June","July","August","September",
			"October","November","December");

var today = Day.getDate();

function cal(){
										//作成カレンダーの設定
Day.setMonth(mm);
Day.setDate(1);

var Wno = Day.getDay();
var Ddata = new Array(7*6);

	for(i=0; i<7*6; i++){
		Ddata[i]="　";
		}              
	for(i=0; i<daycnt[mm]; i++){
	Ddata[i+Wno]=i+1;
		}
										//表示
var Disp = "";

Disp += "<STYLE TYPE='text/css'><!--BODY { margin: 0px; }";
Disp += "A { text-decoration: none; } A:hover { text-decoration: underline; }";
Disp += "A:link { color: #000000; } A:visited { color: #000000; }";
Disp += "A:hover { color: #000000; } A:active { color: #000000; }--></STYLE>";
Disp += "<font face = 'Times New Roman'>";					//全体のフォント!!

										//テーブル作成開始

Disp += "<table border='1' cellspacing='0' bordercolor='#c0c0c0'>";
Disp += "<tr><td align = 'center' colspan='7' bgcolor='#e6e6fa'>";		//見出し色
Disp += "<b><font size ='5'>" ;							//見出し文字サイズ
Disp += Month[mm];
Disp += "/";
Disp += yy ;
Disp += "</font></b></td></tr>";


										//曜日欄
Disp += "<tr>";  
for(i=0; i<7; i++){
	Disp += "<td align='center' bgcolor=";
		if(i==0){
		Disp += "'#ffc0cb'>";						//日曜日の色
		}
		else if(i==6){
		Disp += "'#b0e0e6'>";						//土曜日の色
		}
		else{		
		Disp += "'#ffebcd'>";						//平日の色
		}
	Disp += "<b>";
	Disp += Week[i];
	Disp += "</b></td>";
	}

Disp += "</tr>";

2 名前： 初心者JScripter ： 2006/05/20（土） 08:29 ID:i1W.qvQE

for(i=0; i<6; i++){
	Disp += "<tr>";
	for(j=0; j<7; j++){
	var dd = Ddata[j+(i*7)];

										//休みの日の設定
	var S_higan = Math.floor(20.8431+0.242194*(yy-1980))-Math.floor((yy-1980)/4);
	var A_higan = Math.floor(23.2488+0.242194*(yy-1980))-Math.floor((yy-1980)/4);

	var Holiday =(j==0)||
		(mm==0)&&(dd==1)||
		(mm==0)&&(dd==2)&&(j==1)||
		(mm==0)&&(i==1)&&(j==1)||
		(mm==1)&&(dd==11)||
		(mm==1)&&(dd==12)&&(j==1)||
		(mm==2)&&(dd==S_higan)||
		(mm==2)&&(dd==(S_higan+1))&&(j==1)||
		(mm==3)&&(dd==29)||
		(mm==3)&&(dd==30)&&(j==1)||
		(mm==4)&&(dd==3)||
		(mm==4)&&(dd==4)||
		(mm==4)&&(dd==5)||
		(mm==4)&&(dd==6)&&(j==1)||
		(mm==6)&&(i==2)&&(j==1)||
		(mm==8)&&(i==2)&&(j==1)||
		(mm==8)&&(dd==A_higan) ||
		(mm==8)&&(dd==(A_higan+1))&&(j==1)||
		(mm==9)&&(i==1)&&(j==1)||
		(mm==10)&&(dd==3)||
		(mm==10)&&(dd==4)&&(j==1)||
		(mm==10)&&(dd==23)||
		(mm==10)&&(dd==24)&&(j==1)||
		(mm==11)&&(dd==23)||
		(mm==11)&&(dd==24)&&(j==1)||
		(mm==11)&&(dd==31);

		Disp += "<td align='center'  bgcolor=";

			if(dd=="　"){
			Disp += "'#ececec'>";
			}			
			else if(dd==today){					//今日の色
			Disp += "'#ffff99'>";
			}
			else if(Holiday){
			Disp += "'#ffc0cb'>";					//休みの日の色
			}
			else if(j==6){
			Disp += "'#b0e0e6'>";					//土曜の色
			}
			else{
			Disp += "'#ffffff'>";					//平日の色
			}
		
		Disp += "<font size ='6'><b>";					//日にちの文字サイズ
		Disp += "<A href='javascript:void(0)'>";
		Disp +=  dd;
		Disp += "</a></b></font>"; 
		Disp += "</td>"; 
	}
	Disp += "</tr>";
}
    var Bdeco = "style='background-color: #FFE4C4;'>";
    
	Disp += "<tr><td align = 'center' colspan='7' bgcolor='#ececec'>";
	Disp += "<input type = 'button' value='Prev' ";
	Disp += Bdeco;
	Disp += "<input type = 'button' value='○' '";
	Disp += Bdeco;
	Disp += "<input type = 'button' value = 'close' ";
	Disp += Bdeco;
	Disp += "<input type = 'button' value='Next' '";
	Disp += Bdeco;
	Disp += "</tr></table></font>";
document.write(Disp);
}
									//テーブル終了

3 名前： 初心者JScripter ： 2006/05/20（土） 08:29 ID:i1W.qvQE: ソースを分けたら入ったので書いておきました。
醜いソースですが、初心者なんで許してください。
あと訂正なのですが、下から、7行目と9行目に間違えて「’」が入ってしまいました。

宜しくお願いします。

4 名前： m035 ◆Wpzr1YKOiq ： 2006/05/20（土） 08:29 ［URL］ ID:iuqdS2UA: まず、同一ページかつリロードなしではdocument.writeでは内容は書き換えられません。
テキストボックスなどを使わず、動的に書き換えたい場合は、DOMか、innerHTMLなどを使って書き換えます。

あとは
var Day = new Date();
のDateをボタンクリックなどに応じてsetMonthなどで変更し、関数外で行っている初期設定をもう一度行ってから各関数を実行しなおせばいいはずです。
（ただし、前述のとおりの条件下でカレンダーを動的に変更したい場合はdocument.writeでは無理です）

それと、forで使っているカウンタの変数はvar i=0;やvar j=0;のようにvarをつけたほうがいいでしょう。

5 名前： 初心者JScripter ： 2006/05/20（土） 08:29 ID:i1W.qvQE: document.writeでは無理なんですか…。
なんとか今月から来月まで変更しても、scriptの記述が先まで反映されなかったので行き詰ってました。
DOM、innerHTMLについて勉強してみます。
アドバイス本当にありがとうございます。

6 名前： 亜Perl ： 2006/05/20（土） 08:29: こういうのってネットにごろごろ転がってるよ。
イチから自分で組んだものじゃないんだろうけど、メカニズムも分からず
にいじくってもムリ。この種のスクリプトは時限爆弾的なところもあって、
今はたまたま動いていてもある日突然クラッシュするってこともある。

7 名前： 初心者JScripter ： 2006/05/20（土） 08:29 ID:i1W.qvQE: >亜Perlさん

レスありがとうございます。
カレンダーは人に考え方とかネットで調べたりして作ったもので、イチからすべて作ったわけではないんです。
ちなみに、突然クラッシュする時というのはどんな場合なんでしょうか？
よろしかったら教えてください。

8 名前： Pid ◆byEkK9OALr ： 2006/05/20（土） 08:29: >>0-3
> 翌月以降・先月以前の表示に切り替えたい

cal (2006, 5) のように引数を与えるよう改造すれば良いだけかと。

なお，細かい点ですが，

> var daycnt = new Array(31,28,31,30,31,30,31,31,30,31,30,31);

たとえば (new Date (2006, 2, 0)).getDate () で，閏年計算済みの 2 月末日を取得できます。「計算を実装に任せると不具合が生じる」のでなければ，末日や閏年などの自力計算は面倒なだけでしょう。

> for(i=0; i<7*6; i++){

>>4 で指摘されているように，JavaScript では，var 宣言しない変数は全てグローバル変数になります。思わぬバグのもとです。

> Disp += "<STYLE TYPE='text/css'><!--BODY { margin: 0px; }";

body 要素の中に style 要素が出現することは，HTML 文法的にありえません。スクリプトで生成された HTML であっても，当該文書の DTD に適合しなければなりません。

> Disp += "<font face = 'Times New Roman'>"; //全体のフォント!!
> Disp += "<table border='1' cellspacing='0' bordercolor='#c0c0c0'>";

インライン要素である font の中に，ブロック要素である table を含むことはできませんから，フォントの設定になっていません。CSS をきちんと使えば，font だの b だの align だのを埋め込む必要はないはずです。

> var Holiday =(j==0)|| ....

さすがに冗長ですから，配列で管理した方がマシかと思います。

>>5
> DOM、innerHTMLについて勉強してみます。

document.write や innerHTML などで文字列操作を行う場合，マークアップが SGML/HTML として解釈されないよう注意して下さい（>>1-2 の書き方は，外部ファイルならば OK ですが，HTML に直接埋め込む場合は NG です）。DOM ツリー操作ならば，そうしたことを気にかける必要はありません。

9 名前： 初心者JScripter ： 2006/05/20（土） 08:29 ID:i1W.qvQE: >Pidさん

細かく教えてくれてありがとうございます。

>たとえば (new Date (2006, 2, 0)).getDate () で，閏年計算済みの 2 月末日を取得できます。「計算を実装に任せると不具合が生じる」のでなければ，末日や閏年などの自力計算は面倒なだけでしょう。

閏年計算は取得できるんですね。何冊か買った本にも出てなかったので、非常に貴重な情報です。

>body 要素の中に style 要素が出現することは，HTML 文法的にありえません。スクリプトで生成された HTML であっても，当該文書の DTD に適合しなければなりません。

初めは<html><head></head>…記述も書いたんですが、カットしても表示が出来たため削ってしまったんです。
DTDに適合する文書でないといけないんですね。まずはDTDに適合する文書に書き直してみます。

>document.write や innerHTML などで文字列操作を行う場合，マークアップが SGML/HTML として解釈されないよう注意して下さい（>>1-2 の書き方は，外部ファイルならば OK ですが，HTML に直接埋め込む場合は NG です）。DOM ツリー操作ならば，そうしたことを気にかける必要はありません。

さっそくDOMとinnerHTMLについて調べてみてるのですが、このご指摘を忘れないようにします。

色々丁寧に教えて頂いて感謝してます。
もっと精進します。

10 名前： Z ◆XTzyosZXcL ： 2006/05/20（土） 08:29 ID:v5nGHgzA: >>初めは<html><head></head>…記述も書いたんですが、カットしても表示が出来たため削ってしまったんです。
　仕様書をご覧頂くとお分かりになると思いますが、HTML要素とHEAD要素（さらにBODY要素）は開始タグ・終了タグ共に省略が可能です（だから「カットしても」UAがそこにあるとみなす、または追加するという内部処理をおこなって「表示が出来」た訳です）。
　ただし、HEAD要素内部に記述するTITLE要素は開始タグも終了タグも省略が出来ません。

　文書型宣言は逆に「どのDTDに適合しているか」を示すため省略しない方が無難です。

参考）
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html
http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html
http://www.w3.org/TR/1999/REC-html401-19991224/conform.html

＃場合によっては「講座」サイトにあたるより、仕様書を当たった方が早いこともあります。

11 名前： 初心者JScripter ： 2006/05/20（土） 08:29 ID:i1W.qvQE: >Zさん

参考のサイトを見てみました。
内容が濃いサイトなので、何回もじっくり読んでみようと思います。
ありがとうございます。

12 名前： 初心者JScripter ： 2006/05/20（土） 08:29 ID:i1W.qvQE: ここで回答して頂いた方々のおかげで、万年カレンダーを作成することが出来ました。
本当にありがとうございました。