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

		Juli 2025
Minggu	Senin	Selasa	Rabu	Kamis	Jum'at	Sabtu
29	30	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	31 Wage	1	2
3	4	22:16:40			25 Jul 2025
3	4	22:16:40			Jum'at Pon

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: