Lịch sự kiện bootstrap 4

Kích thước tập tin. 8. 97 KBViews Total. 29749Cập nhật lần cuối. 06/03/2022 01. 23. 00 UTCNgày xuất bản. 06/06/2020 01. 24. 29 UTCTrang web chính thức. Tới trang webGiấy phép. MIT

Nội dung chính Show

phụ thuộc
Làm thế nào để sử dụng nó
Nhật ký thay đổi
một lịch. Vô số cách để biến nó thành của riêng bạn
có thể tùy chỉnh
Đăng ký lịch của bạn
Hỗ trợ múi giờ
Nhiều lượt xem
Các sự kiện nổi bật
sự kiện định kỳ
Lượt xem bổ sung
Mã ngắn và khối
Tiện ích nâng cao
Chúng tôi luôn sẵn sàng hỗ trợ trực tiếp cho bạn, như một phần của Events Calendar Pro
Cập nhật thường xuyên
thiết kế thử nghiệm

Tải xuống bản trình diễn

Thêm trong danh mục này

Xem các plugin được đề xuất

TOP 100 Plugin jQuery 2022

Chrome, IE9+, FireFox, Opera, Safari#Bootstrap#bootstrap 4#Calendar#lịch sự kiện

Một thành phần lịch sạch tối thiểu dành cho Bootstrap 4 hiển thị động các sự kiện trên chế độ xem theo tháng

phụ thuộc

jQuery
Khung khởi động 4
Khoảng khăc. js

Làm thế nào để sử dụng nó

1. Để sử dụng thành phần này, đảm bảo bạn đã tải thư viện jQuery và khung Bootstrap 4 trong tài liệu

2. Tải khoảnh khắc mới nhất. js để xử lý ngày & giờ

3. Tải biểu định kiểu của lịch trong tài liệu

4. Tạo vùng chứa DIV để chứa lịch sự kiện

5. Nhập mô-đun spinner tải nếu cần

import {Spinner} from './spinner.js';

6. Xác định và nhập các sự kiện của bạn như sau

// mockData.js
export const mockData = [
    {
        time: '2020-06-13T21:00:00 Z',
        cls: 'bg-orange-alt',
        desc: 'Jack, Stephen'
    },
    {
        time: '2020-06-13T22:00:00 Z',
        cls: 'bg-green-alt',
        desc: 'Nathan, Luke'
    },
    {
        time: '2020-06-18T21:00:00 Z',
        cls: 'bg-red-alt',
        desc: 'Nathan, Stephen' 
    },
    {
        time: '2020-06-18T22:00:00 Z',
        cls: 'bg-cyan-alt',
        desc: 'Peter, Luke'
    },
    {
        time: '2020-06-18T23:00:00 Z',
        cls: 'bg-purple-alt',
        desc: 'Lora, Sandy'
    },
    {
        time: '2020-06-19T20:00:00 Z',
        cls: 'bg-sky-blue-alt',
        desc: 'Nathan, Luke'
    },
    {
        time: '2020-06-19T19:00:00 Z',
        cls: 'bg-orange-alt',
        desc: 'Peter, Luke'
    },
    {
        time: '2020-05-22T21:00:00 Z',
        cls: 'bg-sky-blue-alt',
        desc: 'Peter, Lora'
    },
    {
        time: '2020-07-02T19:00:00 Z',
        cls: 'bg-purple-alt',
        desc: 'Peter, Luke'
    }
];

import {mockData} from './mockData.js';

7. Nhập thành phần lịch

________số 8

8. Khởi tạo lịch và tải dữ liệu sự kiện vào lịch không đồng bộ

document.addEventListener("DOMContentLoaded", async ()=>{
  const cal = Calendar('calendar');
  const spr = Spinner('calendar'); 
  await spr.renderSpinner().delay(0);
  cal.bindData(mockData);
  cal.render();
});

Nhật ký thay đổi

2022-06-03

thời điểm cập nhật. phụ thuộc js

Plugin jQuery tuyệt vời này được phát triển bởi ylli2000. Để biết thêm Cách sử dụng nâng cao, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức

Cung cấp miễn phí các sự kiện của bạn với Lịch sự kiện hoặc nâng cấp lên Pro để mở khóa các sự kiện định kỳ, chế độ xem, hỗ trợ cao cấp, v.v.

Thử trước khi mua

Tự do

Bắt đầu miễn phí với plugin lịch hàng đầu của chúng tôi

Miễn phí mãi mãi

Tải xuống

Các tính năng cần thiết

Chế độ xem tháng, danh sách và ngày
Đáp ứng đầy đủ
Danh mục & thẻ

chuyên nghiệp

Vượt ra ngoài những điều cơ bản với các tính năng bổ sung và hỗ trợ cao cấp

1 trang web
3 trang web
10 trang web
nhiều trang
vô hạn

$99