Cara menggunakan source code kalender php

Friday, November 7, 2014 Edit

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

FULL CALENDAR









$[document].ready[function[] {
$['#calendar'].fullCalendar[{
theme:true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '',
editable: true,
eventLimit: true,
events: {
url: 'data.php',},
loading: function[bool] {
$['#loading'].toggle[bool];
}
}];
}];


#calendar {
max-width: 700px;
margin: 0 auto;
}

loading...

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

Lalu ada handle javascript :

$[document].ready[function[] {
$['#calendar'].fullCalendar[{
theme:true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '',
editable: true,
eventLimit: true,
events: {
url: 'data.php',},
loading: function[bool] {
$['#loading'].toggle[bool];
}
}];
}];

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

Sekarang mari bikin kode data.php

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