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:
1 2 | gem <span class="token string">"simple_calendar"</span><span class="token punctuation">,</span> <span class="token string">"~> 2.0"</span> |
=> bundle install
Add vào file app/assets/stylesheets/application.css
1 2 | <span class="token operator">*=</span> require simple_calendar |
Cách sử dụng
Month Calendar
Bạn có thể generate calendar hiển thị theo tháng sử dụng method sau:
1 2 3 4 | <span class="token operator"><</span><span class="token string">%= month_calendar do |date| %> <%=</span> date <span class="token string">%> <% end %></span> |
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:
1 2 3 4 | <span class="token operator"><</span><span class="token string">%= week_calendar number_of_weeks: 2 do |date| %> <%=</span> date <span class="token string">%> <% end %></span> |
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ỳ
1 2 3 4 | <span class="token operator"><</span><span class="token string">%= calendar number_of_days: 4 do |date| %> <%=</span> date <span class="token string">%> <% end %></span> |
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:
1 2 3 4 | <span class="token operator"><</span><span class="token string">%= calendar start_date_param: :my_date do |date| %> <%=</span> date <span class="token string">%> <% end %></span> |
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_time và end_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.
1 2 3 4 5 6 | <span class="token comment"># single day events</span> $ rails g model <span class="token constant">Meeting</span> name start_time<span class="token symbol">:datetime</span> <span class="token comment"># multi-day events</span> $ rails g model <span class="token constant">Meeting</span> name start_time<span class="token symbol">:datetime</span> end_time<span class="token symbol">:datetime</span> |
Mình sẽ create data cho event này như sau:
1 2 3 4 5 6 | <span class="token constant">Meeting</span><span class="token punctuation">.</span>create start_time<span class="token punctuation">:</span> <span class="token builtin">Time</span><span class="token punctuation">.</span>current<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">"Current"</span> <span class="token constant">Meeting</span><span class="token punctuation">.</span>create start_time<span class="token punctuation">:</span> <span class="token builtin">Time</span><span class="token punctuation">.</span>current <span class="token operator">+</span> <span class="token number">1.</span>day<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">"Tomorrow"</span> <span class="token constant">Meeting</span><span class="token punctuation">.</span>create start_time<span class="token punctuation">:</span> <span class="token builtin">Time</span><span class="token punctuation">.</span>current<span class="token punctuation">,</span> end_time<span class="token punctuation">:</span> <span class="token builtin">Time</span><span class="token punctuation">.</span>current <span class="token operator">+</span> <span class="token number">1.</span>days<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">"Multi 2 days"</span> |
- Step 2
Từ model trên, mình có thể query để lấy event đó để hiện thị trên calendar như sau:
1 2 3 4 | <span class="token keyword">def</span> index <span class="token variable">@meetings</span> <span class="token operator">=</span> <span class="token constant">Meeting</span><span class="token punctuation">.</span>all <span class="token keyword">end</span> |
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.
1 2 3 4 5 6 7 8 9 10 | <span class="token operator"><</span><span class="token string">%= month_calendar events: @meetings do |date, meetings| %> <%=</span> date <span class="token string">%> <% meetings.each do |meeting| %></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">=</span> meeting<span class="token punctuation">.</span>name <span class="token string">%> </div></span> <span class="token operator"><</span><span class="token operator">%</span> <span class="token keyword">end</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span> <span class="token keyword">end</span> <span class="token operator">%</span> |
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