Membuat kalender dengan php dan jquery

Cara Membuat Kalender Dengan JQuery

usahawan-maju - Secara sederhana kalender adalah suatu sistem pengelompokan hari yang bisa mengkoordinir sosialisasi, keagamaan, komersial, dan lainnya yang memberi nama pada sebuah periode yang disebut waktu (seperti nama hari, bulan, dan tahun) . Kemudian dari proses yang ada nama-nama tersebut dikenal sebagai tanggal kalender. Adanya tanggal tersebut bisa didasarkan dari gerakan-gerakan benda di luar angkasa seperti peredaran  matahari dan bulan. Nama kalender juga dapat mengacu pada sebuah alat yang mampu mengilustrasikan sistem tersebut seperti kalender dinding atau kalender digital.

Saat membuat aplikasi berbasis web terkadang kita perlu membuat inputan sebuah tanggal. Sebenarya caranya banyak sekali, tergantung selera anda dan cara mengaplikasikan selera input data gambar. Kita bisa menggunakan select atau combobox atau input manual juga bisa, yang penting tujuan dari pada aplikasi kita bisa tercapai sesuai dengan algoritma program aplikasi yang kita butuhkan.

Namun ada cara lagi ada design kalender yang akan muncul apabila kita klik dan tinggal pilih saja tanggal sesuai dengan tanggal yang akan kita inputkan. Penggunaan cara ini kita memerlukan sebuah library tambahan yang biasanya kita bisa dapatkan free, apalagi kalo bukan Jcalender yang menggunakan javascript. Mungkin lebih jelasnya coba perhatikan baris script berikut :

<script type="text/javascript" src="js1/calendarDateInput.js"></script>
<script src="images/datetimepicker_css.js" type="text/javascript"></script>

Penjelasan kode diatas kurang lebih sebagai berikut :

- Library calendarDateInput.js adalah library yang akan kita butuhkan, pada contoh saya simpan pada folder js1, namun nanti masalah penyimpanan terserah anda. Silahkan download ya cari di google, hehehhe. Jangan lupa cari juga JQuery yang ini datetimepicker_css.js . Kita membutuhkan 2 JQurey tersebut. Kemudian untuk script lengkapnya anda bisa mencobanya dengan script berikut :

//Script lengkap sebagai berikut :

<script type="text/javascript" src="js1/calendarDateInput.js"></script>
<script src="images/datetimepicker_css.js" type="text/javascript"></script>

<input type="text" name="tgl_tayang" id="tgl_tayang" readonly="readonly"/>
<a href="javascript:NewCssCal('tgl_tayang','ddmmyyyy')">
      <img src="images/b_calendar.png" class="cal" width="16" height="16" alt="Pick a date">
</a>

Silahkan simpan dengan extensi .PHP  saya menggunakan cara tersebut. Kurang lebih hasilnya sebagai berikut :

Jadi Kalender akan muncul jika kita klik icon atau gambar kalender, kemudian kita pilih tanggal dan value dari tanggal tersebut akan diterima pada textbox yang telah kita siapkan.

.

Langkah pertama adalah membuat css untuk menyusun tampilan kalendernya. Isi css bisa anda tulis seperti berikut :

<style type="text/css">
/* calendar */
table.calendar		{ border-left:1px solid #999; }
tr.calendar-row	{  }
td.calendar-day	{ min-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover	{ background:#eceff5; }
td.calendar-day-np	{ background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head { background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number		{ background:#999; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; }
/* shared */
td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }
</style>

Setelah css, anda memerlukan sebuah fungsi untuk menampikan kalende berdasar bulan yang ditentukan. Lihat script berikut :

function draw_calendar($month,$year){
	/* draw table */
	$calendar = '<table cellpadding="0" cellspacing="0" class="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 vars 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">';
	/* print "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;

	/* keep going with days.... */
	for($list_day = 1; $list_day <= $days_in_month; $list_day++):
		$calendar.= '<td class="calendar-day">';
			/* add in the day number */
			$calendar.= '<div class="day-number">'.$list_day.'</div>';

			/** QUERY THE DATABASE FOR AN ENTRY FOR THIS DAY !!  IF MATCHES FOUND, PRINT THEM !! **/
			$calendar.= str_repeat('<p> </p>',2);
			
		$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;

	/* final row */
	$calendar.= '</tr>';

	/* end the table */
	$calendar.= '</table>';
	
	/* all done, return result */
	return $calendar;
}

Setelah function menampilkan sudah anda tuliskan, tinggal memanggil function tersebut dengan cara :

echo '<h2>Nopember 2014</h2>';
echo draw_calendar(9,2014);

echo '<h2>Desember 2014</h2>';
echo draw_calendar(12,2014);

Pada script diatas, anda cukup memanggil fungsi draw_calendar dan menetapkan bulan dan tahun kalender yang anda buat.

Hasilnya :

Anda juga bisa kembangkan kalender diatas untuk berbagai kondisi keperluan dengan mengubah beberapa baris function draw_calendar.

Silahkan lihat demo kalender dengan php disini. Jika anda ingin download contoh membuat kalender dengan php bisa diambil disini.

Sumber : https://davidwalsh.name/php-calendar

Semoga bermanfaat

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **