Penjelasan kalender anda

Topik sebelumnya Topik selanjutnya Go down

Penjelasan kalender anda

Post  Admin on Mon Dec 17, 2012 1:24 pm

AWW

Nah disinilah anda dapat meletakkan penjelasan untuk kalender yang anda letakkan dalam area situs web pribadi anda. Penjelasan meliputi:

  • Fitur kalender yang anda pasang
  • Bagaimana cara kerjanya
  • Tempat peletakan (di area situs web pribadi anda) & alasan pemilihan lokasi tersebut
  • Screen capture halaman tempat anda meletakkan kalender tersebut

Oiya, waktu penulisan di-extend sampai hari Selasa (18/12) jam 10.00 pagi. Nah selamat bekerja

WWW
by TTx
avatar
Admin
Admin

Jumlah posting : 959
Join date : 20.09.12
Lokasi : Yogyakartun

Lihat profil user http://blog.uad.ac.id/ttx

Kembali Ke Atas Go down

Tugas Untuk Penjelasan Kalender

Post  fendra mudanta on Mon Dec 17, 2012 2:42 pm

cheers Nama:Fendra Mudanta cheers
Nim:11016018
Prodi:Sistem Informasi


Tugas pemberian tanggalan atau Kalender bila ingin melihat hasilnya silahkan kunjungi [You must be registered and logged in to see this link.] sudah saya letakkan di bagian halaman "Situs Untuk Perkuliahan Pemrograman WEb 1".

Di sini saya akan menjelaskan gimana cara kerja kalender yang saya buwat tersebut langkah pertama persiapkan halaman html untuk menaruh kalender yang akan di tampilkan ini,
1.Masukkan baris berikut di dalam bagian <HEAD>: <script language="JavaScript" src="cal2.js"> perintah ini untuk memanggil perintah juga di dalam cal2.js tentunya kita harus punya script atau perintah di dalam cal2.js isi dari cal2.js yatitu perintah untuk menampilkan atau menjalankan perintah tanggal,bulan,dan tahun.

2.masukkan <script language="JavaScript" src="cal_conf2.js"> ini perintah untuk memanggil perintah di dalam cal_conf2.js kemudian tutup dengan perintah </ script> dan </head> dan di dalam perintah cal_conf2.js berbeda dengan cal2.js di dalam cal_conf2.js terdapat perintah untuk menampilkan bulan dan hari tersebut yang otomatif terabdet setiap bergantinya waktu menjadi hari berikutnya dan hari berganti ke awal bulan bila sudah akan waktunya pergantian. nah di dalam tampilan kita akan mendapakan tulisan dibawah kalender yaitu close guna untuk menghilangkan tampilan tanggal tersebut tidak harus terpaku pada huruf silang atau (X) di atas pojok kanan dan ada tulisan clear guna hampir sama dengan perintah close yaitu untuk menghilangkan tampilan kalender, Kedua perintah (Close) dan (Clear) tersebut terdapat di dalam perintah cal_conf2.js, memang ada keterkaitan antara perintah cal2.js dan perintah di cal_conf2.js kenapa bisa begitu karena di dalam perintahnya masing - masing terdapat perintah utntuk mengabdet perintah bergantinya hari,bulan dan tahun sesuai dengan ketetapan saat kita menampilkannya, di dalam cal_conf2.js ada firstinput atau perintah untuk memasukkan suatu di dalam kolom yang akan tampil nantinya namun sebenarnya tanpa kita memasukkan sesutu di dalam kolom tersebut kita sudah bisa mengeklik perintah untuk menampilkan kalender tersebut mungkin hanya untuk syarat agar bisa menampilkan kalender tersebut.Kesimpulannya yaitu dalam pemberian perintah untuk menampikan kalender harus menggunakan cal2.js dan cal_conf2.js dan tentunya di dalam ke dua perintah tersebut sudah terisi script yang seperti saya jelaskan tadi , cara menjalankan atau menampilkan kalender di halaman web saya tersebut sebenarnya tak perlu saya cerita sudah ada petunjuk yang jelas di situ tertulis untuk melihat kalender tinggal mengeklik perintah di samping kolom dan ada tambahan bila ingin menghilangkan kalender ada pilihan close dan clear di dalam tampilan kalender bagian bawah dan bila ingin melihat bulan berikutnya dan sebelumnya tinggal geser aja dengan mengeklik tanda panah di antara nama bulan dan tahun. Mungkin sampai di sini yang dapat saya jelaskan Semoga bermanfaat apabila dalam menjelasakan belom sempurna harap di maklumi karna masih dalam proses belajar,Terima kasih, Smile


Screen capture halaman tempat meletakkan kalender tersebut:

Alasan pemilihan lokasi tersebut karena mudah untuk di lihat sebenarnya bisa di letakkan di manapun kita mau namun ketika membuka web secara tidak langsung mata kita tertuju pada halaman depan nah itu alasan mengapa saya menaruhnya di bagian lokasi tersebut.


[You must be registered and logged in to see this image.]

[You must be registered and logged in to see this image.]

fendra mudanta

Jumlah posting : 17
Join date : 26.09.12
Age : 25
Lokasi : BANTUL,YOGYAKARTA

Lihat profil user http://fendramudanta.byethost11.com

Kembali Ke Atas Go down

Membuat Kalender Pada Halaman Web

Post  Ruspandi on Tue Dec 18, 2012 1:47 pm

Nama: Ruspandi
Nim: 11016005

Di bawah ini saya postingkan alamat web saya yang telah saya edit dan saya menambahkan kalender
beserta scriptnya

[You must be registered and logged in to see this link.]

dan dengan script

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>My Calender</title>
</head>

<body onLoad="loadclock()" topmargin="0" leftmargin="0">

<table border="5px solid #808080;" cellpadding="0" width="120" height="150" cellspacing="0">
<tr>
<td bgcolor="#333333"><p align="center">
<script language="JavaScript">
monthnames = new Array(
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"Decembr");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("");
document.write("<table style='padding-left:3px; font-color:#ffffff' size='1' font-family:tahoma;" );
document.write(" cellpadding=0 cellspacing=0>");

