Pada tutorial kali ini, saya akan menggunakan plugin FullCalendar untuk membuat tata letak event calender dan membuatnya dinamis menggunakan PHP dan MySQL. Plugin ini tidak bergantung pada pustaka apa pun, responsif, dan secara otomatis pas di halaman. Berbagai jenis opsi dan acara tersedia untuk menyesuaikan dan mengontrolnya.
Event calender sendiri adalah alat yang ampuh untuk melacak acara, jadwal, janji temu, dan tenggat waktu yang akan datang.
Saya juga akan menunjukkan cara membuat event, memperbarui dan menghapus event yang sudah ada, serta memuat event tersebut di pustaka JavaScript FullCalendar menggunakan PHP AJAX dan MySQL.
Saya menggunakan FullCalendar v6 dan pustaka sweetAlert untuk menampilkan kotak peringatan untuk menambah/mengedit acara.
1. Membuat Database
Langkah yang pertama yaitu membuat database. Disini saya akan menggunakan mysql dan membuat database dengan nama tutorial.
Pada database tersebut Anda bisa menjalankan query berikut untuk membuat sebuah table events.
CREATE TABLE `events` (
`id` int(10) NOT NULL,
`title` varchar(190) NOT NULL,
`description` text NOT NULL,
`start_date` date NOT NULL,
`end_date` date NOT NULL
);
ALTER TABLE `events`
ADD PRIMARY KEY (`id`);
ALTER TABLE `events`
MODIFY `id` int(10) NOT NULL AUTO_INCREMENT;2. Membuat Configurasi
Selanjutnya, kita buat folder project dan pada folder tersebut buat file config.php untuk configurasi database.
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}Ubah $user, $password, dan $dbname sesuai dengan configurasi di sistem Anda.
3. Membuat Tampilan Kalender
Kita buat terlebih dahulu file index.php yang berisi tampilan kalender nantinya. Kemudian kita akan menambahkan beberapa library yang akan digunakan dalam membuat event calender di php.
<?php
$currentData = date('Y-m-d');
?>
<!-- Calendar Container -->
<div id='calendar-container'>
<div id='calendar'></div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<!-- Fullcalendar -->
<script type="text/javascript" src="fullcalendar-6.1.4/dist/index.global.min.js"></script>
<!-- Sweetalert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>Menyimpan tanggal saat ini di $currentData, ini digunakan untuk mengatur tanggal awal FullCalendar. Buat
untuk menginisialisasi FullCalendar().
4. Mengambil Semua Events
Buat file fetchevents.php untuk memuat semua daftar acara yang dibuat di FullCalendar.
Ambil semua catatan dari tabel acara dan tetapkan ke $eventsList. Lakukan perulangan pada $eventsList dan inisialisasi $response Array dengan eventid, judul, deskripsi, tanggal mulai, dan tanggal berakhir. Kembalikan $response dalam format JSON.
<?php
include "config.php";
// Fetch all records
$sql = "SELECT * FROM events";
$eventsList = mysqli_query($con,$sql);
$response = array();
while($row = mysqli_fetch_assoc($eventsList)){
$response[] = array(
"eventid" => $row['id'],
"title" => $row['title'],
"description" => $row['description'],
"start" => $row['start_date'],
"end" => $row['end_date'],
);
}
echo json_encode($response);
exit;5. Membuat Handle AJAX requests
Buat file ajaxfile.php.
Dari sini tangani 4 permintaan –
- addEvent – Menambahkan acara baru.
- moveEvent – Memperbarui tanggal acara.
- editEvent – Memperbarui detail acara.
- deleteEvent – Menghapus acara.
$request == ‘addEvent’ –
Baca data POST dan tetapkan ke variabel. Jika nilai variabel tidak kosong, maka sisipkan record baru di tabel event.
Simpan id sisipan terakhir di variabel $eventid dan 1 ke $status. Inisialisasi Array $response dengan eventid, status, dan kunci pesan. Tetapkan $eventid ke kunci eventid, 1 ke status, dan pesan sukses ke kunci pesan.
Jika catatan tidak dimasukkan, maka simpan 0 ke status dan pesan kesalahan ke kunci pesan dalam $response Array.
Kembalikan $response Array dalam format JSON.
$request == ‘moveEvent’ –
Baca POST tanggal baru dan perbarui id acara. Jika $eventid > 0 dan $start_date dan $end_date tidak kosong, maka periksa apakah $eventid ada di dalam tabel events atau tidak. Jika ada, maka perbarui field start_date dan end_date dan tetapkan 1 ke $status. Dalam $response Array simpan 1 ke kunci status dan pesan sukses ke kunci pesan.
Jika record tidak diperbarui maka simpan 0 ke kunci status dan pesan kesalahan ke kunci pesan.
Kembalikan $response Array dalam format JSON.
$request == ‘editEvent’ –
Baca detail event POST dan perbarui id event. Jika $eventid > 0 dan $title dan $description tidak kosong, maka periksa apakah $eventid ada di dalam tabel event atau tidak. Jika ada, maka perbarui nilai field judul dan deskripsi di tabel events dengan nilai POST yang baru.
Tetapkan 1 ke $status dan simpan 1 ke kunci status dan pesan sukses ke kunci pesan di $response Array.
Jika catatan tidak diperbarui maka simpan 0 ke kunci status dan pesan kesalahan ke kunci pesan.
Kembalikan $response Array dalam format JSON.
$request == ‘deleteEvent’ –
Baca id peristiwa POST dan periksa apakah itu > 0 atau tidak. Jika ya, periksa apakah record di tabel events ada dengan id $eventid.
Hapus catatan jika ada dan tetapkan 1 ke $status. Dalam Array $response, simpan 1 ke kunci status dan pesan sukses ke kunci pesan.
Jika tidak dihapus, tetapkan 0 ke kunci status dan pesan kesalahan ke kunci pesan di $response Array.
Kembalikan Array $response dalam format JSON.
<?php
include "config.php";
$request = "";
// Read $_GET value
if(isset($_POST['request'])){
$request = $_POST['request'];
}
// Add New event
if($request == 'addEvent'){
// POST data
$title = ""; $description = "";
$start_date = ""; $end_date = "";
if(isset($_POST['title'])){
$title = $_POST['title'];
}
if(isset($_POST['description'])){
$description = $_POST['description'];
}
if(isset($_POST['start_date'])){
$start_date = $_POST['start_date'];
}
if(isset($_POST['start_date'])){
$end_date = $_POST['end_date'];
}
$response = array();
$status = 0;
if(!empty($title) && !empty($description) && !empty($start_date) && !empty($end_date) ){
// Insert record
$sql = "INSERT INTO events(title,description,start_date,end_date) VALUES('".$title."','".$description."','".$start_date."','".$end_date."')";
if(mysqli_query($con,$sql)){
$eventid = mysqli_insert_id($con);
$status = 1;
$response['eventid'] = $eventid;
$response['status'] = 1;
$response['message'] = 'Event created successfully.';
}
}
if($status == 0){
$response['status'] = 0;
$response['message'] = 'Event not created.';
}
echo json_encode($response);
exit;
}
// Move event
if($request == 'moveEvent'){
// POST data
$eventid = 0;
$start_date = ""; $end_date = "";
if(isset($_POST['eventid']) && is_numeric($_POST['eventid'])){
$eventid = $_POST['eventid'];
}
if(isset($_POST['start_date'])){
$start_date = $_POST['start_date'];
}
if(isset($_POST['end_date'])){
$end_date = $_POST['end_date'];
}
$response = array();
$status = 0;
// Check event id
$sql = "SELECT id FROM events WHERE id=".$eventid;
$result = mysqli_query($con,$sql);
if(mysqli_num_rows($result)){
// Update record
$sql = "UPDATE events SET start_date='".$start_date."',end_date='".$end_date."' WHERE id=".$eventid;
if(mysqli_query($con,$sql)){
$status = 1;
$response['status'] = 1;
$response['message'] = 'Event date updated successfully.';
}
}
if($status == 0){
$response['status'] = 0;
$response['message'] = 'Event date not updated.';
}
echo json_encode($response);
exit;
}
// Update event
if($request == 'editEvent'){
// POST data
$eventid = 0;
if(isset($_POST['eventid']) && is_numeric($_POST['eventid'])){
$eventid = $_POST['eventid'];
}
if(isset($_POST['title'])){
$title = $_POST['title'];
}
if(isset($_POST['description'])){
$description = $_POST['description'];
}
$response = array();
if($eventid > 0 && !empty($title) && !empty($description) ){
// Check event id
$sql = "SELECT id FROM events WHERE id=".$eventid;
$result = mysqli_query($con,$sql);
if(mysqli_num_rows($result)){
// Update record
$sql = "UPDATE events SET title='".$title."', description='".$description."' WHERE id=".$eventid;
if(mysqli_query($con,$sql)){
$status = 1;
$response['status'] = 1;
$response['message'] = 'Event updated successfully.';
}
}
}
if($status == 0){
$response['status'] = 0;
$response['message'] = 'Event not updated.';
}
echo json_encode($response);
exit;
}
// Delete Event
if($request == 'deleteEvent'){
// POST data
$eventid = 0;
if(isset($_POST['eventid']) && is_numeric($_POST['eventid'])){
$eventid = $_POST['eventid'];
}
$response = array();
$status = 0;
if($eventid > 0){
// Check event id
$sql = "SELECT id FROM events WHERE id=".$eventid;
$result = mysqli_query($con,$sql);
if(mysqli_num_rows($result)){
// Delete record
$sql = "DELETE FROM events WHERE id=".$eventid;
if(mysqli_query($con,$sql)){
$status = 1;
$response['status'] = 1;
$response['message'] = 'Event deleted successfully.';
}
}
}
if($status == 0){
$response['status'] = 0;
$response['message'] = 'Event not deleted.';
}
echo json_encode($response);
exit;
}Inisiasi FullCalendar pada <div id=’kalender’>
- initialDate – Secara default, FullCalendar menampilkan bulan saat ini namun Anda juga dapat menentukan tanggal dalam format yyyy-mm-dd.
- height – Secara default, ukurannya pas di seluruh layar tetapi Anda dapat mengubah tingginya menggunakan opsi ini. Saya mengaturnya ke 600px.
- selectable – Izinkan pemilihan acara. Nilai defaultnya adalah benar.
- dapat diedit – Izinkan seret dan lepas acara pada tanggal yang berbeda. Nilai defaultnya adalah salah.
- dayMaxEvents – Menampilkan tombol lainnya jika banyak acara yang diatur pada suatu tanggal. Nilai defaultnya adalah false.
- events – Memuat acara yang ada. Tentukan file dari mana perlu memuat peristiwa. Setel ke fetchevents.php.
- select – Pemicu acara ini ketika mengklik pada suatu hari. Menggunakan ini untuk menambahkan peristiwa baru dengan menampilkan kotak popup untuk memasukkan detail peristiwa.
Menampilkan kotak konfirmasi sweetAlert yang memiliki kotak teks untuk memasukkan nama acara dan area teks untuk memasukkan deskripsi.
Jika tombol konfirmasi diklik, maka baca nilai yang dimasukkan serta tanggal mulai dan berakhirnya event. Kirimkan permintaan AJAX POST ke ajaxfile.php, berikan permintaan: ‘addEvent’ dan detail event. Saat callback berhasil, periksa status respons. Jika bernilai 1 berarti record berhasil dimasukkan ke dalam database MySQL, dengan menggunakan calendar.addEvent(). Berikut untuk full code-nya.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialDate: '<?= $currentData ?>',
height: '600px',
selectable: true,
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
events: 'fetchevents.php', // Fetch all events
select: function(arg) { // Create Event
// Alert box to add event
Swal.fire({
title: 'Add New Event',
showCancelButton: true,
confirmButtonText: 'Create',
html:
'<input id="eventtitle" class="swal2-input" placeholder="Event name" style="width: 84%;" >' +
'<textarea id="eventdescription" class="swal2-input" placeholder="Event description" style="width: 84%; height: 100px;"></textarea>',
focusConfirm: false,
preConfirm: () => {
return [
document.getElementById('eventtitle').value,
document.getElementById('eventdescription').value
]
}
}).then((result) => {
if (result.isConfirmed) {
var title = result.value[0].trim();
var description = result.value[1].trim();
var start_date = arg.startStr;
var end_date = arg.endStr;
if(title != '' && description != ''){
// AJAX - Add event
$.ajax({
url: 'ajaxfile.php',
type: 'post',
data: {request: 'addEvent',title: title,description: description,start_date: start_date,end_date: end_date},
dataType: 'json',
success: function(response){
if(response.status == 1){
// Add event
calendar.addEvent({
eventid: response.eventid,
title: title,
description: description,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
// Alert message
Swal.fire(response.message,'','success');
}else{
// Alert message
Swal.fire(response.message,'','error');
}
}
});
}
}
})
calendar.unselect()
},
eventDrop: function (event, delta) { // Move event
// Event details
var eventid = event.event.extendedProps.eventid;
var newStart_date = event.event.startStr;
var newEnd_date = event.event.endStr;
// AJAX request
$.ajax({
url: 'ajaxfile.php',
type: 'post',
data: {request: 'moveEvent',eventid: eventid,start_date: newStart_date, end_date: newEnd_date},
dataType: 'json',
async: false,
success: function(response){
console.log(response);
}
});
},
eventClick: function(arg) { // Edit/Delete event
// Event details
var eventid = arg.event._def.extendedProps.eventid;
var description = arg.event._def.extendedProps.description;
var title = arg.event._def.title;
// Alert box to edit and delete event
Swal.fire({
title: 'Edit Event',
showDenyButton: true,
showCancelButton: true,
confirmButtonText: 'Update',
denyButtonText: 'Delete',
html:
'<input id="eventtitle" class="swal2-input" placeholder="Event name" style="width: 84%;" value="'+ title +'" >' +
'<textarea id="eventdescription" class="swal2-input" placeholder="Event description" style="width: 84%; height: 100px;">' + description + '</textarea>',
focusConfirm: false,
preConfirm: () => {
return [
document.getElementById('eventtitle').value,
document.getElementById('eventdescription').value
]
}
}).then((result) => {
if (result.isConfirmed) { // Update
var newTitle = result.value[0].trim();
var newDescription = result.value[1].trim();
if(newTitle != ''){
// AJAX - Edit event
$.ajax({
url: 'ajaxfile.php',
type: 'post',
data: {request: 'editEvent',eventid: eventid,title: newTitle, description: newDescription},
dataType: 'json',
async: false,
success: function(response){
if(response.status == 1){
// Refetch all events
calendar.refetchEvents();
// Alert message
Swal.fire(response.message, '', 'success');
}else{
// Alert message
Swal.fire(response.message, '', 'error');
}
}
});
}
} else if (result.isDenied) { // Delete
// AJAX - Delete Event
$.ajax({
url: 'ajaxfile.php',
type: 'post',
data: {request: 'deleteEvent',eventid: eventid},
dataType: 'json',
async: false,
success: function(response){
if(response.status == 1){
arg.event.remove();
// Alert message
Swal.fire(response.message, '', 'success');
}else{
// Alert message
Swal.fire(response.message, '', 'error');
}
}
});
}
})
}
});
calendar.render();
});Selamat sekarang, Anda telah berhasil membuat event calender di PHP dengan menggunakan bantuan library dari FullCalender.