Membuat Kalender Jadwal Dengan PHP

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

Sumber :
Ilmu Programmer

Tweet