document.write("<tr><td colspan=7><center><font color='#ffffff' size='1' face='Verdana'>"
+ monthnames[thismonth] + " " + thisyear
+ "</font></center></td></tr>");
document.write("<tr>");
document.write("<td><b><font color='#FF0000' size='1' face='tahoma'>S</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>M</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>T</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>W</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>T</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>F</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>S</font></td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td><font color='#ffffff' size='1' face='tahoma'>-</font></td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td><font color='#ffffff' size='1' face='tahoma'>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='#ff0000' size='1' face='tahoma'>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write("-");
}
if (count==thisdate) {
document.write("</font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</font>");
</script>

</tr>
</table>

Dan ini merupakan screen Capturenya.....:
[You must be registered and logged in to see this link.]





Terakhir diubah oleh Ruspandi tanggal Tue Dec 18, 2012 1:59 pm, total 1 kali diubah
avatar
Ruspandi

Jumlah posting : 7
Join date : 26.09.12
Age : 23

Lihat profil user

Kembali Ke Atas Go down

Re: Penjelasan kalender anda

Post  Anggini Dian Oktami on Tue Dec 18, 2012 1:51 pm

Anggini Dian Oktami 11016013
----------------------------
KALENDER

SCRIPT:
------------------------------
<html>
<head>
<style type="text/css">
body {background-color: #AAAA99}
.main {
width:200px;
border:1px solid red;
}
.month {
background-color:red;
font:bold 12px cambria;
color:white;
}
.daysofweek {
background-color:pink;
font:bold 12px cambria;
color:white;
}
.days {
font-size: 12px;
font-family:cambria;
color:black;
background-color: lightpink;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
</style>
<script type="text/javascript" src="http://subhishine.freehostia.com/shine/files/basiccalendar.js">
</script>
</head>
<body>
<h2>Kalender</h2>
<script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>

</body>
</html>
-----------------------------------------

CARA KERJA:
Pada bagian head diperuntukkan untuk meletakkan CSS nya saja. Script kalendernya ada pada bagian body.
*Mengambil dan menyimpan tanggal => var todaydate=new Date()
*Mengambil dan menyimpan bulan => var curmonth=todaydate.getMonth()+1 //get current month (1-12)
*Mengambil dan menyimpan tahun => var curyear=todaydate.getFullYear() //get current year
*Menampilkan kalender => document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
----------------------------------------


[img][You must be registered and logged in to see this link.] [/img]


Terakhir diubah oleh Anggini Dian Oktami tanggal Tue Dec 18, 2012 1:55 pm, total 1 kali diubah
avatar
Anggini Dian Oktami

Jumlah posting : 22
Join date : 25.09.12
Age : 25
Lokasi : Galagahsari, Yogyakarta

Lihat profil user http://Anggini13.webatu.com

Kembali Ke Atas Go down

Tugas Kalender Saya

Post  Jesica indiarti on Tue Dec 18, 2012 1:52 pm

Nama : Jesica Indiarti
Nim : 11016012

1. Cara kerja Kalender
Langkah 1: Masukkan bawah ke bagian <body> halaman Anda di mana Anda ingin kalender untuk muncul:
<script language="JavaScript" src="calendar.js"></script>
<script language="JavaScript">
/*
Dynamic Calendar Script- By Constantin (http://212.1.77.9/)
Permission given to Dynamic Drive to include script in archive
For 1000's more DHTML scripts, visit [You must be registered and logged in to see this link.]
*/
var cal = new Calendar();
</script>
Langkah 2: Tambahkan handler bawah event ke dalam tag <body> itu sendiri, seperti ini:
<body onLoad="setCurrentMonth()">

Langkah 3: file Calendar.js(Tentunya harus punya file calender.js) dan diupload ke dalam direktori yang sama seperti halaman yang berisi kalender.

2. Saya Meletakkan kalender di area Untitled yang ada di website saya agar ketika membuka website saya langsung terlihat kalender tersebut.

3. Hasil ScreenCapture nya:
[You must be registered and logged in to see this link.]



4. bisa langsung dilihat di alamat website saya [You must be registered and logged in to see this link.]
avatar
Jesica indiarti

Jumlah posting : 16
Join date : 23.09.12
Age : 23
Lokasi : yogyakarta

Lihat profil user

Kembali Ke Atas Go down

Penjelasan Kalender

Post  utari puspitarini on Tue Dec 18, 2012 1:53 pm

1. Masukkan baris berikut di dalam bagian <HEAD>:
<script language="JavaScript" src="cal2.js">
</ Script>
<script language="JavaScript" src="cal_conf2.js"> </ script>

Anda akan menentukan kalender (s) dan pengaturan dalam "cal_conf2.js", nama file tidak berpengaruh
Anda tidak perlu menempatkan "cal2.js" dan "cal_conf2.js" dalam 1folder dari halaman HTML, selama Anda dapat menentukan path web untuk mereka di SRC.

2. Untuk formulir isian untuk menyimpan tanggal yang dipilih,
<Input type = "text" name = "CalendarFormFieldName" value = "..." size = "...">

Anda memasukan string tanggal, dalam format yang didukung


untuk screen capture nya, saya belum bisa menampilkan. dikarenakan saya lupa login hostingnya dan itu ada di rumah

3. Gunakan link Javascript kode untuk pop up kalender. Untuk link, membuat cara ini:
href="javascript:showCal('CalendarName')"> <a ... </ a>


# Untuk mengatur kalender (s):

pemanggilan fungsi berikut harus dimasukkan ke dalam "cal_conf2.js",

1. Untuk menambah kalender:
addCalendar ("CalendarName", "CalendarWindowTitle", "CalendarFormFieldName", "CalendarFormName");

2. Untuk menentukan lebar kalender:
setWidth (90, 1, 12, 1);

Parameter pertama dalam "setWidth (90, 1, 12, 1)" panggilan untuk menentukan lebar untuk judul dalam pixel. Anda dapat menyesuaikan untuk menguji berbagai font dan ukuran font.

Parameter kedua dalam "setWidth (90, 1, 12, 1)" panggilan untuk menentukan apakah akan menampilkan tahun dan bulan dalam satu baris atau dua baris.

Parameter ketiga dalam "setWidth (90, 1, 12, 1)" panggilan untuk menentukan lebar dari sel hari dalam pixel.

Paramenter terakhir dalam "setWidth (90, 1, 12, 1)" panggilan untuk menentukan bagaimana Anda ingin hari-hari singkatnya. Biasanya Anda akan menggunakan 1 atau 3 di sini, jadi hari Minggu akan ditampilkan sebagai "S" jika Anda menggunakan 1, atau sebagai "Sun" jika Anda menggunakan 3.

4. Untuk menentukan warna latar belakang:
setColor ("# cccccc", "# cccccc", "# ffffff", "# ffffff", "# 333333", "# cccccc", "# 333333");

5. Untuk menentukan warna font:
setFontColor ("# 333333", "# 333333", "# 333333", "# ffffff", "# 333333");

6. Untuk menentukan format string tanggal:
setFormat ("yyyy / mm / dd");

Untuk menentukan format string tanggal, Anda akan menggunakan "yyyy", "mm" dan "dd" untuk tahun, bulan dan hari dalam jumlah, dan menggunakan "HARI" untuk hari minggu di format "SUN", atau "Hari" untuk hari minggu di format "Sun", dan "MON" untuk bulan dalam format "JAN", atau "Mon" untuk bulan dalam format "Jan".

Single "/" adalah pemisah default,
.

7. Untuk menentukan hari minggu Format (opsional):
setWeekDay (0);

Set ke 0 untuk menunjukkan hari Minggu pertama, atau set ke 1 untuk menunjukkan Senin pertama untuk hari minggu.


Javascript berikut untuk membantu Anda.

1. CheckDate (CalendarName)

The "CheckDate ()" panggilan kembali 0 jika nilai dari kolom formulir yang menyimpan tanggal dipetik dari kalender ditentukan melewati pemeriksaan format, mengembalikan 1 jika nilai kosong atau tidak lulus pengecekan, atau mengembalikan 2 jika kalender yang ditentukan tidak didefinisikan.

2. getCurrentDate ()

The "getCurrentDate ()" panggilan mengembalikan tanggal sebagai string dalam format Anda mendefinisikan dengan "setFormat ()" panggilan.

3. compareDates (date1, date2)

The "compareDates ()" panggilan membandingkan dua string tanggal yang diberikan. Jika string tanggal yang diberikan tidak lulus pemeriksaan format tanggal, string dikembalikan oleh "getCurrentDate ()" akan digunakan

4. getNumbers (tanggal)

The "getNumbers ()" panggilan mengembalikan array string dengan tahun, bulan dan hari diurai dari string tanggal yang diberikan.



utari puspitarini

Jumlah posting : 4
Join date : 28.09.12

Lihat profil user http://utarinii.beythost33.com

Kembali Ke Atas Go down

Kalender Pada Halaman Web

Post  adhy sanjaya on Tue Dec 18, 2012 1:54 pm

Nama : Adhy Sanjaya
NIM : 11016001

Assalamu'alaikum Pak..
Maaf atas keterlambatan saya dalam memposting tugas Web...

Ini Merupakan Tugas Saya...

[You must be registered and logged in to see this link.]

dan dibawah ini merupakan skirp daripada kalender tersebut.. :
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>My Calender</title>
</head>

<body onLoad="loadclock()" topmargin="0" leftmargin="0">

<table border="5px solid #808080;" cellpadding="0" width="150" height="170" cellspacing="0">
<tr>
<td bgcolor="#333333"><p align="center">
<script language="JavaScript">
monthnames = new Array(
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"Decembr");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("");
document.write("<table style='padding-left:3px; font-color:#ffffff' size='1' font-family:tahoma;" );
document.write(" cellpadding=0 cellspacing=0>");

document.write("<tr><td colspan=7><center><font color='#ffffff' size='1' face='Verdana'>"
+ monthnames[thismonth] + " " + thisyear
+ "</font></center></td></tr>");
document.write("<tr>");
document.write("<td><b><font color='#FF0000' size='1' face='tahoma'>S</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>M</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>T</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>W</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>T</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>F</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>S</font></td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td><font color='#ffffff' size='1' face='tahoma'>-</font></td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td><font color='#ffffff' size='1' face='tahoma'>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='#ff0000' size='1' face='tahoma'>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write("-");
}
if (count==thisdate) {
document.write("</font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</font>");
</script>
</td>
</tr>
<tr>
<td bgcolor="#333333" height="27">
<p align="center"><span id=tick2>
</span>
<script>
function show2(){
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime="<b><FONT color='#ffffff' face='verdana' style='font-size : 11px;'>"+hours+":"+minutes+":"+seconds+" "+dn+"</font></b>"
if (!document.all)
document.write(ctime)
else
tick2.innerHTML=ctime
}
function loadclock(){
if (document.all)
setInterval("show2()",1000)
}
if (!document.all)
show2()
</script></td>
</tr>
</table>

</body>

</html>

ini Screen Capturenya Pak :

[You must be registered and logged in to see this link.]



santa


Terakhir diubah oleh adhy sanjaya tanggal Tue Dec 18, 2012 2:03 pm, total 1 kali diubah
avatar
adhy sanjaya

Jumlah posting : 9
Join date : 23.09.12

Lihat profil user

Kembali Ke Atas Go down

Penjelasan Kalender

Post  aga rahmatullah on Tue Dec 18, 2012 1:58 pm

Nama : Aga Rahmatullah
NIM : 10016005


script calender :
<script type="text/javascript">
// mulai...........
var waktu=new Date()
var tahun=waktu.getFullYear()
var hari=waktu.getDay()
var bulan=waktu.getMonth()
var tanggal=waktu.getDate()
if (tanggal < 7) {tanggal="0"+tanggal}
var hariarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu")
var bulanarray=new Array("Januari","Pebruari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember")
document.write(hariarray[hari]+", "+tanggal+" "+bulanarray[bulan]+" "+tahun)
</script>

• pertama script menjalankan variabel waktu yang berisi "new Data()" kemudian mengidentifikasi variabel tahun, variabel hari, varibel bulan dan variable tanggal yang berisi fungsi “if (tanggal < 7) {tanggal="0"+tanggal}” setelah itu variable hariarray berisi nama-nama hari dan variable bulan berisi nama-nama bulan dan terakhir variable yang ada dipanggil dengan fungsi document.write yang berisi (hariarray[hari]+", "+tanggal+" "+bulanarray[bulan]+" "+tahun) .
setelah script dijalankan akan muncul sebuah kalender yang sesuai dengan hari dieksekusi dengan format : Hari, tanggal + bulan + tahun
• kalender digital sederhana ini saya letekan dihalaman home_page web personal saya
• Scren capture
[You must be registered and logged in to see this link.]


aga rahmatullah

Jumlah posting : 9
Join date : 24.09.12

Lihat profil user

Kembali Ke Atas Go down

Re: Penjelasan kalender anda

Post  Bayu Ikhsan Nugraha on Tue Dec 18, 2012 1:59 pm

NAMA : BAYU IKHSAN NUGRAHA
NIM : 11016007

Cara Kerja Kalender Dapat Menapilkan Kalender Tanpa Harus Tersambung Ke internet, dengan kata lain LOKAL
Sebelumnya saya minta maaf karena belum saya masukkan kedalam Website saya
Demikian Yang Saya ketahui... TERIMA KASIH Very Happy

<center>
<script LANGUAGE="JavaScript">

<!-- Begin
monthnames = new Array(
"January",
"Februrary",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"Decemeber");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<table border=2 bgcolor=white ");
document.write("bordercolor=black><font color=black>");
document.write("<tr><td colspan=7><center><strong>"
+ monthnames[thismonth] + " " + thisyear
+ "</strong></center></font></td></tr>");
document.write("<tr>");
document.write("<td align=center>Su</td>");
document.write("<td align=center>M</td>");
document.write("<td align=center>Tu</td>");
document.write("<td align=center>W</td>");
document.write("<td align=center>Th</td>");
document.write("<td align=center>F</td>");
document.write("<td align=center>Sa</td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='FF0000'><strong>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table></p>");
// End -->
</script>
</center>

[You must be registered and logged in to see this link.]



Terakhir diubah oleh Bayu Ikhsan Nugraha tanggal Tue Dec 18, 2012 2:04 pm, total 2 kali diubah
avatar
Bayu Ikhsan Nugraha

Jumlah posting : 12
Join date : 22.09.12

Lihat profil user http://www.bayuikhsan.webatu.com

Kembali Ke Atas Go down

Tugas Kalender (sederhana)

Post  yuliaswandari on Tue Dec 18, 2012 2:00 pm

NAMA : YULIA SWANDARI
NIM : 10016020

Alamat website :swandari.tk

Letak kalender di menu Lecture pada submenu Tugas Kalender dikarenakan saya sudah menyiapkan tempat khusus untuk tugas dari perkuliahan.

Fitur : Kalender tersebut hanya dapat menampilkan tanggal hari ini saja.

screen shoot : [You must be registered and logged in to see this link.]

[You must be registered and logged in to see this image.]

Cara kerja :
Membuat tabel yang diisi dengan variabel Hari, Bulan, dan Tahun yang diambil dengan fungsi getDate, getMonth, dan getYear.

Sekian. Terimakasih.


Terakhir diubah oleh yuliaswandari tanggal Tue Dec 18, 2012 2:12 pm, total 1 kali diubah
avatar
yuliaswandari

Jumlah posting : 10
Join date : 28.09.12

Lihat profil user http://tuliskoding.blogspot.com

Kembali Ke Atas Go down

kalender

Post  agung pribadi on Tue Dec 18, 2012 2:02 pm

Nama : Agung Pribadi hamid

Nim : 11B16011


script:
<html>
<head>
<script language="JavaScript">

/*
Dynamic Calendar II (By Jason Moon at [You must be registered and logged in to see this link.]
Permission granted to Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit [You must be registered and logged in to see this link.]
*/

var ns6=document.getElementById&&!document.all
var ie4=document.all

var Selected_Month;
var Selected_Year;
var Current_Date = new Date();
var Current_Month = Current_Date.getMonth();

var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var Current_Year = Current_Date.getYear();
if (Current_Year < 1000)
Current_Year+=1900


var Today = Current_Date.getDate();

function Header(Year, Month) {

if (Month == 1) {
Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
}
var Header_String = Month_Label[Month] + ' ' + Year;
return Header_String;
}



function Make_Calendar(Year, Month) {
var First_Date = new Date(Year, Month, 1);
var Heading = Header(Year, Month);
var First_Day = First_Date.getDay() + 1;
if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
((Days_in_Month[Month] == 30) && (First_Day == 7))) {
var Rows = 6;
}
else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
var Rows = 4;
}
else {
var Rows = 5;
}

var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">';

HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>';

HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>';

HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>';

var Day_Counter = 1;
var Loop_Counter = 1;
for (var j = 1; j <= Rows; j++) {
HTML_String += '<tr ALIGN="left" VALIGN="top">';
for (var i = 1; i < 8; i++) {
if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {
if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {
HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';
}
else {
HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Day_Counter + '</td>';
}
Day_Counter++;
}
else {
HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';
}
Loop_Counter++;
}
HTML_String += '</tr>';
}
HTML_String += '</table></td></tr></table>';
cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
cross_el.innerHTML = HTML_String;
}


function Check_Nums() {
if ((event.keyCode < 48) || (event.keyCode > 57)) {
return false;
}
}



function On_Year() {
var Year = document.when.year.value;
if (Year.length == 4) {
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
}

function On_Month() {
var Year = document.when.year.value;
if (Year.length == 4) {
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
else {
alert('Please enter a valid year.');
document.when.year.focus();
}
}


function Defaults() {
if (!ie4&&!ns6)
return
var Mid_Screen = Math.round(document.body.clientWidth / 2);
document.when.month.selectedIndex = Current_Month;
document.when.year.value = Current_Year;
Selected_Month = Current_Month;
Selected_Year = Current_Year;
Make_Calendar(Current_Year, Current_Month);
}


function Skip(Direction) {
if (Direction == '+') {
if (Selected_Month == 11) {
Selected_Month = 0;
Selected_Year++;
}
else {
Selected_Month++;
}
}
else {
if (Selected_Month == 0) {
Selected_Month = 11;
Selected_Year--;
}
else {
Selected_Month--;
}
}
Make_Calendar(Selected_Year, Selected_Month);
document.when.month.selectedIndex = Selected_Month;
document.when.year.value = Selected_Year;
}

</script>
</head>
<body>
<div id=NavBar style="position:relative;width:286px;top:5px;" align="left">
<form name="when"><table>
<tr>
<td><input type="button" value="<-- Last" onClick="Skip('-')"></td>
<td> </td>
<td><select name="month" onChange="On_Month()">

<script language="JavaScript1.2">
if (ie4||ns6){
for (j=0;j<Month_Label.length;j++) {
document.writeln('<option value=' + j + '>' + Month_Label[j]);
}
}
</script>

</select>
</td>
<td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td>
<td> </td>
<td><input type="button" value="Next -->" onClick="Skip('+')"></td>
</tr></table></form></div>
<div id=Calendar style="position:relative;width:238px;top:-2px;" align="left"></div>
<body onLoad="Defaults()">
</body>
</html>
================================================================================================================
Cara Kerja:
1. Membuat div id yang digunakan untuk mengelompokkan/menaruh posisi tulisan
2. Membuat form name=”when”, setelah itu membuat tabel
3. Didalam tabel tersebut ada <tr> yang berfungsi untuk membuat baris, dan didalam baris ada <td> yaitu kolom . Kemudian didalam kolom tersebut ada button yang digunakan untuk meletakkan tulisan last dan bersifat onclick
4. Disamping kolom last akan menampilkan bulan
5. Jika bulan yang diklik kurang dari bulan yang sekarang maka akan tampil bulan yang sebelumnya.
6. Kemudian membuat kolom lagi yang digunakan untuk menampilkan tahun dan tipe dari tahun tersebut adalah text.
7. Setelah itu disamping kolom tahun ada kolom next yang digunakan untuk mengganti bulan setelahnya dan typenya adalah button.
8. Kemudian dipanggil fungsi yang ada didalam head.
===============================================================================================================
screen shotnya:
[You must be registered and logged in to see this link.]




agung pribadi

Jumlah posting : 26
Join date : 27.09.12

Lihat profil user http://agungpribadih.byethost3.com/

Kembali Ke Atas Go down

Tgas Web

Post  Baiq Widya Desita on Tue Dec 18, 2012 2:06 pm

Baiq Widya Desita N
11016010

1.Cara kerja
Langkah 1: Masukkan bawah ke bagian <head> halaman Anda:
<script language="JavaScript">

/*
Dynamic Calendar II (By Jason Moon at [You must be registered and logged in to see this link.]
Permission granted to Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit [You must be registered and logged in to see this link.]
*/

var ns6=document.getElementById&&!document.all
var ie4=document.all

var Selected_Month;
var Selected_Year;
var Current_Date = new Date();
var Current_Month = Current_Date.getMonth();

var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var Current_Year = Current_Date.getYear();
if (Current_Year < 1000)
Current_Year+=1900


var Today = Current_Date.getDate();

function Header(Year, Month) {

if (Month == 1) {
Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
}
var Header_String = Month_Label[Month] + ' ' + Year;
return Header_String;
}



function Make_Calendar(Year, Month) {
var First_Date = new Date(Year, Month, 1);
var Heading = Header(Year, Month);
var First_Day = First_Date.getDay() + 1;
if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
((Days_in_Month[Month] == 30) && (First_Day == 7))) {
var Rows = 6;
}
else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
var Rows = 4;
}
else {
var Rows = 5;
}

var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">';

HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>';

HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>';

HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>';

var Day_Counter = 1;
var Loop_Counter = 1;
for (var j = 1; j <= Rows; j++) {
HTML_String += '<tr ALIGN="left" VALIGN="top">';
for (var i = 1; i < 8; i++) {
if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {
if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {
HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';
}
else {
HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Day_Counter + '</td>';
}
Day_Counter++;
}
else {
HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';
}
Loop_Counter++;
}
HTML_String += '</tr>';
}
HTML_String += '</table></td></tr></table>';
cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
cross_el.innerHTML = HTML_String;
}


function Check_Nums() {
if ((event.keyCode < 48) || (event.keyCode > 57)) {
return false;
}
}



function On_Year() {
var Year = document.when.year.value;
if (Year.length == 4) {
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
}

function On_Month() {
var Year = document.when.year.value;
if (Year.length == 4) {
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
else {
alert('Please enter a valid year.');
document.when.year.focus();
}
}


function Defaults() {
if (!ie4&&!ns6)
return
var Mid_Screen = Math.round(document.body.clientWidth / 2);
document.when.month.selectedIndex = Current_Month;
document.when.year.value = Current_Year;
Selected_Month = Current_Month;
Selected_Year = Current_Year;
Make_Calendar(Current_Year, Current_Month);
}


function Skip(Direction) {
if (Direction == '+') {
if (Selected_Month == 11) {
Selected_Month = 0;
Selected_Year++;
}
else {
Selected_Month++;
}
}
else {
if (Selected_Month == 0) {
Selected_Month = 11;
Selected_Year--;
}
else {
Selected_Month--;
}
}
Make_Calendar(Selected_Year, Selected_Month);
document.when.month.selectedIndex = Selected_Month;
document.when.year.value = Selected_Year;
}

</script>
Langkah 2: Masukkan bawah ke bagian <body> halaman Anda di mana Anda ingin kalender untuk muncul:
<div id=NavBar style="position:relative;width:286px;top:5px;" align="left">
<form name="when"><table>
<tr>
<td><input type="button" value="<-- Last" onClick="Skip('-')"></td>
<td> </td>
<td><select name="month" onChange="On_Month()">

<script language="JavaScript1.2">
if (ie4||ns6){
for (j=0;j<Month_Label.length;j++) {
document.writeln('<option value=' + j + '>' + Month_Label[j]);
}
}
</script>

</select>
</td>
<td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td>
<td> </td>
<td><input type="button" value="Next -->" onClick="Skip('+')"></td>
</tr></table></form></div>
<div id=Calendar style="position:relative;width:238px;top:-2px;" align="left"></div>
Langkah 3: Last but not least, tambahkan berikut ke tag <body> itu sendiri, seperti:
<body onLoad="Defaults()">

2.tempat saya meletakkan kalender tersebut di untitled agar ketika dibuka langsung terlihat kalender
3.hasil screencapture
[You must be registered and logged in to see this link.]



4.bisa dilihat diwebsite saya [You must be registered and logged in to see this link.]
avatar
Baiq Widya Desita

Jumlah posting : 16
Join date : 25.09.12

Lihat profil user

Kembali Ke Atas Go down

Tugas Kalender Web

Post  Atma Turida on Tue Dec 18, 2012 2:08 pm

<html>
<head>
<style type="text/css">

.main {

width:200px;

border:1px solid black;

}

.month {

background-color:black;

font:bold 12px verdana;

color:white;

}

.daysofweek {

background-color:gray;

font:bold 12px verdana;

color:white;

}

.days {

font-size: 12px;

font-family:verdana;

color:black;

background-color: lightyellow;

padding: 2px;

}

.days #today{

font-weight: bold;

color: red;

}

</style>

<script type="text/javascript" src="http://subhishine.freehostia.com/shine/files/basiccalendar.js">

</script>
</head>
<body>
<script type="text/javascript">



var todaydate=new Date()

var curmonth=todaydate.getMonth()+1 //get current month (1-12)

var curyear=todaydate.getFullYear() //get current year



document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));

</script>

</body>
</html>

===========================

screenshootnya :

[You must be registered and logged in to see this link.]



===========================
penjelasan:

var todaydate=new Date() = menampilkan tanggal

var curmonth=todaydate.getMonth()+1 //get current month (1-12) = menampilkan Bulan

var curyear=todaydate.getFullYear() //get current year = menampilkan tahun

document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1)); = menampilkan kalender
avatar
Atma Turida

