1. 趣旨
日本語でsimple_calendarを使った説明が少なかったので試行錯誤しながら作ってみました。
公式と異なり、scaffoldなしでの実装です。実装の流れが参考になればと思います。
2.バージョン
Rails 5.1.6
ruby 2.3.1p112
3.完成イメージ
indexにカレンダーが実装されていて、ブログを作成することができます。
ブログ作成時に日時を指定することによって、カレンダーとリンクします。
4.実装の流れ
まずはgemをインストールします。
gemfileに以下のコードを書いてください。
gem 'simple_calendar', '~> 2.0'
bundle install を忘れずに打ってください
次にブログのコントローラーとモデルを作成します。
$ rails g controller blogs index
忘れないうちにルーティングを修正しておきます。
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 が大切です。
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 を忘れずに打ってください。
コントローラーの中身とビューの記述はカスタマイズが可能だと思いますが、ひとまずオーソドックスに記述してみました。
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
ここからはビューの記述です
<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 %>で出力します。
<%= 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も記述します。
<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に記述を追加します
/*
*= require simple_calendar #ここに追記します
*= require_tree .
*= require_self
*/
できました！！！！
この先のレイアウトやカスタマイズ方法を知っている方がいればご教授いただけると幸いです。
5.参考
以下が公式ドキュメントです。
https://github.com/excid3/simple_calendar
scaffoldで作っている方もいらっしゃったので記載させていただきます。
https://qiita.com/mikaku/items/0971442a7308dc669122