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). . .

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

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: