Đăng NhậpĐăng Ký

Chia sẻ kinh nghiệm

Chia sẻ kinh nghiệm Logo Chia sẻ kinh nghiệm Logo

Chia sẻ kinh nghiệm Navigation

  • Trang chủ
  • Giới thiệu
  • Blog
  • Liên hệ
Tìm kiếm
Đặt câu hỏi

Mobile menu

Khóa
Đặt câu hỏi
  • Trang chủ
  • Thể loại
  • Câu hỏi
    • Câu hỏi mới
    • Xu hướng
    • Đọc nhiều
    • Thảo luận nhiều
  • Thăm dò
  • Thẻ
  • Danh hiệu
  • Thành viên
  • Trợ giúp
  • Trang chủ
  • Giới thiệu
  • Blog
  • Liên hệ
Trang chủ/ Website/Tích hợp jQuery Fullcalendar với Bootstrap, PHP & MySQL
On: 9 Tháng Sáu, 2017 Đăng trong Website Bình luận:0 Views: 459

Tích hợp jQuery Fullcalendar với Bootstrap, PHP & MySQL

Hoàng Anh
Tích hợp jQuery Fullcalendar với Bootstrap, PHP & MySQL

Gần đây tôi có sử dụng plugin jQuery Fullcalendar trong ứng dụng của mình, tôi đã phải tìm hiểu từ đầu vì chưa có kinh nghiệm trong việc tích hợp plugin này với Bootstrap, PHP và MySQL. Hy vọng qua bài hướng dẫn này các bạn sẽ không mất thời gian tìm hiểu nhiều như tôi, để có thể ứng dụng vào ứng dụng của bạn.
Nào bắt đầu nhé!
Bước 1: Download plugin jQuery Fullcalendar từ trang chủ của nó Tại đây
Bước 2: Tạo cơ sở dữ liệu của sự kiện

