Share Tạo lịch bằng JavaScript với thư viện FullCalendar

filiallion · 05/28/2019

Hiện nay phần lớn các bạn khi làm việc sẽ đều làm một điều đó là lên lịch làm việc hàng ngày, hàng tuần hay thậm chí là hàng tháng. Với các ứng dụng, dịch vụ trực tuyến như Google Calendar các bạn sẽ dễ dàng lên lịch làm việc của mình. Đây là nhu cầu của mọi người còn đối với các bạn lập trình viên thì việc tạo ra một ứng dụng lịch để lên lịch làm việc, các sự kiện cung cấp đến cho người dùng thì như thế nào? Rất đơn giản, các bạn có thể sử dụng thư viện FullCalendar để thiết kế các ứng dụng lịch một cách nhanh chóng.

Thư viện FullCalendar có thể tạo ra nhiều loại lịch khác nhau như lịch theo tuần, theo tháng, theo năm với nhiều trường thông tin bổ sung. Ngoài ra, các bạn còn có thể tạo các sự kiện ngay trên lịch. Hiện nay, thư viện FullCalendar được nhiều ứng dụng web sử dụng bởi tính linh động, chuyên nghiệp mà thư viện mang lại cho các bạn lập trình viên.

Thư viện FullCalendar là một plugin của jQuery nên khi sử dụng các bạn cần tích hợp thư viện jQuery trước, sau đó các bạn tải thư viện FullCalendar tại địa chỉ https://fullcalendar.io/docs/getting-started và tích hợp vào website như sau:

HTML:

<link href="path/to/fullcalendar.css" rel="stylesheet">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/moment.min.js"></script>
<script src="path/to/fullcalendar.js"></script>

Bây giờ, các bạn có thể cài đặt nhanh một lịch sự kiện với thư viện FullCalendar như sau:

JavaScript:

$(function() {
    $('#fullcalendar').fullCalendar({
        defaultDate: '2019-05-28',
        events: [{
            title: 'Event title',
            start: '2019-05-28',
            end: '2019-05-29'
        }]
    });
});

Các bạn tạo thêm thành phần HTML để hiển thị lịch sự kiện trên như sau:

HTML:

<div id="fullcalendar"></div>

Các bạn có thể tìm hiểu thêm về thư viện FullCalendar tại địa chỉ https://fullcalendar.io.

Share Tạo lịch bằng JavaScript với thư viện FullCalendar

filiallion

Administrator