Hướng dẫn bootstrap 4 fullcalendar - bootstrap 4 fullcalendar

• Trang chủ
• Phát triển web
• PHP
• Tích hợp jQuery Fullcalendar với Bootstrap, PHP & MySQL

Hướng dẫn bạn tích hợp jQuery Fullcalendar với Bootstrap, PHP & MySQL trong ứng dụng của mình.

Gần đây tôi có sử dụng pluginjQuery 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é!
Nào bắt đầu nhé!

Bước 1: Download pluginjQuery Fullcalendar từ trang chủ của nó Tại đây Download pluginjQuery 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 Tạo cơ sở dữ liệu của sự kiện

Ví dụ

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 Thêm các tập tin jQuery vào trong ứng dụng

Ví dụ

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

db.php

Ví dụ

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

index.php

Các file PHP:
Bạn có thể chia file này thành 2 fileadd-event.php, edit-event.php ...

Ví dụ

 = ‘$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;
    }
}
?>

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

Ví dụ

 

 






 

 
 

 

 ×
 
Add Event
 
 

 

 Event:
 

 
 
 
 
 
 

 When:
 

 
 
 
 

 Cancel
 Save
 
 
 




 

 

 ×
 
Event Details
 
 

 

 

 
 
 

 Cancel
 Delete
 
 

script.js

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

Ví dụ

 $(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);
               }
           });
       }
    });

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

Các file PHP:

Chỉnh sửa thông tin kết nối đến cơ sở dữ liệu của bạn.