[Rails] 簡易行事曆

本文使用 Ruby 2.3.1 / Rails 5.0.0

前言

本專案簡易建立月份行事曆，並有以下功能：

• 有bootstrap-datapicker可以選擇
• 有月份清單可瀏覽

相關gem

gem 'bootstrap-generators', '~> 3.3.4'
gem 'record_tag_helper', '~> 1.0' 

步驟

1. 安裝gem

bundle install
rails generate bootstrap:install
spring stop

1. 產生scaffold

rails g scaffold article name publilshed_on:date content:text
rails db:migrate

1. 用bootstrap-datepicker替換原本日期選項

• 到bootstrap-datepicker下載來將asset掛到系統
• 找到publilshed_on替換為以下文字

<!-- [path] app/views/articles/_form.html.erb -->
...
  <div class="form-group">
    <%= f.label :publilshed_on, class: "col-sm-2 control-label" %>
    <div class="col-sm-10">
      <div class="input-group date">
        <%= f.text_field :publilshed_on, class: "form-control" %>
        <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
      </div>
    </div>
  </div>
 ...

• 並在最下方加入js

<!-- [path] app/views/articles/_form.html.erb -->
 <script type="text/javascript">
$('.input-group.date').datepicker({
    format: "yyyy-mm-dd",
    language: "zh-TW",
    autoclose: true,
    todayHighlight: true,
    toggleActive: true
});
</script>

1. 加入首頁的行事曆畫面

• 加入helper

## [path] app/helpers/calendar_helper.rb
module CalendarHelper
  def calendar(date = Date.today, &block)
    Calendar.new(self, date, block).table
  end
  class Calendar < Struct.new(:view, :date, :callback)
    HEADER = %w[Sunday Monday Tuesday Wednesday Thursday Friday Saturday]
    START_DAY = :sunday
    delegate :content_tag, to: :view
    def table
      content_tag :table, class: "calendar" do
        header + week_rows
      end
    end
    def header
      content_tag :tr do
        HEADER.map { |day| content_tag :th, day }.join.html_safe
      end
    end
    def week_rows
      weeks.map do |week|
        content_tag :tr do
          week.map { |day| day_cell(day) }.join.html_safe
        end
      end.join.html_safe
    end
    def day_cell(day)
      content_tag :td, view.capture(day, &callback), class: day_classes(day)
    end
    def day_classes(day)
      classes = []
      classes << "today" if day == Date.today
      classes << "notmonth" if day.month != date.month
      classes.empty? ? nil : classes.join(" ")
    end
    def weeks
      first = date.beginning_of_month.beginning_of_week(START_DAY)
      last = date.end_of_month.end_of_week(START_DAY)
      (first..last).to_a.in_groups_of(7)
    end
  end
end

• 調整controller

## [path] app/controllers/articles_controller.rb
@articles = Article.all
@articles_by_date = @articles.group_by {|i| i.publilshed_on.to_date}
@date = params[:date] ? Date.parse(params[:date]) : Date.today

• 頁面下方加入行事曆

<!-- [path] app/views/articles/index.html.erb -->
...
<div>
  <h1>Articles</h1>
  <div id="articles">
    <h2 id="month">
      <%= link_to "<", date: @date.prev_month %>
      <%= @date.strftime("%B %Y") %>
      <%= link_to ">", date: @date.next_month %>
    </h2>
    <%= calendar @date do |date| %>
      <%= date.day %>
      <% if @articles_by_date[date] %>
        <ul>
          <% @articles_by_date[date].each do |article| %>
            <li><%= link_to article.name, article %></li>
          <% end %>
        </ul>
      <% end %>
    <% end %>
  </div>
</div>

完成

參考

1. Railscasts PRO #213 Calendars
2. bootstrap-datepicker
3. solution from stackoverflow