Lịch Bootstrap với JQuery

lịch bootstrap 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.

Hệ thống cơ sở dữ liệu đã biết

Hệ thống cơ sở dữ liệu đã biết

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

APP.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


Nội dung bài viết tuân thủ các nguyên tắc của chúng tôi về đạo đức biên tập. Để báo lỗi, hãy nhấp vào đây.

14 bình luận, để lại của bạn

Để lại bình luận của bạn

địa chỉ email của bạn sẽ không được công bố.

*

*

  1. Chịu trách nhiệm về dữ liệu: Miguel Ángel Gatón
  2. Mục đích của dữ liệu: Kiểm soát SPAM, quản lý bình luận.
  3. Hợp pháp: Sự đồng ý của bạn
  4. Truyền thông dữ liệu: Dữ liệu sẽ không được thông báo cho các bên thứ ba trừ khi có nghĩa vụ pháp lý.
  5. Lưu trữ dữ liệu: Cơ sở dữ liệu do Occentus Networks (EU) lưu trữ
  6. Quyền: Bất cứ lúc nào bạn có thể giới hạn, khôi phục và xóa thông tin của mình.

  1.   David Z. dijo

    khi tôi kiểm tra mã Sergio

    1.    Sergio Rodenas dijo

      Mã đã được kiểm tra! Điều duy nhất, bạn phải tạo bảng «sự kiện» trong cơ sở dữ liệu của mình với các trường sau: {id | nha | kết thúc | tên | lớp học | url} và định cấu hình quyền truy cập vào cơ sở dữ liệu của bạn!

      1.    Ros dijo

        Tôi đã thay đổi các biến đó cho những người khác và nó đã cho phép tôi thêm sự kiện vào cơ sở dữ liệu của mình, nhưng tôi không thấy nó được phản ánh trong lịch. Và làm cách nào tôi có thể khôi phục dữ liệu của các sự kiện tùy thuộc vào ngày tôi nhấp vào lịch?

  2.   Jose Luis Zamudio (@JoseZami) dijo

    Để thực hiện và thực hiện việc tạo các sự kiện, thì cơ sở dữ liệu phải được tạo, nhưng vấn đề là tôi có thể nối các sự kiện vào nó và ngôn ngữ mặc định là tiếng Tây Ban Nha vì nó được định nghĩa là tiếng Anh theo mặc định.

    1.    Sergio Rodenas dijo

      Để đặt trước ngôn ngữ sang tiếng Tây Ban Nha, tốt nhất là thay thế các chuỗi hiện có trong tệp ngôn ngữ Tây Ban Nha bằng các chuỗi bằng tiếng Anh trong tệp calendar.js. Tuy nhiên, có những phương pháp khác gọn gàng hơn, bạn có thể tìm thấy chúng trên trang web chính của script hoặc trong cộng đồng Github, được đính kèm với bài đăng này.
      Ngoài ra, tôi sẽ cố gắng tải lên một bài đăng mới trong một vài tuần, nơi tôi sẽ giải thích cách tạo chèn các sự kiện trong cơ sở dữ liệu.

  3.   Jose Luis Zamudio (@JoseZami) dijo

    Cảm ơn bạn rất nhiều, tôi sẽ đánh giá cao bài đăng để chèn sự kiện :)

  4.   jair dijo

    xin chào, tôi gặp sự cố khi tôi sửa mọi thứ để kết nối và trích xuất dữ liệu của tôi từ cơ sở dữ liệu, nó không hiển thị cho tôi bất kỳ sự kiện nào

  5.   diego dijo

    không chèn sự kiện vào cơ sở dữ liệu

  6.   Gonza dijo

    Bạn có thể đăng cách chèn sự kiện? trong trường bắt đầu và kết thúc, kiểu dữ liệu nào? dấu thời gian? còn lại "0", tôi cần phải chèn và có thể chỉnh sửa các sự kiện. Cảm ơn

  7.   Thứ năm dijo

    TẠO CƠ SỞ DỮ LIỆU NẾU KHÔNG TỒN TẠI `bootstrap_calendar` / *! 40100 BỘ SẮC KÝ DEFAULT utf8 COLLATE utf8_spanish_ci * /;
    SỬ DỤNG `bootstrap_calendar`;
    - MySQL dump 10.13 Distrib 5.6.13, dành cho Win32 (x86)
    -
    - Máy chủ: 127.0.0.1 Cơ sở dữ liệu: bootstrap_calendar
    - ——————————————————
    - Phiên bản máy chủ 5.5.27

    / *! 40101 SET @OLD_CHARACTER_SET_CLIENT = @@ CHARACTER_SET_CLIENT * /;
    / *! 40101 SET @OLD_CHARACTER_SET_RESULTS = @@ CHARACTER_SET_RESULTS * /;
    / *! 40101 SET @OLD_COLLATION_CONNECTION = @@ COLLATION_CONNECTION * /;
    / *! 40101 ĐẶT TÊN utf8 * /;
    / *! 40103 SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
    / *! 40103 SET TIME_ZONE = '+ 00:00 ′ * /;
    / *! 40014 SET @OLD_UNIQUE_CHECKS = @@ UNIQUE_CHECKS, UNIQUE_CHECKS = 0 * /;
    / *! 40014 SET @OLD_FOREIGN_KEY_CHECKS = @@ FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS = 0 * /;
    / *! 40101 SET @OLD_SQL_MODE = @@ SQL_MODE, SQL_MODE = 'NO_AUTO_VALUE_ON_ZERO' * /;
    / *! 40111 SET @OLD_SQL_NOTES = @@ SQL_NOTES, SQL_NOTES = 0 * /;

    -
    - Cấu trúc bảng cho bảng `sự kiện`
    -

    DROP TABLE NẾU TỒN TẠI `sự kiện`;
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 SET character_set_client = utf8 * /;
    TẠO BẢNG `sự kiện` (
    `id` int (10) unsigned NOT NULL AUTO_INCREMENT,
    `title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
    văn bản `body` COLLATE utf8_spanish_ci NOT NULL,
    `url` varchar (150) COLLATE utf8_spanish_ci NOT NULL,
    `class` varchar (45) COLLATE utf8_spanish_ci NOT NULL DEFAULT 'info',
    `start` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
    `end` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
    KHÓA CHÍNH (`id`)
    ) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET character_set_client = @saved_cs_client * /;

    -
    - Bán dữ liệu cho bảng `sự kiện`
    -

    BẢNG KHÓA `sự kiện` WRITE;
    / *! 40000 ALTER TABLE `sự kiện` TẮT CÁC PHÍM * /;
    / *! 40000 ALTER TABLE `sự kiện` BẬT CÁC KHÓA * /;
    MỞ KHÓA BẢNG;
    / *! 40103 ĐẶT TIME_ZONE = @ OLD_TIME_ZONE * /;

    / *! 40101 SET SQL_MODE = @ OLD_SQL_MODE * /;
    / *! 40014 SET FOREIGN_KEY_CHECKS = @ OLD_FOREIGN_KEY_CHECKS * /;
    / *! 40014 SET UNIQUE_CHECKS = @ OLD_UNIQUE_CHECKS * /;
    / *! 40101 SET CHARACTER_SET_CLIENT = @ OLD_CHARACTER_SET_CLIENT * /;
    / *! 40101 SET CHARACTER_SET_RESULTS = @ OLD_CHARACTER_SET_RESULTS * /;
    / *! 40101 SET COLLATION_CONNECTION = @ OLD_COLLATION_CONNECTION * /;
    / *! 40111 SET SQL_NOTES = @ OLD_SQL_NOTES * /;

    - Dump hoàn thành vào 2014-05-31 14:38:23

  8.   juan77 dijo

    xin chào migos có cách nào để thay đổi định dạng ngày JSON không

  9.   giselabra dijo

    Lịch rất tốt, chỉ khi thêm một sự kiện mới, ngày mà tôi lấy theo mặc định cả đầu và cuối đều ở định dạng tiếng Anh, làm cách nào để chuyển nó sang tiếng Tây Ban Nha? Nó sẽ là DD / MM / YYYY. Xin chân thành cảm ơn và kính chào

  10.   Fabian dijo

    Xin chào, lịch rất tốt, nhưng khi cập nhật ngày, lịch không được phản ánh ngay lập tức. Những gì tôi có thể làm được ?

    Tôi cũng có một vấn đề khác, làm thế nào để có thể hiển thị tất cả các điểm trong chế độ xem hàng tháng, có thể phóng to hình vuông không? những gì tương ứng với một ngày?

  11.   Alex dijo

    Tôi có vấn đề là cục bộ khi tải ví dụ, nó hoạt động hoàn hảo nhưng khi tôi tải nó lên máy chủ trực tuyến, nó không hiển thị cho tôi bất kỳ thứ gì từ lịch chỉ có các nút. Bất kỳ ý tưởng nào có thể có hoặc có thể sai với máy chủ để sửa chữa nó.