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 :)