Cara membuat kalender dengan PHP, HTML dan CSS — Kalender / Calendar sering kita jumpai di halaman website, bahkan di CMS wordpress pun ada widget untuk menampilkan kalendar. Segitu pentingnya fungsi kalendar di sebuah website? kalendar juga sering kita temui di website portal yang memiliki banyak sekali berita, untuk mempermudah pengunjung mengakses berita pada tanggal tertentu biasanya di sediakan kalendar.
Pertanyaannya bagaimanakan cara membuat kalendar itu agar dinamis? agar sistem tabel nya sesuai dengan jumlah hari pada bulan tersebut (29, 30 atau 31 hari dalam sebulan). Mari kita coba saja langsung.
Membut Fungsi di PHP
Pertama kita perlu untuk membuat sebuah fungsi dengan script PHP berdasarkan bulan dan tahun tertentu. Diawali dengan menentukan hari-hari dalam seminggu, table header, dll.
function draw_calendar($month,$year){
// Draw table for Calendar
$calendar = '
<table cellpadding="0" cellspacing="0" class="calendar">';
// Draw Calendar table headings
$headings = array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
$calendar.= '
<tr class="calendar-row">
<td class="calendar-day-head">'.implode('</td>
<td class="calendar-day-head">',$headings).'</td>
</tr>
';
//days and weeks variable for now ...
$running_day = date('w',mktime(0,0,0,$month,1,$year));
$days_in_month = date('t',mktime(0,0,0,$month,1,$year));
$days_in_this_week = 1;
$day_counter = 0;
$dates_array = array();
// row for week one
$calendar.= '
<tr class="calendar-row">';
// Display "blank" days until the first of the current week
for($x = 0; $x < $running_day; $x++):
$calendar.= '
<td class="calendar-day-np"> </td>
';
$days_in_this_week++;
endfor;
// Show days....
for($list_day = 1; $list_day <= $days_in_month; $list_day++):
if($list_day==date('d') && $month==date('n'))
{
$currentday='currentday';
}else
{
$currentday='';
}
$calendar.= '
<td class="calendar-day '.$currentday.'">';
// Add in the day number
if($list_day<date('d') && $month==date('n'))
{
$showtoday='<strong class="overday">'.$list_day.'</strong>';
}else
{
$showtoday=$list_day;
}
$calendar.= '
<div class="day-number">'.$showtoday.'</div>
';
// Draw table end
$calendar.= '</td>
';
if($running_day == 6):
$calendar.= '</tr>
';
if(($day_counter+1) != $days_in_month):
$calendar.= '
<tr class="calendar-row">';
endif;
$running_day = -1;
$days_in_this_week = 0;
endif;
$days_in_this_week++; $running_day++; $day_counter++;
endfor;
// Finish the rest of the days in the week
if($days_in_this_week < 8):
for($x = 1; $x <= (8 - $days_in_this_week); $x++):
$calendar.= '
<td class="calendar-day-np"> </td>
';
endfor;
endif;
// Draw table final row
$calendar.= '</tr>
';
// Draw table end the table
$calendar.= '</table>
';
// Finally all done, return result
return $calendar;
}
Fungsi diatas digunakan untuk meng-generate tabel pada bulan tertentu sesuai dengan yang kita inginkan.
Cara Menggunakan Fungsi tersebut adalah seperti berikut
echo '
<h2>Juli 2013</h2>
';
echo draw_calendar(7,2013);
Jika dijalankan maka akan terbentuk kalender seperti berikut (bulan juni, 2014)

