PHP

JQuery Fullcalendar integrasi dengan Bootstrap, PHP dan MySQL

JQuery Fullcalendar integrasi dengan Bootstrap, PHP dan MySQL

Dua bulan yang lalu saya telah menggunakan plugin ini dalam aplikasi web dan mengintegrasikannya  dengan bootstrap, PHP & MySQL. Kami melakukan beberapa operasi dasar seperti menambahkan event, mengedit event dan menghapus event dari halaman administrator.

Idemastah untuk tutorial kali ini saya hanya akan membuat tampilan kalender hanya untuk di halaman pengunjung saja.

 

Mari kita mulai.

Langkah 1. Download fullcalendar plugin dari sini.

Langkah 2. Membuat database table event.

CREATE TABLE events (
  Id_event int(11) NOT NULL AUTO_INCREMENT,
  Start_datetime DEFAULT NULL,
  End_datetime DEFAULT NULL,
  title text,
 content text,
  PRIMARY KEY (id_event)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

 

Langkah 3. Masukan kode jQuery script

< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">< /script>
< script type="text/javascript" src="js/script.js">< /script> 
< script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous">< /script>
< link  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" >
< link href="css/fullcalendar.css” rel="stylesheet" />
< link href="css/fullcalendar.print.css" rel="stylesheet" media="print" />
< script src="js/moment.min.js">< /script>
< script src="js/fullcalendar.js">< /script>

 

PHP File :

DbConfig.php

$connection = mysqli_connect(‘localhost’,‘DBUser’,‘DBPassword’,‘DBName’) or die(mysqli_error($connection));

 

script.js

File ini berisi semua operasi dan mengirim permintaan ke PHP dan menerima respon untuk mengambil data dari database.

$(document).ready(function() {
'#calendar').fullCalendar({
	header: {
	left: 'prev,next today',
	center: 'title',
	right: 'month,basicWeek,basicDay'
	},
	defaultDate: '2017-08-03',
	navLinks: true, // can click day/week names to navigate views
	editable: true,
	eventLimit: true, // allow "more" link when too many events
	events: [
															{
	title: 'Tes event ke 2',
	url: 'tes-event-ke-2.html',
	start: '2017-08-03',
	end: '2017-08-04'
		},
															{
	title: 'Tes event 1',
	url: 'tes-event-ke-1.html',
	start: '2017-08-15',
	end: '2017-08-17'
		},
															]
		});						
	});

 

Css file

#calendar {
max-width: 900px;
margin: 0 auto;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}

 

Dan yang terakhir untuk menampilkan kalender adalah dengan kode di bawah ini

< div id="calendar">< /div>

 

Ini adalah panduan sederhana untuk menambahkan event fullcalender dalam aplikasi Anda dan itu super mudah.

 

Share This Post

Leave Comment

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.