戻る|
カレンダー |
◆カレンダー◆ |
■■１■■
[概要]
今月のカレンダーを表示する
[参照]
[ソース]
<HTML>
<HEAD>
<TITLE>カレンダー</TITLE>
<SCRIPT language="JavaScript">
<!--
function calendar() {
var date = new Date();
var Monthdays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var Days = new Array("Sun","Mon","Tue","Wed","Thr","Fri","Sat");
year = date.getYear();
today = date.getDate();
//年、うるう年の設定
if(year<2000){
year = year+1900;
}
if((year%4==0)&&(year%100!=0)||(year%400==0)){
Monthdays[1] = 29;
}
//今月
thisMonthDays = Monthdays[date.getMonth()];
//１日の取り出し
date.setDate(1);
startday = date.getDay();
//年・月日の表示
document.write("<TABLE border=1 bgcolor=blue bordercolorlight=aqua
bordercolordark=navy>");
document.write("<TR bgcolor='#ddffff'><TH colspan=7>");
document.write(year,'年',date.getMonth()+1,'月');
document.write("</TH></TR>");
//曜日の表示
document.write("<TR bgcolor=yellow>");
for(i=0;i<7;i++){
document.write("<TH>",Days[i],"</TH>");
}
//日にちの表示
document.write("<TR bgcolor=white>");
//空欄
col = 0;
for(i=0;i<startday;i++){
document.write("<TD></TD>");
col++;
}
//日にち
for(i=1;i<=thisMonthDays;i++){
//今日
if(i==today){
document.write("<TD width=30 style={background-color:#ffdddd}>");
document.write("<FONT color=blue><B>");
document.write(i);
document.write("</B></FONT>");
}
else if(col==0){
document.write("<TD width=30>");
document.write("<FONT color=red><B>");
document.write(i);
document.write("</B></FONT>");
}
else{
document.write("<TD width=30>");
document.write(i);
}
document.write("</TD>");
col++;
if(col==7){
document.write("</TR>\n<TR bgcolor=white>");
col=0;
}
}
while(col!=7){
document.write("<TD width=30>");
document.write(" ");
col++;
}
document.write("</TR>");
document.write("</TABLE>");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
calendar();
//-->
</SCRIPT>
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■２■■
[概要]
今年のカレンダーを表示する
[参照]
[ソース]
<HTML>
<HEAD>
<TITLE>カレンダー</TITLE>
<SCRIPT language="JavaScript">
<!--
function dsp_calender(month,month_length){
day=1
document.write("<TABLE border=1 bgcolor=blue bordercolorlight=aqua bordercolordark=navy><TR>");
document.write("<TD COLSPAN=7 ALIGN=center bgcolor=#ffffe4><B>"+year+"年 "+month+"</B><TR>");
document.write("<TD ALIGN=center WIDTH=35 bgcolor=yellow><font color=red><b>日</TD>");
document.write("<TD ALIGN=center WIDTH=35 bgcolor=yellow>月</TD>");
document.write("<TD ALIGN=center WIDTH=35 bgcolor=yellow>火</TD>");
document.write("<TD ALIGN=center WIDTH=35 bgcolor=yellow>水</TD>");
document.write("<TD ALIGN=center WIDTH=35 bgcolor=yellow>木</TD>");
document.write("<TD ALIGN=center WIDTH=35 bgcolor=yellow>金</TD>");
document.write("<TD ALIGN=center WIDTH=35 bgcolor=yellow><font color=blue><b>土</TD>");
document.write("</TR><TR>");
for(var i=1;i<start_day;i++){
document.write("<TD bgcolor=white>");
document.write(" ");
}
for(var i=start_day;i<8;i++){
if (i==7){
document.write("<TD
ALIGN=center bgcolor=white><font color=blue><b>"+day+"</TD>");
}
else{
document.write("<TD
ALIGN=center bgcolor=white>"+day+"</TD>");
}
day++
}
while(day <= month_length){
document.write("<TR>");
for (var i=1;i<=7 && day<=month_length;i++) {
if (i==1){
document.write("<TD ALIGN=center bgcolor=white><font color=red><b>"+day+"</TD>");
}
else if (i==7){
document.write("<TD ALIGN=center bgcolor=white><font color=blue><b>"+day+"</TD>");
}
else{
document.write("<TD ALIGN=center bgcolor=white>"+day+"</TD>");
}
day++;
}
while(i!=8){
document.write("<TD bgcolor=white> </TD>");
i++;
}
document.write("</TR>");
start_day=i;
}
document.write("</TR></TABLE>");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
today = new Date();
year = today.getYear();
if(year < 2000){
year = year + 1900;
}
today= new Date("January 1, "+year);
start_day = today.getDay() + 1;
document.write("<TABLE BORDER=0 CELLPADDING=6><TR><TD valign=top>");
dsp_calender("１月",31);
document.write("</TD><TD valign=top>");
if (((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0)) {
dsp_calender("２月", 29);
}
else {
dsp_calender("２月", 28);
}
document.write("</TD><TD valign=top>");
dsp_calender("３月",31);
document.write("</TD></TR><TR><TD valign=top>");
dsp_calender("４月",30);
document.write("</TD><TD valign=top>");
dsp_calender("５月",31);
document.write("</TD><TD valign=top>");
dsp_calender("６月",30);
document.write("</TD></TR><TR><TD valign=top>");
dsp_calender("７月",31);
document.write("</TD><TD valign=top>");
dsp_calender("８月",31);
document.write("</TD><TD valign=top>");
dsp_calender("９月",30);
document.write("</TD></TR><TR><TD valign=top>");
dsp_calender("１０月",31);
document.write("</TD><TD valign=top>");
dsp_calender("１１月",30);
document.write("</TD><TD valign=top>");
dsp_calender("１２月",31);
document.write("</TD></TR></TABLE>");
//-->
</SCRIPT>
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。