;lang:sql;
1
2
3
4
5
6
7
8
CREATE TABLE events (
  id int(11) NOT NULL
  AUTO_INCREMENT,
  start datetime DEFAULT NULL,
  end datetime DEFAULT NULL,
  title text,
  PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

 
Bước 3: Thêm các tập tin jQuery vào trong ứng dụng

;lang:;
1
2
3
4
5
6
7
8
9
10
11
12
<!— jQuery —>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script>
<!— custom scripts —>
<script type=“text/javascript” src=“js/script.js”></script>
<!— bootstrap —>
<script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” crossorigin=“anonymous”></script>
<link  href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=“stylesheet” >
<!— fullcalendar —>
<link href=“css/fullcalendar.css” rel=“stylesheet” />
<link href=“css/fullcalendar.print.css” rel=“stylesheet” media=“print” />
<script src=“js/moment.min.js”></script>
<script src=“js/fullcalendar.js”></script>

 
Các file PHP:
db.php

;lang:php;
1
2
3
<?php
    $connection = mysqli_connect(‘localhost’,‘DBUser’,‘DBPassword’,‘DBName’) or die(mysqli_error($connection));
?>

Chỉnh sửa thông tin kết nối đến cơ sở dữ liệu của bạn.
index.php
File này bao gồm các hoạt động Thêm mới, cập nhật, xóa các sự kiện và hiển thị các sự kiện, xem sự kiện dưới dạng modal popups của bootstrap.
Bạn có thể chia file này thành 2 file add-event.php, edit-event.php …

;lang:php;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
include(“db.php”);
if(isset($_POST[‘action’]) or isset($_GET[‘view’])) //show all events
{
    if(isset($_GET[‘view’]))
    {
        header(‘Content-Type: application/json’);
        $start = mysqli_real_escape_string($connection,$_GET[“start”]);
        $end = mysqli_real_escape_string($connection,$_GET[“end”]);
        $result = mysqli_query($connection,“SELECT id, start ,end ,title FROM  events where (date(start) >= ‘$start’ AND date(start) <= ‘$end’)”);
        while($row = mysqli_fetch_assoc($result))
        {
            $events[] = $row;
        }
        echo json_encode($events);
        exit;
    }
    elseif($_POST[‘action’] == “add”) // add new event
    {
        mysqli_query($connection,“INSERT INTO events (title ,start ,end )
                    VALUES (
                    ‘”.mysqli_real_escape_string($connection,$_POST[“title”]).“‘,
                    ‘”.mysqli_real_escape_string($connection,date(‘Y-m-d H:i:s’,strtotime($_POST[“start”]))).“‘,
                    ‘”.mysqli_real_escape_string($connection,date(‘Y-m-d H:i:s’,strtotime($_POST[“end”]))).“‘
                    )”);
        header(‘Content-Type: application/json’);
        echo ‘{“id”:”‘.mysqli_insert_id($connection).‘”}’;
        exit;
    }
    elseif($_POST[‘action’] == “update”)  // update event
    {
        mysqli_query($connection,“UPDATE events set
            start = ‘”.mysqli_real_escape_string($connection,date(‘Y-m-d H:i:s’,strtotime($_POST[“start”]))).“‘,
            end = ‘”.mysqli_real_escape_string($connection,date(‘Y-m-d H:i:s’,strtotime($_POST[“end”]))).“‘
            where id = ‘”.mysqli_real_escape_string($connection,$_POST[“id”]).“‘”);
        exit;
    }
    elseif($_POST[‘action’] == “delete”)  // remove event
    {
        mysqli_query($connection,“DELETE from events where id = ‘”.mysqli_real_escape_string($connection,$_POST[“id”]).“‘”);
        if (mysqli_affected_rows($connection) > 0) {
            echo “1”;
        }
        exit;
    }
}
?>

HTML popup và lịch div được định nghĩa trong đánh dấu dưới đây:

;lang:html;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!— add calander in this div —>
<div class=“container”>
<div class=“row”>
<div id=“calendar”></div>
</div>
</div>
<!— Modal  to Add Event —>
<div id=“createEventModal” class=“modal fade” role=“dialog”>
<div class=“modal-dialog”>
<!— Modal content—>
<div class=“modal-content”>
<div class=“modal-header”>
<button type=“button” class=“close” data–dismiss=“modal”>×</button>
<h4 class=“modal-title”>Add Event</h4>
</div>
<div class=“modal-body”>
<div class=“control-group”>
<label class=“control-label” for=“inputPatient”>Event:</label>
<div class=“field desc”>
<input class=“form-control” id=“title” name=“title” placeholder=“Event” type=“text” value=“”>
</div>
</div>
<input type=“hidden” id=“startTime”/>
<input type=“hidden” id=“endTime”/>
<div class=“control-group”>
<label class=“control-label” for=“when”>When:</label>
<div class=“controls controls-row” id=“when” style=“margin-top:5px;”>
</div>
</div>
</div>
<div class=“modal-footer”>
<button class=“btn” data–dismiss=“modal” aria–hidden=“true”>Cancel</button>
<button type=“submit” class=“btn btn-primary” id=“submitButton”>Save</button>
</div>
</div>
</div>
</div>
<!— Modal to Event Details —>
<div id=“calendarModal” class=“modal fade”>
<div class=“modal-dialog”>
<div class=“modal-content”>
<div class=“modal-header”>
<button type=“button” class=“close” data–dismiss=“modal”>×</button>
<h4 class=“modal-title”>Event Details</h4>
</div>
<div id=“modalBody” class=“modal-body”>
<h4 id=“modalTitle” class=“modal-title”></h4>
<div id=“modalWhen” style=“margin-top:5px;”></div>
</div>
<input type=“hidden” id=“eventID”/>
<div class=“modal-footer”>
<button class=“btn” data–dismiss=“modal” aria–hidden=“true”>Cancel</button>
<button type=“submit” class=“btn btn-danger” id=“deleteButton”>Delete</button>
</div>
</div>
</div>
</div>
<!—Modal—>

 
script.js
Tập tin này chứa tất cả các hoạt động và gửi yêu cầu đến PHP và nhận được phản hồi.

;lang:javascript;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
$(document).ready(function(){
        var calendar = $(‘#calendar’).fullCalendar({  // assign calendar
            header:{
                left: ‘prev,next today’,
                center: ‘title’,
                right: ‘agendaWeek,agendaDay’
            },
            defaultView: ‘agendaWeek’,
            editable: true,
            selectable: true,
            allDaySlot: false,
            events: “index.php?view=1”,  // request to load current events
            eventClick:  function(event, jsEvent, view) {  // when some one click on any event
                endtime = $.fullCalendar.moment(event.end).format(‘h:mm’);
                starttime = $.fullCalendar.moment(event.start).format(‘dddd, MMMM Do YYYY, h:mm’);
                var mywhen = starttime + ‘ – ‘ + endtime;
                $(‘#modalTitle’).html(event.title);
                $(‘#modalWhen’).text(mywhen);
                $(‘#eventID’).val(event.id);
                $(‘#calendarModal’).modal();
            },
            select: function(start, end, jsEvent) {  // click on empty time slot
                endtime = $.fullCalendar.moment(end).format(‘h:mm’);
                starttime = $.fullCalendar.moment(start).format(‘dddd, MMMM Do YYYY, h:mm’);
                var mywhen = starttime + ‘ – ‘ + endtime;
                start = moment(start).format();
                end = moment(end).format();
                $(‘#createEventModal #startTime’).val(start);
                $(‘#createEventModal #endTime’).val(end);
                $(‘#createEventModal #when’).text(mywhen);
                $(‘#createEventModal’).modal(‘toggle’);
           },
           eventDrop: function(event, delta){ // event drag and drop
               $.ajax({
                   url: ‘index.php’,
                   data: ‘action=update&title=’+event.title+‘&start=’+moment(event.start).format()+‘&end=’+moment(event.end).format()+‘&id=’+event.id ,
                   type: “POST”,
                   success: function(json) {
                   //alert(json);
                   }
               });
           },
           eventResize: function(event) {  // resize to increase or decrease time of event
               $.ajax({
                   url: ‘index.php’,
                   data: ‘action=update&title=’+event.title+‘&start=’+moment(event.start).format()+‘&end=’+moment(event.end).format()+‘&id=’+event.id,
                   type: “POST”,
                   success: function(json) {
                       //alert(json);
                   }
               });
           }
        });
       $(‘#submitButton’).on(‘click’, function(e){ // add event submit
           // We don’t want this to act as a link so cancel the link action
           e.preventDefault();
           doSubmit(); // send to form submit function
       });
       $(‘#deleteButton’).on(‘click’, function(e){ // delete event clicked
           // We don’t want this to act as a link so cancel the link action
           e.preventDefault();
           doDelete(); send data to delete function
       });
       function doDelete(){  // delete event
           $(“#calendarModal”).modal(‘hide’);
           var eventID = $(‘#eventID’).val();
           $.ajax({
               url: ‘index.php’,
               data: ‘action=delete&id=’+eventID,
               type: “POST”,
               success: function(json) {
                   if(json == 1)
                        $(“#calendar”).fullCalendar(‘removeEvents’,eventID);
                   else
                        return false;
               }
           });
       }
       function doSubmit(){ // add event
           $(“#createEventModal”).modal(‘hide’);
           var title = $(‘#title’).val();
           var startTime = $(‘#startTime’).val();
           var endTime = $(‘#endTime’).val();
           $.ajax({
               url: ‘index.php’,
               data: ‘action=add&title=’+title+‘&start=’+startTime+‘&end=’+endTime,
               type: “POST”,
               success: function(json) {
                   $(“#calendar”).fullCalendar(‘renderEvent’,
                   {
                       id: json.id,
                       title: title,
                       start: startTime,
                       end: endTime,
                   },
                   true);
               }
           });
       }
    });

 
Đây là hướng dẫn đơn giản để các bạn ứng dụng vào sản phẩm của mình, nếu có gì thắc mắc vui lòng comment bên dưới để chúng ta cùng thảo luận nhé.
 

BootstrapjQueryMySQLPHP
Chia sẻ bài viết
  • Facebook
Bài trước
Hướng dẫn cách nướng bít tết
Bài tiếp
Tại sao không được rửa rau bằng nước muối?

Bài viết liên quan

Mạng xã hội Lotus đang tuyển dụng nhiều vị trí hấp dẫn, có công việc liên quan đến lập trình, AI, Big Data, máy học…
On: 28 Tháng Tám, 2019

Mạng xã hội Lotus đang tuyển dụng nhiều vị trí ...

Công ty đứng sau những chú lợn Peppa Pig vừa được mua lại với giá 4 tỷ USD
On: 25 Tháng Tám, 2019

Công ty đứng sau những chú lợn Peppa Pig vừa ...

Để lại bình luận
Hủy

You must login to add a new comment.

Quên mật khẩu?

Loading...

Sidebar

Stats

  • Câu hỏi 171
  • Trả lời 153
  • Bài viết 3k
  • Bình luận 4
  • Trả lời hay 41
  • Thành viên 3k
  • Phổ biến
  • Trả lời
  • Thẻ
  • tranquan

    Cách xử lý lỗi tiếng Việt khi dùng hàm ucwords() ...

    • 3 Trả lời
  • Ẩn danh

    Những loại hoa quả nào làm tăng nồng độ cồn? ...

    • 2 Trả lời
  • Ẩn danh

    Hướng dẫn fake ip trên windows 10

    • 2 Trả lời
  • Ẩn danh

    Xin visa du lịch hay thăm thân Mỹ dễ đậu ...

    • 2 Trả lời
  • Ẩn danh

    Sai số hộ chiếu khi mua vé bay có sao ...

    • 2 Trả lời
  • Hoàng Anh
    Hoàng Anh đã thêm câu trả lời Bạn dùng thử code như sau: $('#' + 'id_cua_textarea_dung_tinymce').html( tinymce.get('id_cua_textarea_dung_tinymce').getContent());… 15 Tháng Tư, 2021 lúc 8:51 sáng
  • Hoàng Anh
    Hoàng Anh đã thêm câu trả lời Bạn thử code này xem nhé, cái này kết hợp… 14 Tháng Tư, 2021 lúc 9:27 sáng
  • Hoàng Anh
    Hoàng Anh đã thêm câu trả lời Để xóa được thư mục đó bạn làm như sau:… 10 Tháng Tư, 2021 lúc 5:20 chiều
  • Hoàng Anh
    Hoàng Anh đã thêm câu trả lời window.location thêm một mục vào lịch sử của bạn mà… 10 Tháng Tư, 2021 lúc 4:46 chiều
  • Hoàng Anh
    Hoàng Anh đã thêm câu trả lời Để lấy kích thước file ảnh theo yêu cầu của… 3 Tháng Tư, 2021 lúc 10:46 chiều
ajax ajax form audi q7 avatar biển số xe boot asus boot dell boot lenovo bảo hiểm ô tô bằng lái bằng lái xe ôtô chia tài sản cho thuê nhà bằng tiếng anh cho thuê tiếng anh chênh lệch giờ chăm bé sơ sinh chụp ảnh ckeditor ckeditor 4 clip nóng coronavirus crash landing on you css cách cài nhạc chuông cho iphone 7 plus cách cài nhạc chuông cho iphone 11 cách cài nhạc chuông cho iphone 12 cách cài nhạc chuông cho iphone bằng document cách cài nhạc chuông cho iphone bằng itunes cách cài nhạc chuông cho iphone bằng zing mp3 cách cài nhạc chuông cho iphone trên máy tính cách cài nhạc chuông cho iphone xs max cách tải nhạc chuông cho iphone 7 cách tải nhạc spotify miễn phí cách tải nhạc trên spotify android cách tải nhạc trên spotify free cách tải nhạc trên spotify miễn phí cách tải nhạc từ spotify về máy tính cách tải nhạc từ spotify về điện thoại cát bà du lịch du lịch châu Âu dây an toàn xe ô tô ebook prc email yandex empty() english epub esim exchange facebook fake ip ford ecosport ford everest galaxy s11 galaxy s20 giá galaxy s11 giá thuê xe 7 chỗ ở hà giang giá vé phà cát bà giúp bảo mật tài khoản facebook giấy phép lái xe google google cache google pay google trends gạt mưa hack tài khoản facebook ha giang ha giang loop ha giang loop tour hoa đào honda city hostel hotel hyundai kona hàm array_push() hàm date hạ cánh nơi anh hợp đồng lao động ios ios 14 iphone iphone 8 plus iphone xr isset() javascript jquery js kem trị nám k5; trị nám k5 lipogel; mua kem trị nám k5 khẩu trang khẩu trang y tế kia morning kinh doanh vận tải kinh nghiệm đi máy bay kết hôn kỳ thi thpt logo google luật giao thông ly dị ly hôn làm sổ đỏ lệ phí trước bạ ma túy ma túy đá max_input_vars mercedes glc 300 mua xe cũ mua xe ô tô mysql máy bay máy tính máy tính bỏ túi mã màu logo mức phạt nồng độ cồn với xe máy mức phạt nồng độ cồn với ô tô nghỉ phép năm 2020 nhạc chuông no internet access nuôi con nồng độ cồn php phượt hà giang quy định tốc độ tối đa quy định về hát karaoke gia đình quỹ etf rental là gì rent là gì rent và hire rewrite url santafe spotify taoj dáng team building thai nhi thanh toán online thue oto tu lai ha giang thue xe may thuê xe cào cào hà giang thuê xe có lái ở hà giang thuê xe máy hằng thường hà giang thuê xe từ hà giang đi đồng văn thuê xe tự lái thuật ngữ bio là gì thăm tù thẻ ghi nợ thẻ ngân hàng thẻ tín dụng thổi nồng độ cồn thừa kế tinymce tiếng anh toyota fortuner tìm kiếm tiếng việt tải nhạc tải nhạc spotify miễn phí tải nhạc trên spotify miễn phí tết nguyên đán tốc độ tối đa tốc độ tối đa được phép tốc độ tối đa được phép của môtô tốc độ tối đa được phép của ôtô tốc độ tối đa được phép ngoài đô thị tốc độ tối đa được phép trong đô thị ubuntu ung thư upload file upload ảnh virus corona visa visa du lịch mỹ visa mỹ visa nhật viên uống miracle vé máy bay vé máy bay rẻ vé máy bay tết giá rẻ văn mai hương wifi windows 10 wordpress xe cũ xe máy xe thế chấp xóa file bằng php xóa ảnh bằng php your phone zorin os Ôtô Ăn chay Đăng kiểm Đăng ký xe máy Đường lưỡi bò đơn khiếu nại gây tiếng ồn đường dây nóng phản ánh tiếng ồn đất đai độ xe ẩn video iphone ẩn ảnh ios 14 ẩn ảnh iphone

Thành viên tích cực

Hoàng Anh

Hoàng Anh

  • 13 Câu hỏi
  • 448 Điểm
Bạch Tuyết

Bạch Tuyết

  • 4 Câu hỏi
  • 65 Điểm
Mr. Bi

Mr. Bi

  • 0 Câu hỏi
  • 50 Điểm
  • Giới thiệu
  • Liên hệ

© 2019 VZN. All Rights Reserved
With Love by VZN.

Explore

  • Trang chủ
  • Thể loại
  • Câu hỏi
    • Câu hỏi mới
    • Xu hướng
    • Đọc nhiều
    • Thảo luận nhiều
  • Thăm dò
  • Thẻ
  • Danh hiệu
  • Thành viên
  • Trợ giúp

Thêm/Sửa đường dẫn

Nhập địa chỉ đích

Hoặc liên kết đến nội dung đã tồn tại

    Thiếu từ khóa tìm kiếm. Hiển thị các bài viết mới nhất. Tìm hoặc sử dụng phím mũi tên lên và xuống để chọn một mục.