Faid's Blog™: Kalender Jawa Javascript

Ini adalah kalender Indonesia yang disertai dengan hari jawa (Pahing, Pon, Wage, Kliwon, dan Legi), kalender yang saya buat menggunakan JavaScript ini juga mampu menampilkan tanggal dari tahun 100 sampai 250000, caranya cukup Copy Paste kode dibawah sesuai dengan kebutuhan Anda, Langkah2nya: Buka Notepad -> Salin kode dibawah -> Pilih Save As -> Pilih jenis All Files -> Masukkan .ekstensi setelah nama sesuai perintah(Mis. Kalender.HTA). . .

		Juni 2025
Minggu	Senin	Selasa	Rabu	Kamis	Jum'at	Sabtu
1 Wage	2 Kliwon	3 Legi	4 Pahing	5 Pon	6 Wage	7 Kliwon
8 Legi	9 Pahing	10 Pon	11 Wage	12 Kliwon	13 Legi	14 Pahing
15 Pon	16 Wage	17 Kliwon	18 Legi	19 Pahing	20 Pon	21 Wage
22 Kliwon	23 Legi	24 Pahing	25 Pon	26 Wage	27 Kliwon	28 Legi
29 Pahing	30 Pon	1	2	3	4	5
6	7	14:38:34			09 Jun 2025
6	7	14:38:34			Senin Pahing

Simpan dengan ekstensi "*.HTA":

