Trong bài đăng này, chúng tôi sẽ cung cấp cho bạn thông tin về Cách tích hợp jQuery Fullcalendar bằng Bootstrap, PHP và MySQL?. Nghe này, chúng tôi sẽ cung cấp cho bạn chi tiết về Cách tích hợp jQuery Fullcalendar bằng Bootstrap, PHP và MySQL? Và cách sử dụng nó cũng cung cấp cho bạn bản demo cho nó nếu cần thiết
Hôm nay, tôi muốn chia sẻ với bạn việc tích hợp hoạt động thô của các sự kiện lịch đầy đủ của jquery bằng cách sử dụng ví dụ về bootstrap, php & mysql
Fullcalendar là thư viện jquery cung cấp cho chúng tôi hiển thị lịch với các sự kiện và hơn thế nữa. Fullcalendar js cung cấp lịch năm, tháng, tuần và ngày để hiển thị và thật tuyệt vời với quản lý sự kiện kéo và thả. Nếu bạn đang làm về quản lý sự kiện, quản lý tác vụ hay bất cứ thứ gì liên quan đến ngày tháng, lúc đó nếu bạn sử dụng lịch sự kiện như fullcalendar thì càng tốt.
Trong ví dụ này, chúng ta sẽ tạo bảng “sự kiện” trong cơ sở dữ liệu mysql và tạo thao tác thô bằng cách sử dụng jquery ajax như dưới đây
1]Danh sách sự kiện
2]Tạo sự kiện
3]Cập nhật sự kiện
4] Xóa sự kiện
Vì vậy, hãy theo dõi ví dụ đầy đủ về ví dụ sự kiện lịch đầy đủ bằng cách sử dụng php mysql. Sau khi làm theo tất cả các bước, bạn sẽ nhận được bố cục như dưới đây
Xem trước
Bước 1. Tạo bảng sự kiện
Trong bước này, chúng ta sẽ tạo mới bảng “sự kiện” mới trong cơ sở dữ liệu. Bạn có thể sử dụng Truy vấn SQL sau để tạo bảng "sự kiện". Vì vậy, hãy tạo bằng cách sử dụng truy vấn SQL dưới đây
bảng mục
CREATE TABLE 'events' [
'id' int[11] NOT NULL,
'title' varchar[255] COLLATE utf8_bin NOT NULL,
'start' datetime NOT NULL,
'end' datetime DEFAULT NULL
] ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;
Bước 2. Tạo tệp cấu hình DB
Trong bước này, chúng tôi yêu cầu tạo tệp cấu hình cơ sở dữ liệu, ở đây chúng tôi sẽ đặt tên cơ sở dữ liệu, tên người dùng và mật khẩu. Vì vậy, hãy tạo “db_config. php” trên thư mục gốc của bạn và đặt mã dưới đây
db_config. php
Xem thêm. Laravel 5 Ajax CRUD với ví dụ Phân trang và bản trình diễn từ đầu
Bước 3. Tạo Xem tập tin
Trong bước này, chúng tôi sẽ tạo chỉ mục. php, tệp đó sẽ hiển thị bố cục lịch đầy đủ. Trong tệp này, chúng tôi sẽ viết mã jquery và mã ajax. Trong tệp này, tôi đã sử dụng các tệp css và js sau
1] lịch đầy đủ. css
2] khởi động. css
3] jquery. tối thiểu. js
4] khoảnh khắc. tối thiểu. js
5] lịch đầy đủ. tối thiểu. js
Bây giờ hãy tạo chỉ mục. php và đặt mã dưới đây
mục lục. php
$[document].ready[function[] {
var date = new Date[];
var d = date.getDate[];
var m = date.getMonth[];
var y = date.getFullYear[];
var calendar = $['#calendar'].fullCalendar[{
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "events.php",
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_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end,
type: "POST",
success: function[json] {
alert['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: 'update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function[json] {
alert["Updated Successfully"];
}
}];
},
eventClick: function[event] {
var decision = confirm["Do you really want to do that?"];
if [decision] {
$.ajax[{
type: "POST",
url: "delete_event.php",
data: "&id=" + event.id,
success: function[json] {
$['#calendar'].fullCalendar['removeEvents', event.id];
alert["Updated Successfully"];}
}];
}
},
eventResize: function[event] {
var start = $.fullCalendar.formatDate[event.start, "yyyy-MM-dd HH:mm:ss"];
var end = $.fullCalendar.formatDate[event.end, "yyyy-MM-dd HH:mm:ss"];
$.ajax[{
url: 'update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function[json] {
alert["Updated Successfully"];
}
}];
}
}];
}];
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 650px;
margin: 0 auto;
}
Full calendar php mysql example
Bước 4. Tạo tệp Ajax
Trong bước cuối cùng, chúng tôi sẽ tạo bốn tệp cho phương thức ajax và có được liệt kê dưới đây
1] sự kiện. php
2] thêm_sự kiện. php
3]xóa_sự kiện. php
4]cập nhật_sự kiện. php
Bây giờ chúng tôi sẽ tạo bốn tệp đó và đặt từng mã dưới đây cho tệp này
sự kiện. php
add_events. php
xóa_sự kiện. php
update_events. php
Ok, bây giờ chúng tôi đã sẵn sàng để chạy ví dụ Lịch đầy đủ của mình. Vì vậy, hãy chạy lệnh dưới đây trên thư mục gốc của bạn để chạy nhanh
php -S localhost:8000
Bây giờ bạn có thể mở URL dưới đây trên trình duyệt của mình
Xem thêm. PHP MySQL – Ví dụ CRUD Thư viện ảnh đơn giản từ đầu
________số 8Tôi hy vọng nó có thể giúp bạn…
Hy vọng mã và bài đăng này sẽ giúp bạn triển khai Cách tích hợp jQuery Fullcalendar bằng Bootstrap, PHP và MySQL?. nếu bạn cần bất kỳ trợ giúp hoặc bất kỳ phản hồi nào, hãy đưa ra trong phần bình luận hoặc bạn có ý tưởng hay về bài đăng này, bạn có thể đưa ra phần bình luận. Nhận xét của bạn sẽ giúp chúng tôi giúp bạn nhiều hơn và cải thiện chúng tôi. chúng tôi cũng sẽ cung cấp cho bạn loại bài đăng thú vị hơn này trong phần nổi bật, Để có bài đăng và mã thú vị hơn Hãy tiếp tục đọc blog của chúng tôi