Hướng dẫn how to create a event calendar in php? - làm thế nào để tạo lịch sự kiện trong php?

Trong bài viết này, tôi đã phát triển một lớp lịch sự kiện sẽ điền vào tất cả các ngày trong một tháng dựa trên ngày được chỉ định, cùng với các sự kiện mà chúng ta có thể thêm vào lịch.

Mặc dù PHP không bao gồm API lịch tích hợp mỗi se (không bao gồm các phần mở rộng bổ sung), tuy nhiên, nó sẽ cung cấp cho bạn một phạm vi rộng về các phương thức ngày và thời gian mà chúng ta có thể sử dụng để thao tác. Ngoài ra, chúng ta có thể sử dụng các phương pháp này để điền vào các trang hiển thị các ngày, tuần và tháng của một năm cụ thể.

Tại sao tôi nên sử dụng lớp lịch?

Nó hoàn toàn tùy thuộc vào bạn và yêu cầu của bạn. Tôi đã quyết định tự mình viết lớp học của mình khi tôi làm việc trên nhiều dự án yêu cầu một hệ thống lịch dựa trên sự kiện. Tôi đã tìm kiếm vô số lần cho một thư viện tối thiểu, không phụ thuộc và hiện đại. Nhưng không thể tìm thấy một cái mà tôi có thể tích hợp liền mạch với các dự án của mình. Do đó, tôi đã tạo ra lớp PHP có thể dễ dàng được tích hợp với bất kỳ dự án nào, cho dù quy mô của dự án nhỏ hay lớn.

Nguồn

Tạo một bản tin mới lịch.php và thêm mã sau:

active_year = $date != null ? date('Y', strtotime($date)) : date('Y');
        $this->active_month = $date != null ? date('m', strtotime($date)) : date('m');
        $this->active_day = $date != null ? date('d', strtotime($date)) : date('d');
    }

    public function add_event($txt, $date, $days = 1, $color = '') {
        $color = $color ? ' ' . $color : $color;
        $this->events[] = [$txt, $date, $days, $color];
    }

    public function __toString() {
        $num_days = date('t', strtotime($this->active_day . '-' . $this->active_month . '-' . $this->active_year));
        $num_days_last_month = date('j', strtotime('last day of previous month', strtotime($this->active_day . '-' . $this->active_month . '-' . $this->active_year)));
        $days = [0 => 'Sun', 1 => 'Mon', 2 => 'Tue', 3 => 'Wed', 4 => 'Thu', 5 => 'Fri', 6 => 'Sat'];
        $first_day_of_week = array_search(date('D', strtotime($this->active_year . '-' . $this->active_month . '-1')), $days);
        $html = '
';
        $html .= '
';
        $html .= '
';
        $html .= date('F Y', strtotime($this->active_year . '-' . $this->active_month . '-' . $this->active_day));
        $html .= '
';
        $html .= '
';
        $html .= '
';
        foreach ($days as $day) {
            $html .= '
                

                    ' . $day . '
                
            ';
        }
        for ($i = $first_day_of_week; $i > 0; $i--) {
            $html .= '
                

                    ' . ($num_days_last_month-$i+1) . '
                
            ';
        }
        for ($i = 1; $i <= $num_days; $i++) {
            $selected = '';
            if ($i == $this->active_day) {
                $selected = ' selected';
            }
            $html .= '
';
            $html .= '' . $i . '';
            foreach ($this->events as $event) {
                for ($d = 0; $d <= ($event[2]-1); $d++) {
                    if (date('y-m-d', strtotime($this->active_year . '-' . $this->active_month . '-' . $i . ' -' . $d . ' day')) == date('y-m-d', strtotime($event[1]))) {
                        $html .= '
';
                        $html .= $event[0];
                        $html .= '
';
                    }
                }
            }
            $html .= '
';
        }
        for ($i = 1; $i <= (42-$num_days-max($first_day_of_week, 0)); $i++) {
            $html .= '
                

                    ' . $i . '
                
            ';
        }
        $html .= '
';
        $html .= '
';
        return $html;
    }

}
?>

Thêm mã sau vào kiểu dáng của bạn (CSS) hoặc tạo lịch tệp mới.css:

.calendar {
    display: flex;
    flex-flow: column;
}
.calendar .header .month-year {
    font-size: 20px;
    font-weight: bold;
    color: #636e73;
    padding: 20px 0;
}
.calendar .days {
    display: flex;
    flex-flow: wrap;
}
.calendar .days .day_name {
    width: calc(100% / 7);
    border-right: 1px solid #2c7aca;
    padding: 20px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    color: #818589;
    color: #fff;
    background-color: #448cd6;
}
.calendar .days .day_name:nth-child(7) {
    border: none;
}
.calendar .days .day_num {
    display: flex;
    flex-flow: column;
    width: calc(100% / 7);
    border-right: 1px solid #e6e9ea;
    border-bottom: 1px solid #e6e9ea;
    padding: 15px;
    font-weight: bold;
    color: #7c878d;
    cursor: pointer;
    min-height: 100px;
}
.calendar .days .day_num span {
    display: inline-flex;
    width: 30px;
    font-size: 14px;
}
.calendar .days .day_num .event {
    margin-top: 10px;
    font-weight: 500;
    font-size: 14px;
    padding: 3px 6px;
    border-radius: 4px;
    background-color: #f7c30d;
    color: #fff;
    word-wrap: break-word;
}
.calendar .days .day_num .event.green {
    background-color: #51ce57;
}
.calendar .days .day_num .event.blue {
    background-color: #518fce;
}
.calendar .days .day_num .event.red {
    background-color: #ce5151;
}
.calendar .days .day_num:nth-child(7n+1) {
    border-left: 1px solid #e6e9ea;
}
.calendar .days .day_num:hover {
    background-color: #fdfdfd;
}
.calendar .days .day_num.ignore {
    background-color: #fdfdfd;
    color: #ced2d4;
    cursor: inherit;
}
.calendar .days .day_num.selected {
    background-color: #f1f2f3;
    cursor: inherit;
}

Cách sử dụng

Bao gồm lớp vào dự án của bạn và tạo một thể hiện mới.

include 'Calendar.php';
$calendar = new Calendar();

Chúng tôi có thể chỉ định một ngày trong khi tạo một thể hiện mới:

include 'Calendar.php';
$calendar = new Calendar('2021-02-26');

Thêm các sự kiện mới vào lịch:

$calendar->add_event('Holiday', '2021-02-14');

Chúng tôi có thể chỉ định số ngày sự kiện sẽ kéo dài bằng cách liên kết một giá trị bổ sung với phương thức add_event:

$calendar->add_event('Holiday', '2021-02-14', 7); // Event will last for 7 days

Chúng ta cũng có thể thay đổi màu sắc:

$calendar->add_event('Holiday', '2021-02-14', 7, 'red');

Chỉ có màu đỏ, xanh dương và xanh lá cây sẽ hoạt động (mặc định là màu cam). Bạn có thể thêm nhiều màu sắc vào tệp CSS.

Chúng ta có thể điền vào lịch ở định dạng HTML với mã sau:

echo $calendar;

Mã ví dụ

Tạo một ví dụ tệp mới.php và thêm mã sau:

add_event('Birthday', '2021-02-03', 1, 'green');
$calendar->add_event('Doctors', '2021-02-04', 1, 'red');
$calendar->add_event('Holiday', '2021-02-16', 7);
?>


	
		
		
		
		
	
	
	    
		

			
		
	

The StyleSheet (style.css) cho trang ví dụ của chúng tôi:

* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    background-color: #FFFFFF;
    margin: 0;
}
.navtop {
    background-color: #3b4656;
    height: 60px;
    width: 100%;
    border: 0;
}
.navtop div {
    display: flex;
    margin: 0 auto;
    width: 800px;
    height: 100%;
}
.navtop div h2, .navtop div a {
    display: inline-flex;
    align-items: center;
}
.navtop div h2 {
    flex: 1;
    font-size: 24px;
    padding: 0;
    margin: 0;
    color: #ebedee;
    font-weight: normal;
}
.navtop div a {
    padding: 0 20px;
    text-decoration: none;
    color: #c4c8cc;
    font-weight: bold;
}
.navtop div a i {
    padding: 2px 8px 0 0;
}
.navtop div a:hover {
    color: #ebedee;
}
.content {
    width: 800px;
    margin: 0 auto;
}
.content h2 {
    margin: 0;
    padding: 25px 0;
    font-size: 22px;
    border-bottom: 1px solid #ebebeb;
    color: #666666;
}

Và bây giờ nếu chúng tôi điều hướng đến trang ví dụ của mình, nó sẽ xuất hiện như sau:

http://localhost/phpcalendar/example.php

Làm

• Thêm nhiều phương thức vào lớp: Xóa các sự kiện, v.v.
• Xuất sang các định dạng khác nhau.
• Gói nâng cao sẽ bao gồm AJAX, MySQL và nhiều hơn nữa.

Sự kết luận

Mặc dù lớp lịch mà tôi đã tạo không phải là một giải pháp hoàn chỉnh, nhưng nó chắc chắn sẽ giúp bạn tích hợp lớp vào bất kỳ dự án nào một cách liền mạch và mở rộng mã cơ sở.

Thả một bình luận bên dưới và cho tôi biết nếu bạn gặp bất kỳ vấn đề nào với lớp. Đừng quên theo dõi chúng tôi trên phương tiện truyền thông xã hội và chia sẻ các bài viết của chúng tôi vì điều này sẽ giúp trang web của chúng tôi phát triển và chúng tôi có thể cung cấp nhiều nội dung chất lượng hơn.

Được phát hành theo giấy phép MIT.

Nếu bạn muốn hỗ trợ chúng tôi, hãy xem xét việc mua hệ thống lịch sự kiện nâng cao bên dưới vì nó sẽ giúp chúng tôi tạo ra nhiều hướng dẫn hơn và giữ cho trang web của chúng tôi hoạt động. Gói nâng cao bao gồm mã được cải thiện và nhiều tính năng hơn.

Mã nguồn

Cơ sở dữ liệu Tệp SQL

Hệ thống lịch sự kiện an toàn

Thêm, chỉnh sửa và xóa các sự kiện

Tính năng Lịch Mini

Tính năng mô tả sự kiện

Tính năng AJAX INDERATOR (Trình tải vòng tròn)

Tính năng của phương thức JavaScript

Lớp JavaScript

Tích hợp MySQL

Tích hợp Ajax

Tệp SCSS

bảng quản trị

Quản lý tính năng sự kiện

Mã nhận xét

Cập nhật và hỗ trợ miễn phí (các vấn đề nhỏ)

Hướng dẫn sử dụng

Thêm: Mã nguồn hướng dẫn

Hệ thống đăng ký và đăng nhập an toàn

Hệ thống giỏ hàng

Ứng dụng crud

Hệ thống bán vé

Hệ thống thư viện

Hệ thống lịch sự kiện

Hệ thống bỏ phiếu và bỏ phiếu

Hệ thống bình luận

Đánh giá hệ thống

Mâu liên hệ

Hệ thống trò chuyện hỗ trợ trực tiếp

Bản tin & Hệ thống gửi thư

Truy cập vào các tập lệnh trong tương lai

Làm thế nào để tạo lịch với PHP?

Làm thế nào để tạo một lịch sự kiện động trong PHP?

Làm cách nào để tạo một sự kiện lịch trong HTML?

Làm thế nào để hiển thị dữ liệu trong lịch trong PHP?