PG CENTER（プログラムセンター）

Javascriptでカレンダーを表示する方法について

Javascriptでカレンダーを表示するサンプルソース

<SCRIPT LANGUAGE="JavaScript">
<!--
var MAXCELL = 42;

var now;
var Year;
var Month;
var Day;
//システム日付を取得
now = new Date();
Year = now.getYear();
Month = now.getMonth();

//カレンダーの初期表示
function initCalendarSet(){
//システム日付を取得
now = new Date();
Year = now.getYear();
Month = now.getMonth();
//カレンダー表示
	CalendarSet();
}

//前年に更新する
//グローバル変数Year--をする
function pervYearButton(){
	if (yearChk(Year - 1)){
		Year--;
//カレンダー表示
		CalendarSet();
	}
}

//次年に更新する
//グローバル変数Year++をする
function nextYearButton(){
	if (yearChk(Year + 1)){
		Year++;
//カレンダー表示
		CalendarSet();
	}
}

//前月に更新する
//グローバル変数Month--をする
function pervMonthButton(){
		if (Month > 0){
			Month--;
			CalendarSet();	//カレンダー表示
		} else {
			if(yearChk(Year - 1)){
				Year--;
				Month = 11;
				CalendarSet();	//カレンダー表示
			}
		}
}

//次月に更新する
//グローバル変数Month++をする
function nextMonthButton(){
		if (Month < 11){
			Month++;
			CalendarSet();	//カレンダー表示
		} else {
			if(yearChk(Year + 1)){
				Year++;
				Month = 0;
				CalendarSet();	//カレンダー表示
			}
		}
}

//JavaScriptの日付桁数範囲判定
function yearChk(newYear){
	if (newYear >= 1970 && newYear <= 2037){
		return true;
	} else {
		alert("1970年から2037年までを指定してください。");
		return false;
	}
}
//カレンダー表示
//グローバル変数Year,Month,Dayよりカレンダーを表示する
function CalendarSet(){
var first_day;
var last_day;
var days;
var cId;
var x;
var y;
var onNow;
var onYear;
var onMonth;
var onDay;

//年を設定
	cyear.innerText = Year + "年";
//月を設定
	cmonth.innerText = Month + 1 +"月";
// 当月１日と翌月１日の日差から、当月日数を算出
	first_day = new Date(Year, Month, 1);
	last_day = new Date(Year, Month+1, 1);
	days = (last_day.getTime() - first_day.getTime()) / (24*60*60*1000);
//テーブルを初期化
	Id = 0;
	x = 0;
	while(x < MAXCELL){
		str_cId = "c" + Id;
		document.getElementById(str_cId).outerHTML = "<DIV id=" + str_cId + ">　</DIV>";
		Id++;
		x++;
	}

//曜日の開始位置を取得
	Id = first_day.getDay();
	x = 0;
	y = 1;
//日をテーブルに設定
	while(x < days){
		str_cId = "c" + Id;
		document.getElementById(str_cId).outerHTML = "<DIV id=" + str_cId + ">" + y +"</DIV>";
		Id++;
		y++;
		x++;
	}

//カレンダーに本日を設定するか判定
//システム日付を取得
onNow = new Date();
onYear = onNow.getYear();
onMonth = onNow.getMonth();
	if(onYear == Year && onMonth == Month){
		onDay = onNow.getDate();
		Id = first_day.getDay() + onDay - 1;
		str_cId = "c" + Id;
		document.getElementById(str_cId).outerHTML = "<DIV id=" + str_cId + "><b>" + onDay +"</b></DIV>";
	}
}

//-->
</SCRIPT>