bởi Vincy. Sửa đổi lần cuối vào ngày 25 tháng 8 năm 2022. Quản lý các sự kiện trong lịch sẽ trực quan cho người dùng. Trong quản lý sự kiện dựa trên biểu mẫu, người dùng phải nhập nhiều dữ liệu hơn như tiêu đề sự kiện, từ ngày cho đến nay và nhiều hơn nữa. Nhưng trong lịch xem, người dùng chỉ có thể cung cấp tiêu đề bằng cách chọn ngày. Nó sẽ tạo điều kiện cho người dùng nhanh chóng quản lý các sự kiện hàng ngày của mình. Xem bản demo Tôi đã sử dụng FullCalendar JavaScript để thêm và quản lý các sự kiện bằng lịch PHP. Thư viện này là một nguồn mở và rất dễ dàng để tích hợp vào ứng dụng của bạn. Thư viện này cho phép xử lý các chức năng của sự kiện. Tôi đã sử dụng JQuery Ajax để gọi PHP để xử lý hoạt động của sự kiện với cơ sở dữ liệu. Thư viện FullCalendar cho phép người dùng kéo và thả các phiên bản sự kiện từ ngày này sang ngày khác. Nó cũng hỗ trợ thay đổi kích thước sự kiện để mở rộng hoặc thay đổi thời lượng sự kiện. Ảnh chụp màn hình này cho thấy đầu ra của ví dụ quản lý sự kiện lịch PHP bằng cách tích hợp thư viện FullCalendar. Lịch sự kiện HTMLMã HTML này sẽ bị ràng buộc với chức năng thư viện FullCalendar để hiển thị lịch. Nó chứa lớp phản hồi để hiển thị xác nhận của người dùng sau các hành động sự kiện. Tải xuống Thư viện FullCalendar mới nhất và bao gồm các tệp phụ thuộc. Thư viện này yêu cầu JQuery và Moment.js phụ thuộc. <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="fullcalendar/fullcalendar.min.css" />
<script src="fullcalendar/lib/jquery.min.js"></script>
<script src="fullcalendar/lib/moment.min.js"></script>
<script src="fullcalendar/fullcalendar.min.js"></script>
<style>
body {
margin-top: 50px;
text-align: center;
font-size: 12px;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}
#calendar {
width: 700px;
margin: 0 auto;
}
.response {
height: 60px;
}
.success {
background: #cdf3cd;
padding: 10px 60px;
border: #c3e6c3 1px solid;
display: inline-block;
}
</style>
</head>
<body>
<h2>PHP Calendar Event Management FullCalendar JavaScript
Library</h2>
<div class="response"></div>
<div id='calendar'></div>
</body>
</html>
Thư viện FullCalendar ràng buộc với sự kiện CRUDTập lệnh này được sử dụng để khởi tạo chức năng thư viện FullCalendar để tạo một thể hiện lịch. Nó làm cho người dùng lịch tương tác bằng cách đặt các cờ hoặc chỉ thị cần thiết. Ví dụ: có thể chỉnh sửa và & nbsp; có thể chọn & nbsp; các chỉ thị đang chấp nhận một giá trị boolean và làm cho thể hiện lịch như người dùng tương tác. Các hoạt động của sự kiện CRUD được yêu cầu thông qua AJAX bằng các cuộc gọi lại thư viện này. Các sự kiện hiện tại được tìm nạp từ cơ sở dữ liệu và được trả lại ở định dạng JSON để hiển thị chúng trên lịch. EventRender & NBSP; Gọi lại liên quan đến các hành động được yêu cầu thực hiện trên các sự kiện kết xuất trên lớp lịch. Khi chọn một ngày, dấu nhắc JavaScript sẽ được mở để nhập tiêu đề sự kiện. Khi gửi tiêu đề sự kiện, nó sẽ được thêm vào cơ sở dữ liệu và cũng được vẽ trên lịch. Việc xóa sự kiện sẽ được thực hiện bằng cách yêu cầu xác nhận người dùng bằng cách nhấp vào thể hiện sự kiện. Sử dụng lịch có thể chỉnh sửa này, chúng tôi có thể cập nhật ngày sự kiện bằng cách kéo và thả. Yêu cầu AJAX để chỉnh sửa sự kiện được gọi trên Gọi lại EventDrop. script>
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
editable: true,
events: "fetch-event.php",
displayEventTime: false,
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'add-event.php',
data: 'title=' + title + '&start=' + start + '&end=' + end,
type: "POST",
success: function (data) {
displayMessage("Added Successfully");
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function (event, delta) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'edit-event.php',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (response) {
displayMessage("Updated Successfully");
}
});
},
eventClick: function (event) {
var deleteMsg = confirm("Do you really want to delete?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: "delete-event.php",
data: "&id=" + event.id,
success: function (response) {
if(parseInt(response) > 0) {
$('#calendar').fullCalendar('removeEvents', event.id);
displayMessage("Deleted Successfully");
}
}
});
}
}
});
});
function displayMessage(message) {
$(".response").html("<div class='success'>"+message+"</div>");
setInterval(function() { $(".success").fadeOut(); }, 1000);
}
</script>
Mã PHP cho sự kiện crudPhần này hiển thị mã PHP để thực thi các truy vấn MySQL để thực hiện hành động sự kiện CRUD dựa trên yêu cầu AJAX được gửi qua các cuộc gọi lại lịch. fetch-event.php Mã PHP này lấy dữ liệu sự kiện từ cơ sở dữ liệu và lưu trữ nó trong một mảng. Mảng các sự kiện sẽ được mã hóa bằng JSON_ENCODE để trả lại phản hồi JSON cho sự kiện kết xuất trên lịch. <?php
require_once "db.php";
$json = array();
$sqlQuery = "SELECT * FROM tbl_events ORDER BY id";
$result = mysqli_query($conn, $sqlQuery);
$eventArray = array();
while ($row = mysqli_fetch_assoc($result)) {
array_push($eventArray, $row);
}
mysqli_free_result($result);
mysqli_close($conn);
echo json_encode($eventArray);
?>
add-event.php và edit-event.php Các đoạn mã sau đây được sử dụng để thực hiện chèn sự kiện và cập nhật dựa trên yêu cầu gọi lại lịch. <?php
require_once "db.php";
$title = isset($_POST['title']) ? $_POST['title'] : "";
$start = isset($_POST['start']) ? $_POST['start'] : "";
$end = isset($_POST['end']) ? $_POST['end'] : "";
$sqlInsert = "INSERT INTO tbl_events (title,start,end) VALUES ('".$title."','".$start."','".$end ."')";
$result = mysqli_query($conn, $sqlInsert);
if (! $result) {
$result = mysqli_error($conn);
}
?>
<?php
require_once "db.php";
$id = $_POST['id'];
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];
$sqlUpdate = "UPDATE tbl_events SET title='" . $title . "',start='" . $start . "',end='" . $end . "' WHERE id=" . $id;
mysqli_query($conn, $sqlUpdate)
mysqli_close($conn);
?>
delete-event.php Khi nhấp vào phần tử sự kiện được vẽ trên lịch, yêu cầu AJAX để xóa sự kiện sẽ được gửi. Trên trình xử lý sự kiện nhấp vào, yêu cầu AJAX sẽ được gửi sau khi xác nhận người dùng. Sau khi xóa thành công, mã này sẽ phản hồi số lượng các hàng bị ảnh hưởng dựa trên đó lịch sẽ được hiển thị lại với dữ liệu sự kiện mới nhất. <?php
require_once "db.php";
$id = $_POST['id'];
$sqlDelete = "DELETE from tbl_events WHERE id=".$id;
mysqli_query($conn, $sqlDelete);
echo mysqli_affected_rows($conn);
mysqli_close($conn);
?>
Xem demodownload Trở lại đầu | 