Jumlah posting : 21
Join date : 22.09.12

Lihat profil user http://atma.byethost17.com/

Kembali Ke Atas Go down

Re: Penjelasan kalender anda

Post  DEWI ARUM SARI 1 on Tue Dec 18, 2012 2:12 pm

<html>
<head><script language="JavaScript">

/*
Dynamic Calendar II (By Jason Moon at [You must be registered and logged in to see this link.]
Permission granted to Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit [You must be registered and logged in to see this link.]
*/

var ns6=document.getElementById&&!document.all
var ie4=document.all

var Selected_Month;
var Selected_Year;
var Current_Date = new Date();
var Current_Month = Current_Date.getMonth();

var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var Current_Year = Current_Date.getYear();
if (Current_Year < 1000)
Current_Year+=1900


var Today = Current_Date.getDate();

function Header(Year, Month) {

if (Month == 1) {
Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
}
var Header_String = Month_Label[Month] + ' ' + Year;
return Header_String;
}



function Make_Calendar(Year, Month) {
var First_Date = new Date(Year, Month, 1);
var Heading = Header(Year, Month);
var First_Day = First_Date.getDay() + 1;
if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
((Days_in_Month[Month] == 30) && (First_Day == 7))) {
var Rows = 6;
}
else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
var Rows = 4;
}
else {
var Rows = 5;
}

