Hướng dẫn icon calendar bootstrap - bootstrap lịch biểu tượng
Bootstrap CalendarHướng dẫn sử dụng với Ruby on RailsCó thể rất nhiều bạn đã nhìn thấy calendar quen thuộc này, và thấy nó nhìn rất hay và đẹp. Nhưng lại không biết làm thế nào để áp dụng vào trang web của mình. Vì nó không phải là một gem như bootstap mà chúng ta có thể install như bình thương. Bài viết này của mình sẽ hướng dẫn các bạn cách cài đặt và sửa dụng Bootstrap Calendar một cách chi tiết và đơn giản nhất để các bạn có thể sử dụng được ngay. Mình sẽ sử dụng Ruby on Rails để demo. Nhưng mình tin là sau khi đọc nó thì các bạn có thể sử dụng với bất kỳ ngôn ngữ web nào mà bạn biết. II) Chuẩn bịVâng, việc đầu tiên mà chúng ta cần làm đó chính là clone source code của nó về để sử dụng. Chúng ta phải copy các file css, js từ source code của họ để import vào project của chính mình. Nhưng mà ở đó có rất nhiều file, chúng ta phải copy những file nào? Tất cả ư? Không, câu trả lời đó rất là hiển nhiên rồi. Trong source code có rất nhiều thư viện mà ở project của chúng ta đã có sẵn nên không việc gì phải lấy tất cả. Dưới đây mình xin liệt kê những file cần thiết:
Trên đây là những file bắt buộc phải có với các ứng dụng web. Ngoài ra thì chúng ta phải thêm css của bootsstrap nếu như các bạn không cài gem của bootstrap
III) Cách dùngCó khá nhiều các khởi tạo một calendar với các cách load events khác nhau. Mình chỉ nói 2 cách đơn giản nhất là: 1) Hard codeBạn truyền ngay mảng event vào trong events_source như dưới đây là xong
Như trên ta thấy, chỉ cần trong events_source có được mảng data dưới dạng json nđúng format là được. 2) Fectch urlCách này đơn giản hơn rất nhiều và mình nghĩ nó sẽ được sử dụng nhiều nhất. Đó chính là truyền vàoevents_source một url là nó sẽ tự động fetch dữ liệu về để hiển thị. Và dĩ nhiên là hành động fetch đó sẽ là method get với format json.
Dữ liệu khi trả về có dạng:
Giải thíchVâng, cách dùng thì đơn giản. Nhưng những dữ liệu đó có ý nghĩa gì và để làm gì.
Vâng, ở trên mình có đề cập tới việc nội dung url sẽ được hiển thị lên modal. Vậy cách dùng của nó ra sao? Việc này mình cũng có thể nói là khá đơn giản. Bạn chỉ cần thêm view và option khi khơi tạo là xong
Còn một vấn đề nữa mà mình cũng đã từng đề cập đó là cách hiển thị của calendar. Vậy có những cách hiển thị nào? Đó là: Hiển thị theo năm, theo tháng, theo tuần và theo ngày. Dùng nó như sau:
Dưới đây là hình demo các kiểu hiển thị của calendar DAY WEEK MONTH YEAR Trên đây là một số hướng dẫn đơn giản để các bạn có thể tạo một ứng dụng web sử dụng calendar của boostrap. Các bạn có thể tham khảo một cách chi tiết và đầy đủ hơn ở https://github.com/Serhioromano/bootstrap-calendar Bản demo của mình ở đây
|