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 này sang ngày khác, v.v. Nhưng trong quản lý chế độ xem lịch, 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 trình diễn
Tôi đã sử dụng JavaScript FullCalendar để thêm và quản lý các sự kiện bằng lịch PHP. Thư viện này là mã nguồn mở và rất dễ 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 CRUD sự kiện. Tôi đã sử dụng jQuery AJAX để gọi PHP xử lý thao tác CRUD 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 trường hợp 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 để kéo dài hoặc thay đổi thời lượng sự kiện
Ảnh chụp màn hình này hiển thị đầ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 HTML
Mã HTML này sẽ được liên kết 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 CRUD 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. phụ thuộc js
PHP Calendar Event Management FullCalendar JavaScript
Library
Ràng buộc thư viện FullCalendar với CRUD sự kiện
Tập lệnh này được sử dụng để khởi tạo chức năng thư viện FullCalendar để tạo phiên bả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ác lệnh có thể chỉnh sửa và có thể lựa chọn đang chấp nhận một giá trị boolean và đặt phiên bản lịch dưới dạng tương tác với người dùng
Các hoạt động CRUD sự kiện được yêu cầu thông qua AJAX bằng cách sử dụng thư viện gọi lại này. Các sự kiện hiện có được tìm nạp từ cơ sở dữ liệu và được trả về ở định dạng JSON để hiển thị chúng trên lịch. Lệnh gọi lại eventRender giải quyết các hành động bắt buộc phải thực hiện khi hiển thị các sự kiện trên lớp lịch
Khi chọn ngày, một 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 người dùng xác nhận bằng cách nhấp vào trường hợp 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 trong lệnh 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[""+message+"
"];
setInterval[function[] { $[".success"].fadeOut[]; }, 1000];
}
Mã PHP cho sự kiện CRUD
Phần này hiển thị mã PHP để thực thi truy vấn MySQL nhằm thực hiện hành động CRUD sự kiện dựa trên yêu cầu AJAX được gửi qua gọi lại lịch
tìm nạp sự kiện. 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 sự kiện sẽ được mã hóa bằng json_encode để trả về phản hồi JSON để kết xuất sự kiện trên lịch
thêm sự kiện. php và chỉnh sửa sự kiện. php
Các đoạn mã sau được sử dụng để thực thi chèn và cập nhật sự kiện dựa trên yêu cầu gọi lại lịch
xóa sự kiện. php
Khi nhấp vào phần tử sự kiện được vẽ trên lịch, một 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 chuột, yêu cầu AJAX sẽ được gửi sau khi người dùng xác nhận
Sau khi xóa thành công, mã này sẽ phản hồi số lượng hàng bị ảnh hưởng, dựa vào đó lịch sẽ được kết xuất lại với dữ liệu sự kiện mới nhất