var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">';

HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>';

HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>';

HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>';

var Day_Counter = 1;
var Loop_Counter = 1;
for (var j = 1; j <= Rows; j++) {
HTML_String += '<tr ALIGN="left" VALIGN="top">';
for (var i = 1; i < 8; i++) {
if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {
if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {
HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';
}
else {
HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Day_Counter + '</td>';
}
Day_Counter++;
}
else {
HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';
}
Loop_Counter++;
}
HTML_String += '</tr>';
}
HTML_String += '</table></td></tr></table>';
cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
cross_el.innerHTML = HTML_String;
}


function Check_Nums() {
if ((event.keyCode < 48) || (event.keyCode > 57)) {
return false;
}
}



function On_Year() {
var Year = document.when.year.value;
if (Year.length == 4) {
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
}

function On_Month() {
var Year = document.when.year.value;
if (Year.length == 4) {
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
else {
alert('Please enter a valid year.');
document.when.year.focus();
}
}


function Defaults() {
if (!ie4&&!ns6)
return
var Mid_Screen = Math.round(document.body.clientWidth / 2);
document.when.month.selectedIndex = Current_Month;
document.when.year.value = Current_Year;
Selected_Month = Current_Month;
Selected_Year = Current_Year;
Make_Calendar(Current_Year, Current_Month);
}


function Skip(Direction) {
if (Direction == '+') {
if (Selected_Month == 11) {
Selected_Month = 0;
Selected_Year++;
}
else {
Selected_Month++;
}
}
else {
if (Selected_Month == 0) {
Selected_Month = 11;
Selected_Year--;
}
else {
Selected_Month--;
}
}
Make_Calendar(Selected_Year, Selected_Month);
document.when.month.selectedIndex = Selected_Month;
document.when.year.value = Selected_Year;
}

</script>
</head>
<body>
<div id=NavBar style="position:relative;width:286px;top:5px;" align="left">
<form name="when"><table>
<tr>
<td><input type="button" value="<-- Last" onClick="Skip('-')"></td>
<td> </td>
<td><select name="month" onChange="On_Month()">

<script language="JavaScript1.2">
if (ie4||ns6){
for (j=0;j<Month_Label.length;j++) {
document.writeln('<option value=' + j + '>' + Month_Label[j]);
}
}
</script>

</select>
</td>
<td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td>
<td> </td>
<td><input type="button" value="Next -->" onClick="Skip('+')"></td>
</tr></table></form></div>
<div id=Calendar style="position:relative;width:238px;top:-2px;" align="left"></div>
<body onLoad="Defaults()">
</body>
</html>

Hasil:[You must be registered and logged in to see this link.]

confused
<!-- saved from url=(0054)file:///C:/Users/INDRI/Downloads/coba_kalender(1).html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head><body>// JavaScript Document

<title>Program Menentukan Bulan</title>

<center>
<script language="JavaScript">

<!-- Begin
monthnames = new Array(
"January",
"Februrary",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"Decemeber");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<table border=2 bgcolor=white ");
document.write("bordercolor=black><font color=black>");
document.write("<tr><td colspan=7><center><strong>"
+ monthnames[thismonth] + " " + thisyear
+ "</strong></center></font></td></tr>");
document.write("<tr>");
document.write("<td align=center>Su</td>");
document.write("<td align=center>M</td>");
document.write("<td align=center>Tu</td>");
document.write("<td align=center>W</td>");
document.write("<td align=center>Th</td>");
document.write("<td align=center>F</td>");
document.write("<td align=center>Sa</td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='FF0000'><strong>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table></p>");
// End -->
</script><font color="black"></font><table border="2" bgcolor="white" bordercolor="black"><tbody><tr><td colspan="7"><center><strong>Decemeber 2012</strong></center></td></tr><tr><td align="center">Su</td><td align="center">M</td><td align="center">Tu</td><td align="center">W</td><td align="center">Th</td><td align="center">F</td><td align="center">Sa</td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td>1</td></tr><tr><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr><tr><td>16</td><td><font color="FF0000"><strong>17</strong></font></td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td></tr><tr><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td></tr><tr><td>30</td><td>31</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr></tr></tbody></table><p></p><font color="black">
</font></center><font color="black">


</font></body></html>
hasil: [You must be registered and logged in to see this link.]





Terakhir diubah oleh DEWI ARUM SARI 1 tanggal Tue Dec 18, 2012 2:16 pm, total 1 kali diubah
avatar
DEWI ARUM SARI 1

Jumlah posting : 19
Join date : 22.09.12
Age : 24

Lihat profil user

Kembali Ke Atas Go down

Tugas Kalender Dom

Post  RAMADHAN ANSYARI on Tue Dec 18, 2012 2:12 pm

<head>
<title>Select Date</title>
<style type='text/css'>
.title { font-family:verdana; font-size:9px; color:#333333; }
.days { font-family:verdana; font-size:9px; color:#333333; }
.foot { font-family:verdana; font-size:9px; color:#cccccc; }
.day { font-family:verdana; font-size:9px; color:#333333; }
.currentDay { font-family:verdana; font-size:9px; color:#ffffff; }
.titlea { text-decoration:none; color:#333333; }
.daya { text-decoration:none; color:#333333; }
.currenta { text-decoration:none; color:#ffffff; }
.foota { text-decoration:none; color:#333333; }
</style>
</head>
<body>
<table align='center' border='0' bgcolor='#333333' cellspacing='0' cellpadding='1'><tr><td>
<table cellspacing='1' cellpadding='3' border='0'><tr align='center' bgcolor='#cccccc'><td colspan='7'>
<table cellpadding='0' cellspacing='0' border='0'><tr align='center' valign='middle'><td><span class='title'><b><a class='titlea' href='javascript:if(window.opener && !window.opener.closed && window.opener.moveYear) window.opener.moveYear(-1)'>&nbsp;«</a>&nbsp;<a class='titlea' href='javascript:if (window.opener && !window.opener.closed && window.opener.prepMonth) window.opener.prepMonth(11)'>‹&nbsp;</a></b></span></td><td width='90'><nobr><b><span class='title'>December 2012</span></b></nobr></td><td><span class='title'><b><a class='titlea' href='javascript:if (window.opener && !window.opener.closed && window.opener.nextMonth) window.opener.nextMonth(11)'>&nbsp;›</a>&nbsp;<a class='titlea' href='javascript:if(window.opener && !window.opener.closed && window.opener.moveYear) window.opener.moveYear(1)'>»&nbsp;</a></b></span></td></tr></table>
</td></tr><tr align='center' bgcolor='#cccccc'><td width='15'><span class='days'>S</span></td><td width='15'><span class='days'>M</span></td><td width='15'><span class='days'>T</span></td><td width='15'><span class='days'>W</span></td><td width='15'><span class='days'>T</span></td><td width='15'><span class='days'>F</span></td><td width='15'><span class='days'>S</span></td></tr><tr align='center' bgcolor='#ffffff'><td><span class='day'>&nbsp;</span></td><td><span class='day'>&nbsp;</span></td><td><span class='day'>&nbsp;</span></td><td><span class='day'>&nbsp;</span></td><td><span class='day'>&nbsp;</span></td><td><span class='day'>&nbsp;</span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(1)'>1</a></span></td></tr><tr align='center' bgcolor='#ffffff'><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(2)'>2</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(3)'>3</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(4)'>4</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(5)'>5</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(6)'>6</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(7)'>7</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(Cool'>8</a></span></td></tr><tr align='center' bgcolor='#ffffff'><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(9)'>9</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(10)'>10</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(11)'>11</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(12)'>12</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(13)'>13</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(14)'>14</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(15)'>15</a></span></td></tr><tr align='center' bgcolor='#ffffff'><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(16)'>16</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(17)'>17</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(18)'>18</a></span></td><td bgcolor='#333333'><span class='currentDay'><a class='currenta' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(19)'>19</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(20)'>20</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(21)'>21</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(22)'>22</a></span></td></tr><tr align='center' bgcolor='#ffffff'><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(23)'>23</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(24)'>24</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(25)'>25</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(26)'>26</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(27)'>27</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(28)'>28</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(29)'>29</a></span></td></tr><tr align='center' bgcolor='#ffffff'><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(30)'>30</a></span></td><td bgcolor='#ffffff'><span class='day'><a class='daya' href='javascript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate(31)'>31</a></span></td><td><span class='day'>&nbsp;</span></td><td><span class='day'>&nbsp;</span></td><td><span class='day'>&nbsp;</span></td><td><span class='day'>&nbsp;</span></td><td><span class='day'>&nbsp;</span></td></tr><tr bgcolor='#cccccc'><td colspan='7' align='center'><span class='foot'><b><a class='foota' href='javascript:if (window.opener && !window.opener.closed && window.opener.hideCal) window.opener.hideCal()'>[close]</a>&nbsp;&nbsp;<a class='foota' href='javascript:if (window.opener && !window.opener.closed && window.opener.clearDate) window.opener.clearDate()'>[clear]</a></b></span></td></tr></table>
</td></tr></table>
</body>



Terakhir diubah oleh RAMADHAN ANSYARI tanggal Tue Dec 18, 2012 2:32 pm, total 3 kali diubah
avatar
RAMADHAN ANSYARI

Jumlah posting : 22
Join date : 26.09.12
Lokasi : Yogyakarta, Indonesia

Lihat profil user http://ramadhanansyari.net84.net

Kembali Ke Atas Go down

Penjelasan Kalender

Post  M Maskhun Sofwan H.P on Tue Dec 18, 2012 2:13 pm

Nama M Maskhun Sofwan
NIM 11016008

<html>
<head><script language="JavaScript">
var ns6=document.getElementById&&!document.all
var ie4=document.all

var Selected_Month;
var Selected_Year;
var Current_Date = new Date();
var Current_Month = Current_Date.getMonth();

var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var Current_Year = Current_Date.getYear();
if (Current_Year < 1000)
Current_Year+=1900


var Today = Current_Date.getDate();

function Header(Year, Month) {

if (Month == 1) {
Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
}
var Header_String = Month_Label[Month] + ' ' + Year;
return Header_String;
}



function Make_Calendar(Year, Month) {
var First_Date = new Date(Year, Month, 1);
var Heading = Header(Year, Month);
var First_Day = First_Date.getDay() + 1;
if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
((Days_in_Month[Month] == 30) && (First_Day == 7))) {
var Rows = 6;
}
else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
var Rows = 4;
}
else {
var Rows = 5;
}

var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">';

HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>';

HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>';

HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>';

var Day_Counter = 1;
var Loop_Counter = 1;
for (var j = 1; j <= Rows; j++) {
HTML_String += '<tr ALIGN="left" VALIGN="top">';
for (var i = 1; i < 8; i++) {
if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {
if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {
HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';
}
else {
HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Day_Counter + '</td>';
}
Day_Counter++;
}
else {
HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';
}
Loop_Counter++;
}
HTML_String += '</tr>';
}
HTML_String += '</table></td></tr></table>';
cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
cross_el.innerHTML = HTML_String;
}


function Check_Nums() {
if ((event.keyCode < 48) || (event.keyCode > 57)) {
return false;
}
}



function On_Year() {
var Year = document.when.year.value;
if (Year.length == 4) {
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
}

function On_Month() {
var Year = document.when.year.value;
if (Year.length == 4) {
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
else {
alert('Please enter a valid year.');
document.when.year.focus();
}
}


function Defaults() {
if (!ie4&&!ns6)
return
var Mid_Screen = Math.round(document.body.clientWidth / 2);
document.when.month.selectedIndex = Current_Month;
document.when.year.value = Current_Year;
Selected_Month = Current_Month;
Selected_Year = Current_Year;
Make_Calendar(Current_Year, Current_Month);
}


function Skip(Direction) {
if (Direction == '+') {
if (Selected_Month == 11) {
Selected_Month = 0;
Selected_Year++;
}
else {
Selected_Month++;
}
}
else {
if (Selected_Month == 0) {
Selected_Month = 11;
Selected_Year--;
}
else {
Selected_Month--;
}
}
Make_Calendar(Selected_Year, Selected_Month);
document.when.month.selectedIndex = Selected_Month;
document.when.year.value = Selected_Year;
}

</script>
</head>
<body>
<div id=NavBar style="position:relative;width:286px;top:5px;" align="left">
<form name="when"><table>
<tr>
<td><input type="button" value="<-- Last" onClick="Skip('-')"></td>
<td> </td>
<td><select name="month" onChange="On_Month()">

<script language="JavaScript1.2">
if (ie4||ns6){
for (j=0;j<Month_Label.length;j++) {
document.writeln('<option value=' + j + '>' + Month_Label[j]);
}
}
</script>

</select>
</td>
<td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td>
<td> </td>
<td><input type="button" value="Next -->" onClick="Skip('+')"></td>
</tr></table></form></div>
<div id=Calendar style="position:relative;width:238px;top:-2px;" align="left"></div>
<body onLoad="Defaults()">
</body>
</html>


Sedikit penjelasan
Pada bagian <body> terdapat script <body onLoad="Defaults()"> itu merupakan kode untuk menampilkan calender.
script ini (function Make_Calendar(Year, Month) {
var First_Date = new Date(Year, Month, 1);
var Heading = Header(Year, Month);
var First_Day = First_Date.getDay() + 1;
if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
((Days_in_Month[Month] == 30) && (First_Day == 7))) {
var Rows = 6;
}
else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
var Rows = 4;
}
else {
var Rows = 5;
})
untuk melihat hari , bulan tahun sekarang.
dan script ini
var Selected_Month; untuk menampilkan bulan
var Selected_Year;untuk menampilkan tahun
var Current_Date = new Date();untuk menampilkan hari


[img][You must be registered and logged in to see this link.] [/img]
avatar
M Maskhun Sofwan H.P

Jumlah posting : 14
Join date : 22.09.12
Lokasi : sleman,selomartani ,kalasan ,sleman

Lihat profil user

Kembali Ke Atas Go down

Tugas Kalender DOM

Post  Fahrurozi on Tue Dec 18, 2012 2:29 pm

NAMA :FAHRUROZI
NIM : 09016034


<html>
<head>
<body>
<style type="text/css">
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
</style>

</body>
<script type="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/basiccalendar.js">
</script> <center><script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script></center>
</head>
</html>
[img][You must be registered and logged in to see this link.] [/img]
avatar
Fahrurozi

Jumlah posting : 23
Join date : 28.09.12

Lihat profil user http://fahruroziweb.site11.com

Kembali Ke Atas Go down

script kalender DOM

Post  juli sudarman on Tue Dec 18, 2012 2:34 pm

JULI SUDARMAN (11016014)

Berikut adalah script untuk membuat calender DOM untuk tampilan web:


<style type="text/css">

.main {

width:200px;

border:1px solid black;

}

.month {

background-color:black;

font:bold 12px verdana;

color:white;

}

.daysofweek {

background-color:gray;

font:bold 12px verdana;

color:white;

}

.days {

font-size: 12px;

font-family:verdana;

color:black;

background-color: lightyellow;

padding: 2px;

}

.days #today{

font-weight: bold;

color: red;

}

</style>

<script type="text/javascript" src="http://subhishine.freehostia.com/shine/files/basiccalendar.js">

</script>


Tahap 2:

Letakkan script berikut di bagian "<body>" file web kamu.



<script type="text/javascript">



var todaydate=new Date()

var curmonth=todaydate.getMonth()+1 //get current month (1-12)

var curyear=todaydate.getFullYear() //get current year



document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));

</script>[img][You must be registered and logged in to see this link.] [/img]
avatar
juli sudarman

Jumlah posting : 8
Join date : 28.09.12

Lihat profil user

Kembali Ke Atas Go down

kalender DOM

Post  ranggaprima on Tue Dec 18, 2012 2:37 pm

Nama : Rangga Prima
NIM : 07016003

Menggunakan Yui kalender




<!--CSS file (default YUI Sam Skin) -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/calendar/assets/skins/sam/calendar.css">

<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<!-- Source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/calendar/calendar-min.js"></script>

Pada tag body :
<body class="yui-skin-sam">

Gunakan pemanggilan Div id sbb:
<div id="cal1Container"></div>

Initializing yui calendar
// A DIV with id "cal1Container" should already exist on the page
var cal1 = new YAHOO.widget.Calendar("cal1Container");
cal1.render();

Seting configuration option :
var cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container",{
pagedate: "5/2007",
selected: "5/5/2007-5/27/2007,5/30/2007"
});
cal1.render();

Untuk memilih kalender yang akan digunakan :
// 1. In the constructor, via an object literal:
var myCalendar = new YAHOO.widget.Calendar("myCalendar", "myCalendarContainer", {
selected:"1/1/2007-1/7/2007"
});
myCalendar.render();

// 2. Via "queueProperty" and "fireQueue":
var myCalendar = new YAHOO.widget.Calendar("myCalendar", "myCalendarContainer");
myCalendar.cfg.queueProperty("selected","1/1/2007-1/7/2007",false);
myCalendar.cfg.fireQueue();
myCalendar.render();

// 3. Via "setProperty"
var myCalendar = new YAHOO.widget.Calendar("myCalendar", "myCalendarContainer");
myCalendar.cfg.setProperty("selected","1/1/2007-1/7/2007",false);
myCalendar.render();

Pemanggilan kalender yang dipilih :
// Initialize and render the Calendar
var cal1 = new YAHOO.widget.Calendar("cal1Container");
cal1.render();

// Later in your application, when you need the selected dates
var arrDates = cal1.getSelectedDates();
for (var i = 0; i < arrDates.length; ++i) {
var date = arrDates[i];

// Work with selected date...
// var displayMonth = date.getMonth() + 1;
// var displayYear = date.getFullYear();
// var displayDate = date.getDate();
}

Untuk modifikasi penambahan konten
renderCellDefault = function(workingDate, cell) {
cell.innerHTML = '<a href="#" class="' + this.Style.CSS_CELL_SELECTOR + '">' + this.buildDayLabel(workingDate) + "</a>";
}

renderCellNotThisMonth = function(workingDate, cell) {
YAHOO.util.Dom.addClass(cell, this.Style.CSS_CELL_OOM);
cell.innerHTML=workingDate.getDate();
return YAHOO.widget.Calendar.STOP_RENDER;
}


Menggunakan Yui kalender[img][You must be registered and logged in to see this link.] [/img][img][You must be registered and logged in to see this link.] [/img]

ranggaprima

Jumlah posting : 3
Join date : 03.10.12

Lihat profil user

Kembali Ke Atas Go down

Kalender

Post  Hafni Dewi K on Tue Dec 18, 2012 3:34 pm

-Script:

<html>
<head>
<style type="text/css">
body {background-color: #AAff99}
.main {
width:200px;
border:1px solid blue;
}
.month {
background-color:blue;
font:bold 12px cambria;
color:white;
}
.daysofweek {
background-color:green;
font:bold 12px cambria;
color:white;
}
.days {
font-size: 12px;
font-family:cambria;
color:black;
background-color: lightpink;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
</style>
<script type="text/javascript" src="http://subhishine.freehostia.com/shine/files/basiccalendar.js">
</script>
</head>
<body>
<h2>Kalender</h2>
<script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>

</body>
</html>


-Cara Kerjanya:

Pada bagian head untuk meletakkan CSS nya . Script kalendernya terdapat pada bagian body.
*Mengambil dan menyimpan tanggal => var todaydate=new Date()
*Mengambil dan menyimpan bulan => var curmonth=todaydate.getMonth()+1 //get current month (1-12)
*Mengambil dan menyimpan tahun => var curyear=todaydate.getFullYear() //get current year
*Menampilkan kalender => document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));

-Capture Gambar



Hafni Dewi K

Jumlah posting : 6
Join date : 28.09.12

Lihat profil user

Kembali Ke Atas Go down

Tugas Untuk Penjelasan Kalender saya

Post  luqman noviantoro on Wed Dec 19, 2012 2:30 am

NAMA :: LUQMAN NOVIANTORO
NIM :: 09016021
PRODI :: SISTEM INFORMASI

asalamualaikum..ini tugas web saya? maaf baru mengumpulkan..tadi siang di lab tidak dapet tmpat??
saya menaruh kalender ini pada tempat pembukaan. agar sewaktu membuka web.. sudah tampil di hlman pembuka..

<html>
<head>
<style type="text/css">
body
{
background-color:pink;
background-image: url("luqman.jpg");
}
}
p.normal{font-weight:normal}
p.tebal{font-weight:bold}
p.teballl{font-weight:900}
p.lengkap{font:italic small-caps 900 12px arial}
h2
}
p.depan
{
text-transform: capitalize;
font-variant: small-caps
}


</style>
</head>
<body>
<p class="besar"><font color="white">
<h1 align="center">Welcome to my web</h1>
<h2 align="center">
Nama:LUQMAN NOVIANTORO<br>
NIM : 09016021<br>
Fakultas: MIPA<br>
Prodi: Sistem Informasi<br>
Angkatan : 2009<br></h2>
<h3 align="center">TINGKATKAN IMAJINASIMU</h3>
</p>

<p class="depan">


<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>My Calender</title>
</head>

<body onLoad="loadclock()" topmargin="0" leftmargin="0">

<table border="5px solid #808080;" cellpadding="0" width="120" height="150" cellspacing="0">
<tr>
<td bgcolor="#333333"><p align="center">
<script language="JavaScript">
monthnames = new Array(
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"Decembr");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("");
document.write("<table style='padding-left:3px; font-color:#ffffff' size='1' font-family:tahoma;" );
document.write(" cellpadding=0 cellspacing=0>");

document.write("<tr><td colspan=7><center><font color='#ffffff' size='1' face='Verdana'>"
+ monthnames[thismonth] + " " + thisyear
+ "</font></center></td></tr>");
document.write("<tr>");
document.write("<td><b><font color='#FF0000' size='1' face='tahoma'>S</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>M</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>T</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>W</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>T</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>F</font></td>");
document.write("<td><b><font color='#C0C0C0' size='1' face='tahoma'>S</font></td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td><font color='#ffffff' size='1' face='tahoma'>-</font></td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td><font color='#ffffff' size='1' face='tahoma'>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='#ff0000' size='1' face='tahoma'>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write("-");
}
if (count==thisdate) {
document.write("</font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</font>");
</script>




</tr>
</table>

</body>
</html>

[You must be registered and logged in to see this image.]
avatar
luqman noviantoro

Jumlah posting : 13
Join date : 05.10.12
Age : 26
Lokasi : PURWOREJO JAWATENGAH

Lihat profil user http://www.luqman.byethost7.com

Kembali Ke Atas Go down

Re: Penjelasan kalender anda

Post  Sponsored content


Sponsored content


Kembali Ke Atas Go down

Topik sebelumnya Topik selanjutnya Kembali Ke Atas

- Similar topics

 
Permissions in this forum:
Anda tidak dapat menjawab topik