Hướng dẫn full calendar bootstrap 5

In order to correctly theme your calendar with a Bootstrap 5 theme, you must include the correct stylesheets, include the JavaScript plugin, and set themeSystem to 'bootstrap5'.

Using a Bundle

You can use the Bootstrap plugin with browser globals and script tags. First, the Bootstrap stylesheet must be separately loaded in its own tag. Also, a Bootstrap Icons stylesheet must be loaded (more info). Example:

 href='https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css' rel='stylesheet'>
 href='https://cdn.jsdelivr.net/npm//font/bootstrap-icons.css' rel='stylesheet'>

Then, load a FullCalendar bundle and initialize the calendar:

 href='fullcalendar/main.css' rel='stylesheet' />

See a demo »

Using an ES6 Build System

Alternatively, you can load the bootstrap plugin using an ES6 build system. Install the necessary FullCalendar packages first:

npm install --save @fullcalendar/core @fullcalendar/bootstrap5

Then, install the packages for Bootstrap and Bootstrap Icons:

npm install --save bootstrap bootstrap-icons

Then, import the necessary packages and initialize your calendar:

// import the third-party stylesheets directly from your JS
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css'; // needs additional webpack config!

import { Calendar } from '@fullcalendar/core';
import bootstrap5Plugin from '@fullcalendar/bootstrap5';
...
var calendar = new Calendar(calendarEl, {
  plugins: [ bootstrap5Plugin ],
  themeSystem: 'bootstrap5'
});
...

Using bootstrap-icons with webpack is a bit complicated because it relies on font files that are not present in the main stylesheet. See an example project that does it

3rd Party Bootstrap Themes

You can use the standard Bootstrap theme downloaded from getbootstrap.com.

You can also use themes downloaded from 3rd party providers. Google “free bootstrap themes” as a starting point.

The theme you download might already have custom CSS written to style FullCalendar. If so, all the above steps of including the plugin files and specifying theme: 'bootstrap5' are unnecessary. If in doubt, try both methods to see which one looks better.

• 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é!

Bước 1: 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

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

Ví dụ

Các file PHP:

db.php

Ví dụ

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 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;
    }
}
?>

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

Ví dụ

 

 






 

 
 

 

 ×
 
Add Event
 
 

 

 Event:
 

 
 
 
 
 
 

 When:
 

 
 
 
 

 Cancel
 Save
 
 
 




 

 

 ×
 
Event Details
 
 

 

 

 
 
 

 Cancel
 Delete
 
 

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.

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

Đâ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é.

Bài viết này đã giúp ích cho bạn?

Bài viết mới