Showing posts with label Kalender. Show all posts
Showing posts with label Kalender. Show all posts
Tuesday, 30 December 2014
Monday, 10 March 2014
JavaScript Kalender Standar
Membuat Kalender Standar dengan JavaScript tampilan standar :
ScriptKu :
<html>
<head>
<title>kalender</title>
<style type="text/css">
<!--.calendarTable {
background-color:#90c0f0;
color:#333;
border: 1px solid ;
}
.table {
border:1px solid white;
}
.calendarTable td {
text-align: center;
padding: 3px 5px 3px 5px;
}
.calendarTable td.currentDay {
font-weight: bold;
color:black;
border: 1px solid #aaa;
}
-->
</style>
<body>
<head>
<div id="kal">
<script type="text/javascript" language="javascript">
function calendar() {
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var months = new Array('Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember');
var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var weekDay = new Array('<font color="red">Sun</font>', 'Mon</font>', 'Tue</font>', 'Wed</font>', 'Thu</font>', 'Fri</font>', 'Sat</font>');
var days_in_this_month = monthDays[month];
var calendar_html = '<table cellspacing=0 class="calendarTable">';
calendar_html += '<tr><td width="" class="monthHead" colspan="7" align="center" bgcolor=blue><font color="white">' + months[month] + ' ' + year + '</td></tr>';
calendar_html += '<tr>';
var first_week_day = new Date(year, month, 1).getDay();
for(week_day= 0; week_day < 7; week_day++) {
calendar_html += '<td class="weekDay" bgcolor=#1179c8 height="26"><font color="white">' + weekDay[week_day] + '</td>';
}
calendar_html += '</tr><tr>';
for(week_day = 0; week_day < first_week_day; week_day++) {
calendar_html += '<td background="btk.png"> </td>';
}
week_day = first_week_day;
for(day_counter = 1; day_counter <= days_in_this_month; day_counter++) {
week_day %= 7;
if(week_day == 0)
calendar_html += '</tr><tr>';
if(day == day_counter) {
calendar_html += '<td class="currentDay" align="center" bgcolor=blue><font color="white">' + day_counter + '</font></td>';
} else {
calendar_html += '<td class="monthDay" align="center" background=btk.png width="" height="26"> ' + day_counter + ' </td>';
}
week_day++;
}
calendar_html += ' <td background="btk.png"> </tr>';
calendar_html += ' </table>';
document.write(calendar_html);
}
</script>
</head>
<body> <center>
<script type="text/javascript">calendar();</script> </center>
</div>
</body>
</html
| gambar kalender Standar JavaScript by Lingga |
<html>
<head>
<title>kalender</title>
<style type="text/css">
<!--.calendarTable {
background-color:#90c0f0;
color:#333;
border: 1px solid ;
}
.table {
border:1px solid white;
}
.calendarTable td {
text-align: center;
padding: 3px 5px 3px 5px;
}
.calendarTable td.currentDay {
font-weight: bold;
color:black;
border: 1px solid #aaa;
}
-->
</style>
<body>
<head>
<div id="kal">
<script type="text/javascript" language="javascript">
function calendar() {
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var months = new Array('Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember');
var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var weekDay = new Array('<font color="red">Sun</font>', 'Mon</font>', 'Tue</font>', 'Wed</font>', 'Thu</font>', 'Fri</font>', 'Sat</font>');
var days_in_this_month = monthDays[month];
var calendar_html = '<table cellspacing=0 class="calendarTable">';
calendar_html += '<tr><td width="" class="monthHead" colspan="7" align="center" bgcolor=blue><font color="white">' + months[month] + ' ' + year + '</td></tr>';
calendar_html += '<tr>';
var first_week_day = new Date(year, month, 1).getDay();
for(week_day= 0; week_day < 7; week_day++) {
calendar_html += '<td class="weekDay" bgcolor=#1179c8 height="26"><font color="white">' + weekDay[week_day] + '</td>';
}
calendar_html += '</tr><tr>';
for(week_day = 0; week_day < first_week_day; week_day++) {
calendar_html += '<td background="btk.png"> </td>';
}
week_day = first_week_day;
for(day_counter = 1; day_counter <= days_in_this_month; day_counter++) {
week_day %= 7;
if(week_day == 0)
calendar_html += '</tr><tr>';
if(day == day_counter) {
calendar_html += '<td class="currentDay" align="center" bgcolor=blue><font color="white">' + day_counter + '</font></td>';
} else {
calendar_html += '<td class="monthDay" align="center" background=btk.png width="" height="26"> ' + day_counter + ' </td>';
}
week_day++;
}
calendar_html += ' <td background="btk.png"> </tr>';
calendar_html += ' </table>';
document.write(calendar_html);
}
</script>
</head>
<body> <center>
<script type="text/javascript">calendar();</script> </center>
</div>
</body>
</html
jika ada masalah tinggal Comment..
JavaScript Kalender biasa
Membuat Kalender biasa dengan JavaScript tampilan biasa tidak wow,, by Lingga:
<html>
<head><title>kalender</title></head>
<body>
<div id="kal">
<script language='javascript' type='text/javascript'>
var fifteenth = new Array('<font color="red">Sun</font>', '<font color="white">Mon</font>', '<font color="white">Tue</font>', '<font color="white">Wed</font>', '<font color="white">Thu</font>', '<font color="white">Fri</font>', '<font color="white">Sat</font>');
var sixteenth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var seventeenth = new Date();
var eighteenth = seventeenth.getMonth();
var nineteenth = seventeenth.getDay();
var first2 = seventeenth.getDate();
var second2 = sixteenth[eighteenth];
if (eighteenth == 1) { var third2 = seventeenth.getYear();
if (third2%4 == 0) second2 = 29;}
document.write("<table border='1' bgcolor='#90c0f0' cellspacing='0.1' cellpadding='2'>");document.write('<tr>');
for (var fourth2=0; fourth2<7; fourth2++) {
document.write("<td width='30' height='30' bgcolor=blue background=image/bk.png>");
document.write("<div align='center'>" + fifteenth[fourth2] + "</div>");
document.write('</td>');}
document.write('</tr>');
var fifth2 = 0;
var sixth2 = 1;
var fifteenth3 = nineteenth - first2%7 + 1;
if (fifteenth3 < 0) fifteenth3 += 7;
var sixteenth3 = parseInt((fifteenth3 + second2)/7);
if ((fifteenth3 + second2)%7 != 0) sixteenth3++;
for (var fourth2=sixteenth3; fourth2>0; fourth2--) {
document.write('<tr>');
for (var seventeenth3=7; seventeenth3>0; seventeenth3--) {
document.write('<td bgcolor=#0d78e6 background=image/btk.png>');
if (fifth2<fifteenth3 || sixth2>second2) {
document.write("<div align='center'></div>"); fifth2++; }
else {
if (sixth2 == first2)
document.write("<div align='center'><font color='white'>[" + sixth2 + "]</font></div>");
else document.write("<div align='center'><font color='white'>" + sixth2 + "</font></div>"); sixth2++; }
document.write('</td>') }
document.write('</tr>');}
document.write('</table>');
</script>
</div>
</body>
</html>
jika ada masalah tinggal Comment..
| Gambar kalender biasa JavaScript by Lingga |
<html>
<head><title>kalender</title></head>
<body>
<div id="kal">
<script language='javascript' type='text/javascript'>
var fifteenth = new Array('<font color="red">Sun</font>', '<font color="white">Mon</font>', '<font color="white">Tue</font>', '<font color="white">Wed</font>', '<font color="white">Thu</font>', '<font color="white">Fri</font>', '<font color="white">Sat</font>');
var sixteenth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var seventeenth = new Date();
var eighteenth = seventeenth.getMonth();
var nineteenth = seventeenth.getDay();
var first2 = seventeenth.getDate();
var second2 = sixteenth[eighteenth];
if (eighteenth == 1) { var third2 = seventeenth.getYear();
if (third2%4 == 0) second2 = 29;}
document.write("<table border='1' bgcolor='#90c0f0' cellspacing='0.1' cellpadding='2'>");document.write('<tr>');
for (var fourth2=0; fourth2<7; fourth2++) {
document.write("<td width='30' height='30' bgcolor=blue background=image/bk.png>");
document.write("<div align='center'>" + fifteenth[fourth2] + "</div>");
document.write('</td>');}
document.write('</tr>');
var fifth2 = 0;
var sixth2 = 1;
var fifteenth3 = nineteenth - first2%7 + 1;
if (fifteenth3 < 0) fifteenth3 += 7;
var sixteenth3 = parseInt((fifteenth3 + second2)/7);
if ((fifteenth3 + second2)%7 != 0) sixteenth3++;
for (var fourth2=sixteenth3; fourth2>0; fourth2--) {
document.write('<tr>');
for (var seventeenth3=7; seventeenth3>0; seventeenth3--) {
document.write('<td bgcolor=#0d78e6 background=image/btk.png>');
if (fifth2<fifteenth3 || sixth2>second2) {
document.write("<div align='center'></div>"); fifth2++; }
else {
if (sixth2 == first2)
document.write("<div align='center'><font color='white'>[" + sixth2 + "]</font></div>");
else document.write("<div align='center'><font color='white'>" + sixth2 + "</font></div>"); sixth2++; }
document.write('</td>') }
document.write('</tr>');}
document.write('</table>');
</script>
</div>
</body>
</html>
jika ada masalah tinggal Comment..
Tuesday, 10 March 2009
JavaScript Kalender page
Membuat Kalender berisi fungsinya dapat memilih bulan tahun page nya dengan JavaScript by: Lingga :
Scriptku :
<html>
<head>
<title></title>
</head>
<body>
<HEAD>
<style type="text/css">
<!--
span.label {color:white;width:30;height:16;text-align:center;margin-top:0;background:green;font:bold 13px Arial}
span.c1 {cursor:hand;color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c2 {cursor:hand;color:red;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c3 {cursor:hand;color:#b0b0b0;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 12px Arial}
-->
</style>
<script type="text/javascript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function maxDays(mm, yyyy){
var mDay;
if((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){
mDay = 30;
}
else{
mDay = 31
if(mm == 1){
if (yyyy/4 - parseInt(yyyy/4) != 0){
mDay = 28
}
else{
mDay = 29
}
}
}
return mDay;
}
function changeBg(id){
if (eval(id).style.backgroundColor != "yellow"){
eval(id).style.backgroundColor = "yellow"
}
else{
eval(id).style.backgroundColor = "#ffffff"
}
}
function writeCalendar(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var arrM = new Array("Januari","Pebruari","Maret","April","Mai","Juni","Juli","Agustus","September","Oktober","November","Desember")
var arrY = new Array()
for (ii=0;ii<=15;ii++){
arrY[ii] = yyyy - 2 + ii
}
var arrD = new Array("<font color=red>Sun</font>","Mon","Tue","Wed","Thu","Fri","Sat")
var text = ""
text = "<form name=calForm>"
text += "<table border=0 cellspacing=0 bgcolor=aqua>"
text += "<tr><td>"
text += "<table width=100% bgcolor=green><tr>"
text += "<td align=left>"
text += "<select name=selMonth onChange='changeCal()'>"
for (ii=0;ii<=11;ii++){
if (ii==mm){
text += "<option value= " + ii + " Selected>" + arrM[ii] + "</option>"
}
else{
text += "<option value= " + ii + ">" + arrM[ii] + "</option>"
}
}
text += "</select>"
text += "</td>"
text += "<td align=right>"
text += "<select name=selYear onChange='changeCal()'>"
for (ii=0;ii<=15;ii++){
if (ii==2){
text += "<option value= " + arrY[ii] + " Selected>" + arrY[ii] + "</option>"
}
else{
text += "<option value= " + arrY[ii] + ">" + arrY[ii] + "</option>"
}
}
text += "</select>"
text += "</td>"
text += "</tr></table>"
text += "</td></tr>"
text += "<tr><td>"
text += "<table bgcolor=white border=1 cellspacing=0 cellpanding=0>"
text += "<tr bgcolor=green>"
for (ii=0;ii<=6;ii++){
text += "<td align=center><span class=label>" + arrD[ii] + "</span></td>"
}
text += "</tr>"
aa = 0
for (kk=0;kk<=5;kk++){
text += "<tr>"
for (ii=0;ii<=6;ii++){
text += "<td align=center><span id=sp" + aa + " onClick='changeBg(this.id)'>1</span></td>"
aa += 1
}
text += "</tr>"
}
text += "</table>"
text += "</td></tr>"
text += "</table>"
text += "</form>"
document.write(text)
changeCal()
}
function changeCal(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var currM = parseInt(document.calForm.selMonth.value)
var prevM
if (currM!=0){
prevM = currM - 1
}
else{
prevM = 11
}
var currY = parseInt(document.calForm.selYear.value)
var mmyyyy = new Date()
mmyyyy.setFullYear(currY)
mmyyyy.setMonth(currM)
mmyyyy.setDate(1)
var day1 = mmyyyy.getDay()
if (day1 == 0){
day1 = 7
}
var arrN = new Array(41)
var aa
for (ii=0;ii<day1;ii++){
arrN[ii] = maxDays((prevM),currY) - day1 + ii + 1
}
aa = 1
for (ii=day1;ii<=day1+maxDays(currM,currY)-1;ii++){
arrN[ii] = aa
aa += 1
}
aa = 1
for (ii=day1+maxDays(currM,currY);ii<=41;ii++){
arrN[ii] = aa
aa += 1
}
for (ii=0;ii<=41;ii++){
eval("sp"+ii).style.backgroundColor = "#FFFFFF"
}
var dCount = 0
for (ii=0;ii<=41;ii++){
if (((ii<7)&&(arrN[ii]>20))||((ii>27)&&(arrN[ii]<20))){
eval("sp"+ii).innerHTML = arrN[ii]
eval("sp"+ii).className = "c3"
}
else{
eval("sp"+ii).innerHTML = arrN[ii]
if ((dCount==0)||(dCount==7)){
eval("sp"+ii).className = "c2"
}
else{
eval("sp"+ii).className = "c1"
}
if ((arrN[ii]==dd)&&(mm==currM)&&(yyyy==currY)){
eval("sp"+ii).style.backgroundColor="#90EE90"
}
}
dCount += 1
if (dCount>6){
dCount=0
}
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<script type="text/javascript">writeCalendar()</script>
<!-- Script Size: 5.13 KB -->
</body>
</html>
jika ada masalah tinggal Comment..
| gambar kalender JavaScript by Lingga |
<html>
<head>
<title></title>
</head>
<body>
<HEAD>
<style type="text/css">
<!--
span.label {color:white;width:30;height:16;text-align:center;margin-top:0;background:green;font:bold 13px Arial}
span.c1 {cursor:hand;color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c2 {cursor:hand;color:red;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c3 {cursor:hand;color:#b0b0b0;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 12px Arial}
-->
</style>
<script type="text/javascript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function maxDays(mm, yyyy){
var mDay;
if((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){
mDay = 30;
}
else{
mDay = 31
if(mm == 1){
if (yyyy/4 - parseInt(yyyy/4) != 0){
mDay = 28
}
else{
mDay = 29
}
}
}
return mDay;
}
function changeBg(id){
if (eval(id).style.backgroundColor != "yellow"){
eval(id).style.backgroundColor = "yellow"
}
else{
eval(id).style.backgroundColor = "#ffffff"
}
}
function writeCalendar(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var arrM = new Array("Januari","Pebruari","Maret","April","Mai","Juni","Juli","Agustus","September","Oktober","November","Desember")
var arrY = new Array()
for (ii=0;ii<=15;ii++){
arrY[ii] = yyyy - 2 + ii
}
var arrD = new Array("<font color=red>Sun</font>","Mon","Tue","Wed","Thu","Fri","Sat")
var text = ""
text = "<form name=calForm>"
text += "<table border=0 cellspacing=0 bgcolor=aqua>"
text += "<tr><td>"
text += "<table width=100% bgcolor=green><tr>"
text += "<td align=left>"
text += "<select name=selMonth onChange='changeCal()'>"
for (ii=0;ii<=11;ii++){
if (ii==mm){
text += "<option value= " + ii + " Selected>" + arrM[ii] + "</option>"
}
else{
text += "<option value= " + ii + ">" + arrM[ii] + "</option>"
}
}
text += "</select>"
text += "</td>"
text += "<td align=right>"
text += "<select name=selYear onChange='changeCal()'>"
for (ii=0;ii<=15;ii++){
if (ii==2){
text += "<option value= " + arrY[ii] + " Selected>" + arrY[ii] + "</option>"
}
else{
text += "<option value= " + arrY[ii] + ">" + arrY[ii] + "</option>"
}
}
text += "</select>"
text += "</td>"
text += "</tr></table>"
text += "</td></tr>"
text += "<tr><td>"
text += "<table bgcolor=white border=1 cellspacing=0 cellpanding=0>"
text += "<tr bgcolor=green>"
for (ii=0;ii<=6;ii++){
text += "<td align=center><span class=label>" + arrD[ii] + "</span></td>"
}
text += "</tr>"
aa = 0
for (kk=0;kk<=5;kk++){
text += "<tr>"
for (ii=0;ii<=6;ii++){
text += "<td align=center><span id=sp" + aa + " onClick='changeBg(this.id)'>1</span></td>"
aa += 1
}
text += "</tr>"
}
text += "</table>"
text += "</td></tr>"
text += "</table>"
text += "</form>"
document.write(text)
changeCal()
}
function changeCal(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var currM = parseInt(document.calForm.selMonth.value)
var prevM
if (currM!=0){
prevM = currM - 1
}
else{
prevM = 11
}
var currY = parseInt(document.calForm.selYear.value)
var mmyyyy = new Date()
mmyyyy.setFullYear(currY)
mmyyyy.setMonth(currM)
mmyyyy.setDate(1)
var day1 = mmyyyy.getDay()
if (day1 == 0){
day1 = 7
}
var arrN = new Array(41)
var aa
for (ii=0;ii<day1;ii++){
arrN[ii] = maxDays((prevM),currY) - day1 + ii + 1
}
aa = 1
for (ii=day1;ii<=day1+maxDays(currM,currY)-1;ii++){
arrN[ii] = aa
aa += 1
}
aa = 1
for (ii=day1+maxDays(currM,currY);ii<=41;ii++){
arrN[ii] = aa
aa += 1
}
for (ii=0;ii<=41;ii++){
eval("sp"+ii).style.backgroundColor = "#FFFFFF"
}
var dCount = 0
for (ii=0;ii<=41;ii++){
if (((ii<7)&&(arrN[ii]>20))||((ii>27)&&(arrN[ii]<20))){
eval("sp"+ii).innerHTML = arrN[ii]
eval("sp"+ii).className = "c3"
}
else{
eval("sp"+ii).innerHTML = arrN[ii]
if ((dCount==0)||(dCount==7)){
eval("sp"+ii).className = "c2"
}
else{
eval("sp"+ii).className = "c1"
}
if ((arrN[ii]==dd)&&(mm==currM)&&(yyyy==currY)){
eval("sp"+ii).style.backgroundColor="#90EE90"
}
}
dCount += 1
if (dCount>6){
dCount=0
}
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<script type="text/javascript">writeCalendar()</script>
<!-- Script Size: 5.13 KB -->
</body>
</html>
jika ada masalah tinggal Comment..
Subscribe to:
Comments (Atom)