<html>
	<head>
		<title>Jam &amp; Kalender Digital</title>
		<script type='text/javascript'>
			sW = screen.width;
			sH = screen.height;
			window.moveTo(sW, sH);
			window.resizeTo(464, 464);
		</script>
		<hta:application
			applicationName="jam&kalender"
			border="thin"
			contextMenu="no"
			icon="kalender.ico"
			id="382511010101101011"
			innerBorder="no"
			maximizeButton="no"
			scroll="no"
			selection="no"
			singleInstance="yes"
			version="3.8.2.5"/>
		<meta http-equiv='MSThemeCompatible' content='yes'/>
		<style type='text/css'>
			table {
				width: 464px;
				height: 464px;
				font-family: arial;
				font-weight: bold;
				font-size: 14px;
				cursor: default;
			}

			td {
				width: 64px;
				height: 32px;
				background-color: #f5f5f5;
				text-align: center;
			}

			input {
				width: 28px;
				height: 24px;
				font-family: arial;
				font-weight: normal;
				font-size: 14px;
				cursor: pointer;
			}

			.myh {
				width: 196px;
				font-size: 16px;
				color: #ff9000;
			}

			.dy,.dyh {
				color: #0000ff;
			}

			.jm,.jmh {
				color: #009f00;
			}

			.st,.sth {
				color: #bf00cf;
			}

			.mg,.mgh {
				color: #ff0000;
			}

			.dy,.jm,.st,.mg {
				height: 64px;
				font-size: 12px;
			}

			.dyh,.jmh,.sth,.mgh {
				font-size: 14px;
			}

			.clk {
				width: 196px;
				height: 64px;
				font-size: 44px;
				color: #00afff;
			}

			.dte {
				width: 130px;
				font-size: 16px;
				color: #ff00cf;
			}
		</style>
	</head>
	<body topMargin='0' leftMargin='0' onSelectStart='return false;' onContextMenu='return false;'>
		<table border='1' borderColor='#808080' cellSpacing='0' cellPadding='0'>
			<tr>
				<td colSpan='2' style='width: 130px;'>
					<input type='button' onClick='chgMth(0, 100);' title='-100 tahun' value='&lt;&lt;'/>
					<input type='button' onClick='chgMth(0, 10);' title='-10 tahun' value='&lt;&lt;'/>
					<input type='button' onClick='chgMth(0, 1);' title='-1 tahun' value='&lt;&lt;'/>
					<input type='button' onClick='chgMth(1, 0);' title='-1 bulan' value='&lt;&lt;'/>
				</td>
				<td colSpan='3' class='myh' id='mTyR'/>
				<td colSpan='2' style='width: 130px;'>
					<input type='button' onClick='chgMth(3, 0);' title='+1 bulan' value='&gt;&gt;'/>
					<input type='button' onClick='chgMth(4, 1);' title='+1 tahun' value='&gt;&gt;'/>
					<input type='button' onClick='chgMth(4, 10);' title='+10 tahun' value='&gt;&gt;'/>
					<input type='button' onClick='chgMth(4, 100);' title='+100 tahun' value='&gt;&gt;'/>
				</td>
			</tr>
			<tr>
				<td class='mgh'>Minggu</td>
				<td class='dyh'>Senin</td>
				<td class='dyh'>Selasa</td>
				<td class='dyh'>Rabu</td>
				<td class='dyh'>Kamis</td>
				<td class='jmh'>Jum'at</td>
				<td class='sth'>Sabtu</td>
			</tr>
			<tr>
				<td colSpan='1' class='mg' id='iD0'/>
				<td colSpan='1' class='dy' id='iD1'/>
				<td colSpan='1' class='dy' id='iD2'/>
				<td colSpan='1' class='dy' id='iD3'/>
				<td colSpan='1' class='dy' id='iD4'/>
				<td colSpan='1' class='jm' id='iD5'/>
				<td colSpan='1' class='st' id='iD6'/>
			</tr>
			<tr>
				<td colSpan='1' class='mg' id='iD7'/>
				<td colSpan='1' class='dy' id='iD8'/>
				<td colSpan='1' class='dy' id='iD9'/>
				<td colSpan='1' class='dy' id='iD10'/>
				<td colSpan='1' class='dy' id='iD11'/>
				<td colSpan='1' class='jm' id='iD12'/>
				<td colSpan='1' class='st' id='iD13'/>
			</tr>
			<tr>
				<td colSpan='1' class='mg' id='iD14'/>
				<td colSpan='1' class='dy' id='iD15'/>
				<td colSpan='1' class='dy' id='iD16'/>
				<td colSpan='1' class='dy' id='iD17'/>
				<td colSpan='1' class='dy' id='iD18'/>
				<td colSpan='1' class='jm' id='iD19'/>
				<td colSpan='1' class='st' id='iD20'/>
			</tr>
			<tr>
				<td colSpan='1' class='mg' id='iD21'/>
				<td colSpan='1' class='dy' id='iD22'/>
				<td colSpan='1' class='dy' id='iD23'/>
				<td colSpan='1' class='dy' id='iD24'/>
				<td colSpan='1' class='dy' id='iD25'/>
				<td colSpan='1' class='jm' id='iD26'/>
				<td colSpan='1' class='st' id='iD27'/>
			</tr>
			<tr>
				<td colSpan='1' class='mg' id='iD28'/>
				<td colSpan='1' class='dy' id='iD29'/>
				<td colSpan='1' class='dy' id='iD30'/>
				<td colSpan='1' class='dy' id='iD31'/>
				<td colSpan='1' class='dy' id='iD32'/>
				<td colSpan='1' class='jm' id='iD33'/>
				<td colSpan='1' class='st' id='iD34'/>
			</tr>
			<tr>
				<td colSpan='1' rowSpan='2' class='mg' id='iD35'/>
				<td colSpan='1' rowSpan='2' class='dy' id='iD36'/>
				<td colSpan='3' rowSpan='2' class='clk' id='showClock'/>
				<td colSpan='2' class='dte' id='showDate'/>
			</tr>
			<tr>
				<td colSpan='2' class='dte' style='color: #00cf00;' id='showDay'/>
			</tr>
		</table>
	</body>
	<script type='text/javascript'>
		dN = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu"];
		mN = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "Nopember", "Desember"];
		pN = ["Legi", "Pahing", "Pon", "Wage", "Kliwon"];

		chgMth(2, 0);
		chgClk();
		document.body.focus();

		iW = (464 + (464 - document.body.offsetWidth));
		iH = (464 + (464 - document.body.offsetHeight));
		window.resizeTo(iW, iH);
		window.moveTo(((sW - iW) / 2), ((sH - iH) / 2));

		function chgMth(i, y) {
			dT = new Date();
			if (i == 0) {
				yR -= y;
				if (yR < 100) {
					yR = 100;
				}
			}
			if (i == 1) {
				if (mT > 0) {
					mT--;
				} else {
					if (yR == 100) {
						mT = 0;
					} else {
						mT = 11;
						yR--;
					}
				}
			}
			if (i == 2) {
				mT = dT.getMonth();
				yR = dT.getFullYear();
			}
			if (i == 3) {
				if (mT < 11) {
					mT++;
				} else {
					if (yR == 250000) {
						mT = 11;
					} else {
						mT = 0;
						yR++;
					}
				}
			}
			if (i == 4) {
				yR += y;
				if (yR > 250000) {
					yR = 250000;
				}
			}
			for (cN = 0; cN <= 36; cN++) {
				document.getElementById("iD" + cN).style.backgroundColor = "#dcdcff";
			}
			cN = new Date(yR, mT, 1).getDay();
			for (dY = new Date(yR, mT, 0).getDate() - (cN - 1), bI = 0; bI < cN; dY++, bI++) {
				document.getElementById("iD" + bI).innerHTML = "<font style='font-size: 20px; color: #808080;'>" + dY + "</font>";
			}
			for (dY = 1; dY <= new Date(yR, (mT + 1), 0).getDate(); dY++, cN++) {
				pS = Math.floor(((new Date(yR, mT, dY).getTime() - new Date(100, 0, 1).getTime()) / (24 * 60 * 60 * 1000)) % 5);
				document.getElementById("iD" + cN).innerHTML = "<font style='font-size: 28px;'>" + dY + "</font><br/>" + pN[pS];
				if (dY == dT.getDate() & mT == dT.getMonth() & yR == dT.getFullYear()) {
					document.getElementById("iD" + cN).style.backgroundColor = "#ffff88";
				}
			}
			for (dY = 1; cN <= 36; dY++, cN++) {
				document.getElementById("iD" + cN).innerHTML = "<font style='font-size: 20px; color: #808080;'>" + dY + "</font>";
			}
			mTyR.title = mN[dT.getMonth()] + " " + dT.getFullYear();
			mTyR.innerHTML = "<font onClick='chgMth(2, 0);' style='cursor: pointer;'>" + mN[mT] + "&nbsp;" + yR + "</font>";
		}

		function chgClk() {
			dTcL = new Date();
			hRcL = dTcL.getHours();
			mNcL = dTcL.getMinutes();
			sCcL = dTcL.getSeconds();
			dYcL = dTcL.getDate();
			mTcL = dTcL.getMonth();
			yRcL = dTcL.getFullYear();
			if (mTcL == 7) {
				mMcL = "Ags";
			} else {
				mMcL = mN[mTcL].substr(0, 3);
			}
			if (dYcL < 10) {
				dYcL = "0" + dYcL;
			}
			if (hRcL < 10) {
				hRcL = "0" + hRcL;
			}
			if (mNcL < 10) {
				mNcL = "0" + mNcL;
			}
			if (sCcL < 10) {
				sCcL = "0" + sCcL;
			}
			if (showDate.innerHTML != dYcL + "&nbsp;" + mMcL + "&nbsp;" + yRcL) {
				chgMth(5, 0);
			}
			pScL = Math.floor(((new Date(yRcL, mTcL, dYcL).getTime() - new Date(100, 0, 1).getTime()) / (24 * 60 * 60 * 1000)) % 5);
			showClock.innerHTML = hRcL + ":" + mNcL + ":" + sCcL;
			showDate.innerHTML = dYcL + "&nbsp;" + mMcL + "&nbsp;" + yRcL;
			showDay.innerHTML = dN[dTcL.getDay()] + "&nbsp;" + pN[pScL];
			setTimeout("chgClk();", 100);
		}
	</script>
</html>

Simpan dengan ekstensi "*.JS":

dN = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu"];
mN = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "Nopember", "Desember"];
pN = ["Legi", "Pahing", "Pon", "Wage", "Kliwon"];

dW = "<html><head><style type='text/css'>table{width:464px;height:464px;font-family:arial;font-weight:bold;font-size:14px;cursor:default;}td{width:64px;height:"
+ "32px;background-color:#f5f5f5;text-align:center;}input{width:28px;height:24px;font-family:arial;font-weight:normal;font-size:14px;cursor:pointer;}.myh{width"
+ ":196px;font-size:16px;color:#ff9000;}.dy,.dyh{color:#0000ff;}.jm,.jmh{color:#009f00;}.st,.sth{color:#bf00cf;}.mg,.mgh{color:#ff0000;}.dy,.jm,.st,.mg{height:"
+ "64px;font-size:12px;}.dyh,.jmh,.sth,.mgh{font-size:14px;}.clk{width:196px;height:64px;font-size:44px;color:#00afff;}.dte{width:130px;font-size:16px;color:#f"
+ "f00cf;}</style></head><body onSelectStart='return false;'><table border='1' borderColor='#808080' cellSpacing='0' cellPadding='0'><tr><td colSpan='2' style="
+ "'width:130px;'><input type='button' onClick='chgMth(0,100);' title='-100 tahun' value='&lt;&lt;'/>\n<input type='button' onClick='chgMth(0,10);' title='-10 "
+ "tahun' value='&lt;&lt;'/>\n<input type='button' onClick='chgMth(0,1);' title='-1 tahun' value='&lt;&lt;'/>\n<input type='button' onClick='chgMth(1,0);' titl"
+ "e='-1 bulan' value='&lt;&lt;'/></td><td colSpan='3' class='myh' id='mTyR'/><td colSpan='2' style='width:130px;'><input type='button' onClick='chgMth(3,0);' "
+ "title='+1 bulan' value='&gt;&gt;'/>\n<input type='button' onClick='chgMth(4,1);' title='+1 tahun' value='&gt;&gt;'/>\n<input type='button' onClick='chgMth(4"
+ ",10);' title='+10 tahun' value='&gt;&gt;'/>\n<input type='button' onClick='chgMth(4, 100);' title='+100 tahun' value='&gt;&gt;'/></td></tr><tr><td class='mg"
+ "h'>" + dN[0] + "</td><td class='dyh'>" + dN[1] + "</td><td class='dyh'>" + dN[2] + "</td><td class='dyh'>" + dN[3]
+ "</td><td class='dyh'>" + dN[4] + "</td><td class='jmh'>" + dN[5] + "</td><td class='sth'>" + dN[6] + "</td></tr>";
var n = 5;
for (i = 0; i <= 34; i++) {
	ftr = "";
	etr = "";
	cls = "";
	if (i == (n - 5)) {
		ftr = "<tr>";
		cls = "mg";
	} else if (i == n) {
		cls = "jm";
		n += 7;
	} else if (i == ((n - 7)  + 1)) {
		etr = "</tr>";
		cls = "st";
	} else {
		cls = "dy";
	}
	dW += ftr + "<td colSpan='1' class='" + cls + "' id='iD" + i + "'/>" + etr;
}
dW += "<tr><td colSpan='1' rowSpan='2' class='mg' id='iD35'/><td colSpan='1' rowSpan='2' class='dy' id='iD36'/><td colSpan='3' rowSpan='2' class='clk' id='sh"
+ "owClock'/><td colSpan='2' class='dte' id='showDate'/></tr><tr><td colSpan='2' class='dte' style='color:#00cf00;' id='showDay'/></tr></table></body></html>";

document.write(dW);
chgMth(2, 0);
chgClk();

function chgMth(i, y) {
	dT = new Date();
	if (i == 0) {
	yR -= y;
	if (yR < 100) {
		yR = 100;
	}
	}
	if (i == 1) {
	if (mT > 0) {
		mT--;
	} else {
		if (yR == 100) {
		mT = 0;
		} else {
		mT = 11;
		yR--;
		}
	}
	}
	if (i == 2) {
	mT = dT.getMonth();
	yR = dT.getFullYear();
	}
	if (i == 3) {
	if (mT < 11) {
		mT++;
	} else {
		if (yR == 250000) {
		mT = 11;
		} else {
		mT = 0;
		yR++;
		}
	}
	}
	if (i == 4) {
	yR += y;
	if (yR > 250000) {
		yR = 250000;
	}
	}
	for (cN = 0; cN <= 36; cN++) {
	document.getElementById("iD" + cN).style.backgroundColor = "#dcdcff";
	}
	cN = new Date(yR, mT, 1).getDay();
	for (dY = new Date(yR, mT, 0).getDate() - (cN - 1), bI = 0; bI < cN; dY++, bI++) {
	document.getElementById("iD" + bI).innerHTML = "<font style='font-size: 20px; color: #808080;'>" + dY + "</font>";
	}
	for (dY = 1; dY <= new Date(yR, (mT + 1), 0).getDate(); dY++, cN++) {
	pS = Math.floor(((new Date(yR, mT, dY).getTime() - new Date(100, 0, 1).getTime()) / (24 * 60 * 60 * 1000)) % 5);
	document.getElementById("iD" + cN).innerHTML = "<font style='font-size: 28px;'>" + dY + "</font><br/>" + pN[pS];
	if (dY == dT.getDate() & mT == dT.getMonth() & yR == dT.getFullYear()) {
		document.getElementById("iD" + cN).style.backgroundColor = "#ffff88";
	}
	}
	for (dY = 1; cN <= 36; dY++, cN++) {
	document.getElementById("iD" + cN).innerHTML = "<font style='font-size: 20px; color: #808080;'>" + dY + "</font>";
	}
	mTyR.title = mN[dT.getMonth()] + " " + dT.getFullYear();
	mTyR.innerHTML = "<font onClick='chgMth(2, 0);' style='cursor: pointer;'>" + mN[mT] + "&nbsp;" + yR + "</font>";
}

function chgClk() {
	dTcL = new Date();
	hRcL = dTcL.getHours();
	mNcL = dTcL.getMinutes();
	sCcL = dTcL.getSeconds();
	dYcL = dTcL.getDate();
	mTcL = dTcL.getMonth();
	yRcL = dTcL.getFullYear();
	if (mTcL == 7) {
	mMcL = "Ags";
	} else {
	mMcL = mN[mTcL].substr(0, 3);
	}
	if (dYcL < 10) {
	dYcL = "0" + dYcL;
	}
	if (hRcL < 10) {
	hRcL = "0" + hRcL;
	}
	if (mNcL < 10) {
	mNcL = "0" + mNcL;
	}
	if (sCcL < 10) {
	sCcL = "0" + sCcL;
	}
	if (showDate.innerHTML != dYcL + "&nbsp;" + mMcL + "&nbsp;" + yRcL) {
	chgMth(5, 0);
	}
	pScL = Math.floor(((new Date(yRcL, mTcL, dYcL).getTime() - new Date(100, 0, 1).getTime()) / (24 * 60 * 60 * 1000)) % 5);
	showClock.innerHTML = hRcL + ":" + mNcL + ":" + sCcL;
	showDate.innerHTML = dYcL + "&nbsp;" + mMcL + "&nbsp;" + yRcL;
	showDay.innerHTML = dN[dTcL.getDay()] + "&nbsp;" + pN[pScL];
	setTimeout("chgClk();", 100);
}

Faid's Blog™

My Blog Menu

Friday, December 28, 2012

Kalender Jawa Javascript

1 comment: