Cara membuat kalender jadwal dengan PHP MySQL

Mau bikin kalender jadwal sendiri atau bikin aplikasi jadwal sekolah ? anda beruntung bisa ke blog ini. Sekarang saya akan membahas cara membuat kalender jadwal dengan PHP MySQL.

Untuk membuat kalender jadwal ini, kita membutuhkan plugin fullcalendar ,jquery dan jquery-ui.
Tapi semuanya udah saya paketkan pada download di bawah artikel ini.

Buat database jadwal lalu tambahkan tabel jadwalku :

CREATE TABLE IF NOT EXISTS `jadwalku` (
  `jadwal_id` int(10) NOT NULL AUTO_INCREMENT,
  `tgl1` datetime NOT NULL,
  `tgl2` datetime NOT NULL,
  `judul` text NOT NULL,
  PRIMARY KEY (`jadwal_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

Berikut juga saya akan kasih contoh datanya :

INSERT INTO `jadwalku` (`jadwal_id`, `tgl1`, `tgl2`, `judul`) VALUES
(1, '2014-11-08 09:00:00', '2014-11-08 11:00:00', 'Bersihkan kamar'),
(2, '2014-11-08 13:00:00', '2014-11-08 13:30:00', 'Makan Siang'),
(3, '2014-11-08 15:00:00', '2014-11-08 17:00:00', 'Jalan Bareng Pacar'),
(4, '2014-11-19 09:00:00', '2014-11-19 11:00:00', 'Lomba Makan'),
(5, '2014-11-12 10:00:00', '2014-11-18 10:00:00', 'Touring Sumbar');

Oke, sekarang kita bikin kodenya. bikin index.php

<title>FULL CALENDAR</title>
<link href="fullcalender/lib/cupertino/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="fullcalender/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="fullcalender/fullcalendar.print.css" rel="stylesheet" type="text/css" media="print" />
<script src="fullcalender/lib/moment.min.js" type="text/javascript"></script>
<script src="fullcalender/lib/jquery.min.js" type="text/javascript"></script>
<script src="fullcalender/lib/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="fullcalender/fullcalendar.min.js" type="text/javascript"></script>
<?php
function tanggal_sekarang($time=FALSE)
{
date_default_timezone_set('Asia/Jakarta');
$str_format='';
if($time==FALSE)
{
$str_format= date("Y-m-d");
}else{
$str_format= date("Y-m-d H:i:s");
}
return $str_format;
}
?>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
theme:true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '<?=tanggal_sekarang();?>',
editable: true,
eventLimit: true,
events: {
url: 'data.php', },
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>
<style>
#calendar {
max-width: 700px;
margin: 0 auto;
}
</style>
<div id='loading'>loading...</div>
<div id='calendar'></div>

Wuih, cukup panjang juga ya hahaha :D . Include kan dulu css dan js file nya ke dalam index.php :

<link href="fullcalender/lib/cupertino/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="fullcalender/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="fullcalender/fullcalendar.print.css" rel="stylesheet" type="text/css" media="print" />
<script src="fullcalender/lib/moment.min.js" type="text/javascript"></script>
<script src="fullcalender/lib/jquery.min.js" type="text/javascript"></script>
<script src="fullcalender/lib/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="fullcalender/fullcalendar.min.js" type="text/javascript"></script>

Lalu ada handle javascript :

<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
theme:true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '<?=tanggal_sekarang();?>',
editable: true,
eventLimit: true,
events: {
url: 'data.php', },
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>

Saat event, saya memanggil output dari data.php lalu data yang didapatkan akan masuk ke div calendar.

<div id='calendar'></div>

Sekarang mari bikin kode data.php

<?php
require_once("mysqlminang.php");
$p=new Mysqlminang("jadwal","localhost","root","");
$sql="Select * from jadwalku";
$data=array();
foreach($p->GetAllRows($sql) as $row)
{
$data[]=array(
'title'=>$row->judul,
'start'=>$row->tgl1,
'end'=>$row->tgl2,
);
}
echo json_encode($data);
?>

Masih ingat dengan kode-kode sebelumnya? ada fungsi mysqli libray yg saya bikin sendiri mysqlminang , ini untuk memudahkan pengambilan data mysql saja :)
Outputnya disini adalah json, setelah di array kan datanya, ada 3 parameter yg dibutuhkan oleh fullcalendar , yaitu title , start , end

Ok, selesai. Sekarang anda improvisasikan artikel dan source code ini untuk pekerjaan anda. Terima Kasih :)

Tweet