【rails】simple_calendarを使ってカレンダーつきのブログ機能を作ってみた。

##1. 趣旨

日本語でsimple_calendarを使った説明が少なかったので試行錯誤しながら作ってみました。
公式と異なり、scaffoldなしでの実装です。実装の流れが参考になればと思います。

##2.バージョン
Rails 5.1.6
ruby 2.3.1p112

##3.完成イメージ
[![Image from Gyazo](https://i.gyazo.com/47e88154463c404c5da605f10ff1d42f.png)](https://gyazo.com/47e88154463c404c5da605f10ff1d42f)

indexにカレンダーが実装されていて、ブログを作成することができます。
ブログ作成時に日時を指定することによって、カレンダーとリンクします。

##4.実装の流れ

まずはgemをインストールします。
gemfileに以下のコードを書いてください。

```ruby:/Gemfile
gem 'simple_calendar', '~> 2.0'
```

bundle install を忘れずに打ってください

次にブログのコントローラーとモデルを作成します。

```
 $ rails g controller blogs index
```


忘れないうちにルーティングを修正しておきます。

```ruby:/config/routes.rb
Rails.application.routes.draw do
  root to: 'blogs#index'
  resources :blogs

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

```

モデルも作ります。モデル作成後にマイグレーションファイルをいじります。

```
 $ rails g model blog
```

マイグレーションファイルはこのようにしました。
今回はカレンダーに出力したいので　t.datetime :start_time　が大切です。

```ruby:/db/migrate/20181022055301_create_blogs.rb
class CreateBlogs < ActiveRecord::Migration[5.1]
  def change
    create_table :blogs do |t|
      t.string :title
      t.text :content
      t.datetime :start_time

      t.timestamps
    end
  end
end
```

記述した後に rails db:migrate を忘れずに打ってください。

コントローラーの中身とビューの記述はカスタマイズが可能だと思いますが、ひとまずオーソドックスに記述してみました。

```ruby:/app/controllers/blogs_controller.rb
class BlogsController < ApplicationController
  
  def index
    @blogs = Blog.all
  end

  def new
    @blog = Blog.new
  end

  def show
    @blog = Blog.find(params[:id])
  end

  def create
    Blog.create(blog_parameter)
    redirect_to blogs_path
  end

  def destroy
    @blog = Blog.find(params[:id])
    @blog.destroy
    redirect_to blogs_path, notice:"削除しました"
  end

  def edit
    @blog = Blog.find(params[:id])
  end

  def update
    @blog = Blog.find(params[:id])
    if @blog.update(blog_parameter)
      redirect_to blogs_path, notice: "編集しました"
    else
      render 'edit'
    end
  end

  private

  def blog_parameter
    params.require(:blog).permit(:title, :content, :start_time)
  end

end
```

ここからはビューの記述です

```html:/app/views/blogs/index.html.erb
<p id="notice"><%= notice %></p>

<h1>自分の日記</h1>

<table>
  <thead>
    <tr>
      <th>タイトル</th>
      <th>時間</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @blogs.each do |blog| %>
      <tr>
        <td><%= blog.title %></td>
        <td><%= blog.start_time.strftime("%Y-%m-%d %H:%M") %></td>
        <td><%= link_to 'Show', blog %></td>
        <td><%= link_to 'Edit', edit_blog_path(blog.id) %></td>
        <td><%= link_to 'Destroy',blog_path(blog.id), method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to '日記をかく', new_blog_path %>

<%= month_calendar events: @blogs do |date, blogs| %>
  <%= date.day %>

  <% blogs.each do |blog| %>
    <div>
      <%= link_to blog.title, blog %>
    </div>
  <% end %>
<% end %>
```
.strftime("%Y-%m-%d %H:%M")を記述することによって日本時間に変更することができます。
<%= date %>だと2018-10-01と出力されるので、カレンダーらしく日にちだけ表示するために<%= date.day %>で出力します。

```html:/app/views/blogs/new.html.erb
<%= form_with(model: @blog, local: true) do |form| %>

  <div class="title">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

    <div class="time">
    <%= form.label :start_time %>
    <%= form.datetime_select :start_time %>
  </div>
  
  <div class="content">
    <%= form.label :content %>
    <%= form.text_field :content %>
  </div>


  <div class="submit">
    <%= form.submit %>
  </div>

<% end %>
```
edit.html.erbもnew.html.erbと同じ記述で作ってください

show.html.erbも記述します。

```html:/app/views/blogs/show.html.erb
<p id="notice"><%= notice %></p>

<p>
  <strong>タイトル</strong>
  <%= @blog.title %>
</p>

<p>
  <strong>時間</strong>
  <%= @blog.start_time.strftime("%Y-%m-%d %H:%M") %>
</p>

<p>
  <strong>内容</strong>
  <%= @blog.content %>
</p>

<%= link_to 'Edit', edit_blog_path(@blog) %> |
<%= link_to 'Back', blogs_path %>
```



カレンダーの見た目を整えるために以下を実施。

```
 $ rails g simple_calendar:views
```


以下の４つがクリエイトされて見た目が整います。


```
      create  app/views/simple_calendar
      create  app/views/simple_calendar/_calendar.html.erb
      create  app/views/simple_calendar/_month_calendar.html.erb
      create  app/views/simple_calendar/_week_calendar.html.erb
```


最後にapplication.scssに記述を追加します

```ruby:/app/assets/stylesheets/application.css
/*
 *= require simple_calendar #ここに追記します
 *= require_tree .
 *= require_self
 */
```
　
できました！！！！
[![Image from Gyazo](https://i.gyazo.com/47e88154463c404c5da605f10ff1d42f.png)](https://gyazo.com/47e88154463c404c5da605f10ff1d42f)


この先のレイアウトやカスタマイズ方法を知っている方がいればご教授いただけると幸いです。

##5.参考
以下が公式ドキュメントです。
https://github.com/excid3/simple_calendar

scaffoldで作っている方もいらっしゃったので記載させていただきます。
https://qiita.com/mikaku/items/0971442a7308dc669122