Lịch Bootstrap với JQuery

Chúng tôi ngày càng bị ấn tượng bởi cộng đồng rộng lớn xoay quanh Bootstrap, một khuôn khổ CSS nổi tiếng , được tạo bởi Twitter. Lần này tôi giới thiệu cho bạn một lịch dựa trên Bootstrap được lập trình bằng Javascript và JQuery, Tôi cũng sẽ giải thích chi tiết một phần hoạt động của lịch và tôi sẽ thêm một số thủ thuật và cải tiến mà bạn có thể làm.

Lịch Bootstrap này có thiết kế gọn gàng và hoàn toàn đáp ứng, nó sẽ trông đẹp từ tất cả các thiết bị! Nó cũng kết hợp một dịch sang hơn 7 ngôn ngữ và tất cả các ngày lễ hội của mỗi quốc gia được đánh dấu và ghi chú. Một sự xa xỉ!

Hoạt động của Lịch Bootstrap này hơi phức tạp, ban đầu nó trích xuất ngày tháng của người dùng từ tệp JSON, nhưng, dành riêng cho người dùng Creativos Online, tôi sẽ giải thích cách trích xuất các sự kiện từ cơ sở dữ liệu MYSQL để thực hiện hoàn hảo trong bất kỳ hệ thống nào.

Chức năng của các tệp chính của ứng dụng:

INDEX.HTML

• Đang tải Bootstrap 2.3.2
• Thiết kế lịch
• Danh sách các sự kiện
• Điều hướng lịch
• Các chế độ xem Lịch khác nhau (Ngày / Tuần / Tháng / Năm)
• Đang tải ứng dụng trong JS
• Sự lựa chọn ngôn ngữ

INDEX-BS3.HTML

• Đang tải Bootstrap 3.0
• Thiết kế lịch
• Danh sách sự kiện
• Điều hướng lịch
• Các chế độ xem lịch khác nhau (Ngày / Tuần / Tháng / Năm)
• Đang tải ứng dụng trong JS
• Sự lựa chọn ngôn ngữ

SỰ KIỆN.JSON.PHP

• Danh sách sự kiện với dữ liệu sau:
  • Tôi: định danh sự kiện
  • title: tiêu đề sự kiện
  • url: url của sự kiện
  • lớp học: loại sự kiện (thông tin | cảnh báo |…) cho các màu tiếp theo.
  • bắt đầu: ngày bắt đầu
  • kết thúc: ngày kết thúc

ỨNG DỤNG.JS

• Các biến lưu trữ cấu hình ứng dụng.
• Các hàm JQuery bổ sung

LỊCH.JS

• Cài đặt ứng dụng chính
• Các chức năng chính của Lịch
• Khai thác và xử lý các sự kiện
• Ngày lễ hội
• Đang tải ngôn ngữ
• Đang tải danh sách Sự kiện
• Đang tải các chế độ xem Lịch khác nhau (Ngày / Tuần / Tháng / Năm)

LỊCH.CSS

• Kiểu lịch
• Các kiểu danh sách sự kiện
• Kiểu lịch cho các thiết bị khác

Trích xuất các sự kiện từ cơ sở dữ liệu

Để trích xuất các sự kiện từ cơ sở dữ liệu MYSQL chúng tôi sẽ thay thế các dòng của tệp event.json.php bởi:

<?php

$link=mysql_connect("localhost", "usuariodeacceso", "contraseñadeacceso");
mysql_select_db("basededatos",$link) OR DIE ("Error: No es posible establecer la conexión");
mysql_set_charset('utf8');

$eventos=mysql_query("SELECT * FROM events'",$link);

while($all = mysql_fetch_assoc($eventos)){
$e = array();
$e['id'] = $all['id'];
$e['start'] = $all['inicio'];
$e['end'] = $all['final'];
$e['title'] = $all['nombre'];
$e['class'] = $all['clase'];
$e['url'] = $all['url'];
$result[] = $e;
}

echo json_encode(array('success' => 1, 'result' => $result));

?>

github | Lịch Bootstrap

Tải xuống | Lịch Bootstrap

Thêm thông tin | Bootstrap: Khung CSS