Coding Javascript Kalender

Selamat malam, jumpa lagi dengan mimin yang lagi mulai sibuk karena mendapat tugas banyak dari dosen mimin untuk membuat LKS Online guna untuk penelitian dosen dan Design template salah satu web Universitas di Purworejo. Baik kali ini mimin akan post tutorial tentang bagaimana menambahkah kalender paada sebuah web.
Langsung saja tanpa basa-basi berikut kode nya

<style>
table {
    width:200px;
    border:0px solid #888;   
    border-collapse:collapse;
}

td {
    width:15px;
    border-collpase:collpase;
    border:1px solid #000000;
    text-align:center;
    padding-right:5px;
}

.days{
    background-color: #FF0000;
}

th {
    border-collpase:collpase;
    border:1px solid #888;
    background-color: #FOF8FF;
}

.actday{
    background-color: #9ACD32;
    font-weight:bold;
}
</style>  
<table>
  <?php
function showCalendar(){
    // Get key day informations.
    // We need the first and last day of the month and the actual day
    $today    = getdate();
    $firstDay = getdate(mktime(0,0,0,$today['mon'],1,$today['year']));
    $lastDay  = getdate(mktime(0,0,0,$today['mon']+1,0,$today['year']));
   
   
    // Create a table with the necessary header informations
    echo '  <tr><th colspan="7"><font color="black">'.$today['month']." - ".$today['year']."</font></th></tr>";
    echo '<tr class="days">';
    echo '  <td><font color="White">Sen</font></td><td><font color="White">Sel</font></td><td><font color="White">Rab</font></td><td><font color="White">Kam</font></td>';
    echo '  <td><font color="White">Jum</font></td><td><font color="White">Sab</font></td><td><font color="black">Mingg</font></td></tr>';
   
   
    // Display the first calendar row with correct positioning
    echo '<tr>';
    if ($firstDay['wday'] == 0) $firstDay['wday'] = 7;
    for($i=1;$i<$firstDay['wday'];$i++){
        echo '<td>&nbsp;</td>';
    }
    $actday = 0;
    for($i=$firstDay['wday'];$i<=7;$i++){
        $actday++;
        if ($actday == $today['mday']) {
            $class = ' class="actday"';
        } else {
            $class = '';
        }
        echo "<td$class><font color=black>$actday</font></td>";
    }
    echo '</tr>';
   
    //Get how many complete weeks are in the actual month
    $fullWeeks = floor(($lastDay['mday']-$actday)/7);
   
    for ($i=0;$i<$fullWeeks;$i++){
        echo '<tr>';
        for ($j=0;$j<7;$j++){
            $actday++;
            if ($actday == $today['mday']) {
                $class = ' class="actday"';
            } else {
                $class = '';
            }
            echo "<td$class><font color=black>$actday</font></td>";
        }
        echo '</tr>';
    }
   
    //Now display the rest of the month
    if ($actday < $lastDay['mday']){
        echo '<tr>';
       
        for ($i=0; $i<7;$i++){
            $actday++;
            if ($actday == $today['mday']) {
                $class = ' class="actday"';
            } else {
                $class = '';
            }
           
            if ($actday <= $lastDay['mday']){
                echo "<td$class><font color=black>$actday</font></td>";
            }
            else {
                echo '<td>&nbsp;</td>';
            }
        }
    
        echo '</tr>';
    }
   

}
showCalendar();
?>
</table>


Coding tersebut bisa langsung ditempelkan pada halaman web anda atau memanggilnya dengan code 
<?php include "kalender.php";?> 

Berikut caranya 
1. Simpan coding yang panjang lebar di atas dengan nama kalender.php dengan ditempatkan satu folder  dengan file yang di sisipkan dengan kalender tersebut
2. Tentukan posisi penempatan kalender agar lebih menarik di pandang
3.  Masukan kode <?php include "kalender.php";?> untuk memanggil file kalender.php

 

Berikut setelah kita jalankan progamnya akan tampil seperti berikut

 

Selesai cukup mudah untuk diterapkan, semoga bermanfaat

Tweet