Membuat Kalender Sederhana Menggunakan PHP

Sebenarnya sudah banyak kalender - kalender dengan menggunakan jQuery anda bisa mendownload secara gratis, tapi kali ini saya akan membahas bagaimana cara membuat kalender dengan script php dan css, langsung saja berikut ini caranya :
  • Buat folder latihan di C:\xampp\htdocs\latihan (optional tergantung webserver yang di gunakan)
  • Buat sebuah file mislanya "kalender.php"
  • Kemudian ketikan script berikut (script ini digunakan untuk membuat style css)
<style type="text/css">
  div{ 
  -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px;
  -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
  }
  body{
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  }
  .hari{
  float:left;
  padding:5px;
  width:40px;
  text-align:center;
  margin:2px;
  background:#0CF;
  background-image:-webkit-linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
  background-image:-moz-linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
  background-image:-o-linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
  background-image:-ms-linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
  background-image:linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
}
  .tgl{
  float:left;
  padding:5px;
  width:40px;
  text-align:center;
  margin:2px;
  background:#CCC;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  }
  .tgl:hover{
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  color:#FFF;
  }
  .float_habis{
  padding:1px;
  text-align:center;
  }
  .tgl_blank{
  float:left;
  padding:5px;
  width:40px;
  text-align:center;
  margin:2px;
  background:#F8F8F8;
  color:#CCC;
  }

  .tgl_skrng{
  float:left;
  padding:5px;
  width:40px;
  text-align:center;
  margin:2px;
  background:#FC0;
  }

  .blokbaris{
  padding:5px;
  text-align:center;
  margin:2px;
  }
</style>

  • Selanjutnya maskukan script php seperti dibawah ini

<?php
$now = getdate(time());
$time = mktime(0,0,0, $now['mon'], 1, $now['year']);
$date = getdate($time);
$dayTotal = cal_days_in_month(0, $date['mon'], $date['year']);
//Print the calendar header with the month name.
print '<strong>' . $date['month'] . '</strong>';
print '<div class=blokbaris>';
$hari=array('Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu');
for ($i = 0; $i < 7; $i++) { 
print "<div class='hari'>$hari[$i]</div>";
}
print '<div class=float_habis>&nbsp;</div></div>';

for ($i = 0; $i < 6; $i++) {
print '<div class=blokbaris>';
for ($j = 1; $j <= 7; $j++) {
$dayNum = $j + $i*7 - $date['wday'];
//Print a cell with the day number in it.  If it is today, highlight it.
print '<div';
if ($dayNum > 0 && $dayNum <= $dayTotal) {
print ($dayNum == $now['mday']) ? ' class=tgl_skrng>' : ' class=tgl>';
print "$dayNum";
}
else {
//Print a blank cell if no date falls on that day, but the row is unfinished.
print ' class=tgl_blank> - ';
}
print '</div>';
}
print '<div class=float_habis>&nbsp;</div></div>';
if ($dayNum >= $dayTotal && $i != 6)
break;
}
?> 
Anda bisa menggubah design kalender sesuai keinginan anda pada bagian style, sekian dulu untuk artikel hari ini apa bilaada yang belum jelas bisa di tanyakan melalui komentar,
Share on Google Plus

About Fery Rudiyanto

Aku bukanlah orang yang hebat, tapi aku mau belajar dari orang-orang yang hebat. Aku adalah orang biasa tapi aku ingin menjadi orang yang luar biasa. Dan aku bukanlah orang yang istimewa, tapi aku ingin membuat seseorang menjadi istimewa.
    Blogger Comment
    Facebook Comment

6 komentar:

Kritik, Saran dan Komentar Kami tunggu

Entri Populer