Agar tampilan lebih bagus anda bisa mempercantik tabel tersebut dengan CSS, agar lebih mudah, di fungsi PHP tadi sudah di tentukan nama-nama class nya.
Percantik Dengan CSS
@charset "utf-8";
/* CSS Document */
html,body,form{ margin:0px; padding:0px; font-family:Ebrima, Arial, Helvetica, sans-serif; font-size:12px; color:#666; empty-cells:hide;}
table.calendar{border-style: solid; border-width: 1px; border-width:1px; border-color:#666; -moz-box-shadow:0px 0px 4px #CCCCCC; -webkit-box-shadow:0px 0px 4px #CCCCCC; box-shadow:0px 0px 4px #CCCCCC; }
tr.calendar-row { }
td.calendar-day { min-height:80px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover { background:#FFF; -moz-box-shadow:0px 0px 20px #eeeeee inset; -webkit-box-shadow:0px 0px 20px #eeeeee inset; box-shadow:0px 0px 20px #eeeeee inset; cursor:pointer;}
td.calendar-day-np { background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head {font-weight:bold; text-shadow:0px 1px 0px #FFF;color:#666; text-align:center; width:64px; padding:12px 6px; border-bottom:1px solid #CCC; border-top:1px solid #CCC; border-right:1px solid #CCC; background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed));
background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%,#ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%,#ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
div.day-number{padding:6px; text-align:center; }
/* shared */
td.calendar-day, td.calendar-day-np {padding:5px; border-bottom:1px solid #DBDBDB; border-right:1px solid #DBDBDB; font-size:14px;background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
}
.overday{ color:#164b87; text-shadow:0px 1px 0px #FFF;}
.currentday{background: #6cb7f3 !important;
background: -moz-linear-gradient(top, #6cb7f3 0%, #388be8 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6cb7f3), color-stop(100%,#388be8)) !important;
background: -webkit-linear-gradient(top, #6cb7f3 0%,#388be8 100%) !important;
background: -o-linear-gradient(top, #6cb7f3 0%,#388be8 100%) !important;
background: -ms-linear-gradient(top, #6cb7f3 0%,#388be8 100%) !important;
background: linear-gradient(to bottom, #6cb7f3 0%,#388be8 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6cb7f3', endColorstr='#388be8',GradientType=0 ) !important; color:#FFF !important; font-weight:bold; -moz-box-shadow:0px 0px 18px #1F68BA inset; -webkit-box-shadow:0px 0px 18px #1F68BA inset; box-shadow:0px 0px 18px #1F68BA inset;
}
.currentday:hover{-moz-box-shadow:0px 0px 24px #074080 inset !important; -webkit-box-shadow:0px 0px 24px #074080 inset !important; box-shadow:0px 0px 24px #074080 inset !important;}
Hasilnya adalah sebagai berikut

Sekian
Sekian tutorial membuat tabel dengan PHP, HTML dan CSS kali ini, semoga berguna untuk anda. Jika anda ingin mencoba silahkan download langsung di Github berikut ini
Download Script | Demo
Salam, sampai jumpa di artikel berikutnya dari JurnalWeb.com
Kalo misalkan di kalender tersebut dikasih informasi , gimana caranya gan?
Tinggal main di looping nya, pake if else di bagian pencetakan tanggal
wahh mantap… tp saya butuh yg Js, jadi tinggal diconvert saja ini fungsi… terimakasih banyak Mimin ganteng sangat sangat membantu buat modul Js saya (y) x unlimited
wah , terima kasih mas .. lagi pengen belajar yang beginian nih :D
Gan ini kalendernya biar dinamis harus ane masukin database dulu gan?
Mohon infonya lagi butuh hehe
Matur suwun mas, tutorialnya berguna banget ^^
thanks infonya,, bermanfaat banget..
izin copas gan :)
terimakasih.. sangat membantu sekali… kebetulan saya sedang mencari…
mas kalo cara pasang diblog widget jadinya kek gimana codingnya? terus didalem tanggalan ada tulisan informasi gitu . misalnya tggal 25 ada pemotretan .. tolong mas ane nubi banget heheh
Caranya agak panjang tidak bisa dijelaskan saat ini.., kalau artikel ini hanya secara general saja, untuk kelanjutannya silahkan disesuaikan dengan aplikasi yang dibuat, apakah itu dengan PHP, Framework, atau CMS tertentu.
terimakasih min..izin download
Terima Kasih script nya bermanfaat untuk membuat kalender :)
makasih banyak ilmunya :)
akan saya terapkan di website saya.. mutiarapena.com
kak kalau kita hanya menampilkan tanggal dan waktu itu gimana script nya
klo menampilkan tanggalnya sesuai dengan hari ini dan selanjutnya gimana?? soalnya di koding ini hanya menmpilkan kalender bulan tertentu.
Mas, maaf mau tanya.
jika ingin membuat kalender kerja bagaimana?
misal di klik tanggal 1, maka bisa dirubah kerja atau libur,
mohon pencerahannya mas
terima kasih
Kalau hanya status libur saja tinggal tambahkan jquery dan php untuk melakukan perubahan (disarankan anda sudah paham jquery dan php, jika belum sebaiknya pelajari dulu).
Atau kalau mau lebih lengkap bisa meniru tutorial ini