Xây dựng calendar trong Ruby on Rails với simple calendar gem

Tram Ho

Simple Calendar là thư viện được thiết kế lên để giúp các developer xây dựng calendar một cách nhanh chống và dễ dàng. Thư viện này có thể render calendar rất linh hoạt như render calendar với day view, week view, month view, …. Hơn nữa nó cũng có thể dùng để render các events vào trên calendar đó.

Cài đặt

Add vào Gemfile:

=> bundle install

Add vào file app/assets/stylesheets/application.css

Cách sử dụng

Month Calendar

Bạn có thể generate calendar hiển thị theo tháng sử dụng method sau:

params start_date default sẽ là current date.

Week Calendar

Bạn có thể generate calendar hiển thị theo tuần sử dụng method sau:

Trong đó number_of_weeks là số lượng tuần để hiển thị, default sẽ là 1.

Calendar với số lượng ngày bất kỳ

Trong đó number_of_days là số lượng ngày để hiển thị, default là 4.

Custom tên params

Default params start_date sẽ được dùng và hiển thị trên URL. Để customize params này thành tên khác, bạn có thể truyền start_date_param trong hàm calendar như sau:

Rendering Events

Các method trên bạn có thể dùng nó để render thành các calendar theo tháng, tuần, ngày, …
Ở đây chúng ta sẽ dùng nó để render các sự kiện trên nó.

  • Step 1:

Create model với 2 attributes cần thiết là: start_timeend_time.
Nếu model đó chỉ có attribute start_time, có nghĩa là nó là sự kiện chỉ xảy ra trong ngày. Nếu có cả end_time có nghĩa là sự kiện đó xảy ra trong vòng nhiều ngày.

Mình sẽ create data cho event này như sau:

  • Step 2

Từ model trên, mình có thể query để lấy event đó để hiện thị trên calendar như sau:

Tiếp theo trong view, bạn chỉ cần truyền option events vào. Nó sẽ tự động render ngày mà sự kiện đó xảy ra với từng ngày trên calendar.

Kết quả sẽ như sau:

Đến đây mình đã xây dựng được calendar đơn giản theo yêu cầu mình muốn. Hơn nữa, mình cũng có thể customize View của calendar đó được, chị tiết hãy xem tài liệu của nó Customizing The Calendar

References

https://github.com/excid3/simple_calendar

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo