Khi quản lý các sự kiện, ngày và giờ sẽ xuất hiện trong bức tranh. Vì vậy, thành phần lịch là thành phần tốt nhất để hiển thị các sự kiện trong chế độ xem. Nó thuận tiện so với các chế độ xem khác như chế độ xem thẻ hoặc chế độ xem danh sách.
Ví dụ này sử dụng thư viện JavaScript Đầy ĐủLịch để kết xuất và quản lý các sự kiện. Các sự kiện là từ cơ sở dữ liệu bằng cách sử dụng PHP và MySQL.
Tập lệnh sau cung cấp cho bạn một hệ thống quản lý sự kiện đơn giản bằng PHP với AJAX. Trình xử lý AJAX kết nối điểm cuối PHP để quản lý các sự kiện với cơ sở dữ liệu.
Trong hướng dẫn trước, chúng ta đã thấy cách tạo hệ thống quản lý sự kiện PHP bằng Bootstrap.
Bước 1: Tạo cơ sở HTML với thư viện FullCalendar
Tập lệnh phía máy khách có HTML với các phần phụ thuộc bắt buộc. HTML này sử dụng CDN để nhập JS và CSS. Nó sử dụng các thư viện sau
- Toàn Lịch.
- Khoảnh khắcJS.
- jQuery và giao diện người dùng jQuery.
Nó có một mục tiêu DIV trống sẽ hiển thị giao diện người dùng lịch sau khi bắt đầu lớp thư viện FullCalendar JavaScript.
index.php
<!DOCTYPE html>
<html>
<head>
<title>Event management in php</title>
<script type="text/javascript"
src="
<script
src="
type="text/javascript"></script>
<script
src="
<script
src="
<script
src="
<link
href="
rel="stylesheet">
<link rel="stylesheet"
href="
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/form.css">
<script src="assets/js/event.js"></script>
<style>
.btn-event-delete {
font-size: 0.85em;
margin: 0px 10px 0px 5px;
font-weight: bold;
color: #959595;
}
</style>
</head>
<body>
<div class="PHP-container">
<h2>Event management in php</h2>
<div class="response"></div>
<div class="row">
<input type="text" name="filter" id="filter"
placeholder="Choose date" />
<button type="button" id="button-filter"
onClick="filterEvent();">Filter</button>
</div>
<div class="row">
<div id='calendar'></div>
</div>
</div>
</body>
</html>
Bước 2: Tạo cấu trúc MySQL trong phpMyAdmin
Ví dụ này tạo một hệ thống quản lý sự kiện liên tục trong PHP. Dữ liệu sự kiện mới được tạo hoặc sửa đổi được lưu trữ vĩnh viễn trong cơ sở dữ liệu.
Tập lệnh này có CREATE STATEMENT và các chỉ mục của cơ sở dữ liệu tbl_events. Thực hiện các bước sau để thiết lập cơ sở dữ liệu này trong môi trường phát triển.
- Tạo cơ sở dữ liệu và nhập tập lệnh SQL bên dưới vào đó.
- Định cấu hình cơ sở dữ liệu mới được tạo trong config/db.php của dự án này.
Tập lệnh cơ sở dữ liệu
sql/cấu trúc.sql
--
-- Database: `full_calendar`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_events`
--
CREATE TABLE `tbl_events` (
`id` int(11) NOT NULL,
`title` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin DEFAULT NULL,
`start` date DEFAULT NULL,
`end` date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_events`
--
ALTER TABLE `tbl_events`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_events`
--
ALTER TABLE `tbl_events`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
cấu hình cơ sở dữ liệu
db.php
<?php
$conn = mysqli_connect("localhost", "root", "", "full_calendar");
if (! $conn) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>
Bước 3: Khởi tạo Fullcalendar và tạo bộ lắng nghe để quản lý sự kiện
Phần này khởi tạo thư viện lịch JavaScript với các cài đặt phù hợp. Ví dụ: tập lệnh bên dưới kích hoạt các lệnh sau để cho phép các sự kiện chuột thực hiện các thay đổi trong lịch.
- có thể chỉnh sửa – Nó sẽ cho phép chỉnh sửa sự kiện trên lịch bằng cách bật tính năng này.
- droppable – Nó hỗ trợ kéo và thả sự kiện để thay đổi ngày.
- eventResize – Nó hỗ trợ mở rộng nội tuyến hoặc giảm thời gian sự kiện bằng cách thay đổi kích thước.
- eventLimit – Nó cho phép giới hạn số lượng sự kiện được hiển thị trên một phiên bản ngày.
- displayEventTime – Nó hiển thị thời gian sự kiện nếu được thêm vào.
Thuộc tính Fullcalendar “events” chỉ định mảng sự kiện được kết xuất tải xuống. Trong ví dụ này, nó có URL điểm cuối PHP để đọc động các sự kiện lịch từ cơ sở dữ liệu.
Tập lệnh này ánh xạ các lựa chọn, kéo, thả và thay đổi kích thước của sự kiện lịch với các trình xử lý AJAX đã xác định.
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
editable: true,
eventLimit: true,
droppable: true,
eventColor: "#fee9be",
eventTextColor: "#232323",
eventBorderColor: "#CCC",
eventResize: true,
header: {
right: 'prev, next today',
left: 'title',
center: 'listMonth, month, basicWeek, basicDay'
},
events: "ajax-endpoint/fetch-calendar.php",
displayEventTime: false,
eventRender: function(event, element) {
element.find(".fc-content").prepend("<span class="btn-event-delete">X</span>");
element.find("span.btn-event-delete").on("click", function() {
if (confirm("Are you sure want to delete the event?")) {
deleteEvent(event);
}
});
},
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");
addEvent(title, start, end);
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true
);
}
calendar.fullCalendar('unselect');
},
eventClick: function(event) {
var title = prompt('Event edit Title:', event.title);
if (title) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
editEvent(title, start, end, event);
}
},
eventDrop: function(event) {
var title = event.title;
if (title) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
editEvent(title, start, end, event);
}
},
eventResize: function(event) {
var title = event.title;
if (title) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
editEvent(title, start, end, event);
}
}
});
$("#filter").datepicker();
});
function addEvent(title, start, end) {
$.ajax({
url: 'ajax-endpoint/add-calendar.php',
data: 'title=" + title + "&start=" + start + "&end=' + end,
type: "POST",
success: function(data) {
displayMessage("Added Successfully");
}
});
}
function editEvent(title, start, end, event) {
$.ajax({
url: 'ajax-endpoint/edit-calendar.php',
data: 'title=" + title + "&start=" + start + "&end=' + end + '&id=' + event.id,
type: "POST",
success: function() {
displayMessage("Updated Successfully");
}
});
}
function deleteEvent(event) {
$('#calendar').fullCalendar('removeEvents', event._id);
$.ajax({
type: "POST",
url: "ajax-endpoint/delete-calendar.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(); }, 5000);
}
function filterEvent() {
var filterVal = $("#filter").val();
if (filterVal) {
$('#calendar').fullCalendar('gotoDate', filterVal);
$("#filter").val("");
}
}
Bước 4: Tạo điểm cuối AJAX để tạo, hiển thị và quản lý dữ liệu sự kiện
Phần này hiển thị mã PHP cho điểm cuối AJAX. Trình xử lý gọi lại Fullcalendar gọi các điểm cuối này thông qua AJAX.
Điểm cuối này nhận tiêu đề sự kiện, ngày bắt đầu và ngày kết thúc. Nó xử lý thao tác cơ sở dữ liệu được yêu cầu bằng cách sử dụng các tham số nhận được.
ajax-endpoint/fetch-calendar.php
<?php
require_once "../config/db.php";
$json = array();
$sql = "SELECT * FROM tbl_events ORDER BY id";
$statement = $conn->prepare($sql);
$statement->execute();
$dbResult = $statement->get_result();
$eventArray = array();
while ($row = mysqli_fetch_assoc($dbResult)) {
array_push($eventArray, $row);
}
mysqli_free_result($dbResult);
mysqli_close($conn);
echo json_encode($eventArray);
?>
ajax-endpoint/add-calendar.php
<?php
require_once "../config/db.php";
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];
$statement = $conn->prepare('INSERT INTO tbl_events (title,start,end) VALUES (?,?,?)');
$statement->bind_param('sss', $title, $start, $end);
$rowResult = $statement->execute();
if (! $rowResult) {
$result = mysqli_error($conn);
}
?>
ajax-endpoint/edit-calendar.php
<?php
require_once "../config/db.php";
$id = $_POST['id'];
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];
$statement = $conn->prepare('UPDATE tbl_events SET title = ?, start= ?, end=? WHERE id = ?');
$statement->bind_param('sssi', $title, $start, $end, $id);
$rowResult = $statement->execute();
mysqli_close($conn);
?>
ajax-endpoint/delete-calendar.php
<?php
require_once "../config/db.php";
$id = $_POST['id'];
$statement = $conn->prepare('DELETE from tbl_events WHERE id= ?');
$statement->bind_param('i', $id);
$rowResult = $statement->execute();
echo mysqli_affected_rows($conn);
mysqli_close($conn);
?>
Đầu ra lịch quản lý sự kiện
Tải xuống
Xem thêm tin mới và bổ ích tại:
– Kiến thức gia đình
– Tri thức đời sống
– Kênh youtube Kiến thức gia đình